2009年2月 6日

トップページの修正

トップページを修正しましたので、かなり以前のブログの外観に近づいてきました。
作業内容は、以前の投稿「トップページの修正」(タイトルまで同じ!)と「新着記事一覧の掲載」に書かれていることとほぼ同じです。
ただ、新着情報の部分("news"と名前を付けてあります)については、マージンやテキストに関して若干の調整が必要になったので、「スタイルシート(オリジナル)」に以下の指定を追加しました。
#news ul{
      margin-left: 15px;
}
#news li{
      margin-bottom: 10px;
      font-size: 75%;
      color: #333;
}

あと、「ページの先頭に戻る」ボタンを各ページの下の方に設置しました。
これについては、以前の記事「ページのトップに戻ること」「「先頭に戻る」の画像化など」がありますが、ボタンを表示させるためのコードは同じものの、追加したテンプレートは「フッタ」1つではなく、以下の6つのテンプレートとしました。
  • メインページ(index.html)
  • ブログページ(brog.html)
  • ウェブページ
  • ブログ記事
  • ブログ記事リスト
  • 検索結果

「フッタ」テンプレートの内容が変わったので、レイアウトの都合上、少し煩雑でしたが、上記の各テンプレートにコピー、ペーストすることになりました。
ブログの復元でまだ残っているのがナビゲーション(メニュー)の部分です。
今のところ、左サイドバーのカレンダーのすぐ下に「Links(Menu)」という形で表示されていますが、やはりメニューらしくしたいと考えています。

2009年1月29日

不具合解消

Movable Type 4.23を新規インストールし、記事を1本投稿、スタイルを(3カラムの)「小、大、小」に変更したところ、見事にレイアウトが変わり、妙に感動などしています。
エクスポートしておいたこれまでの記事も無事インポートできましたので、これから再び「小粋空間」さんのテンプレートセットを導入し、カスタマイズを進めていこうと思います。

Movable Typeの新規インストール

Movable Type 4.0から4.23へのアップグレードにつまずき、しかし「小粋空間」さんのテンプレートセットを導入して何とか形を整え、それを土台にカスタマイズしていくつもりでした。
ただ、その後も不具合は相次ぎ、ついには再構築もできなくなるという有様で、これでは話にならない、とあきらめてブログを削除、ファイルとフォルダもすべてサーバから削除しました。
そして、改めてMovable Type 4.23をインストールし直したというわけです。
心機一転、また一から出直しです。

2009年1月26日

背景、ヘッダの変更など

カスタマイズを始めました。
まず、白い斜線の入った背景画像を敷いてみました。極く小さな画像の繰り返しで実現しています。テンプレート「スタイルシート(オリジナル)」に以下の記述をしました。
body.layout-three-column{
      background:#a3ccc8 url(images/back2.gif);
}

次に、以前も使っていた画像をヘッダに表示させてみました。スタイルシートは以下のとおりです。
#header {
      width:auto;
      height:130px;
      background: url(images/banner.jpg) no-repeat top center; 
}

続いて、記事の日付の背景の色、記事のタイトルの文字色、文字サイズなどを変更しました。スタイルシートは以下のとおりです。
/*ブログ記事日付等のバックの色*/
.date,
.trackbacks-header,
.comments-header,
.comments-open-header,
.search-header{
      background:#113377;
}

/*ブログ記事のタイトル*/
.entry-header{
      margin-bottom:8px;
      border-left:5px solid #115b77;
      font-size:110%;
      color:#113377;
}
.entry-header a{
      color:#113377;
}

これで以前の雰囲気に近づいてきました(背景の色はかなり違いますが)。

2008年12月 6日

スタイルシートの分割(テンプレート化)

このブログをカスタマイズし始めた1年くらい前から比較的最近まで、適用されていたスタイルシートはテンプレートにある2つ(メインとベーステーマ)と、テンプレート以外の1ファイル(screen.css)でした。
しかし、スタイルシートに手を加えることが多くなると、テンプレートを修正した方が何かと便利なことが分かり、今年の10月、「テンプレート修正に伴う余白」に書いたとおり、テンプレートでないscreen.cssの内容をコピーしてテンプレートのスタイルシート(ベーステーマ)にペースト、両者を合体させました。
それで修正はやりやすくなったのですが、2つのファイルをくっつけたため、とても長いファイルになり、目的の場所を探すのが大変になってしまいました。
そこで、スタイルシートを分割し、以前のscreen.cssの部分をテンプレート化することにしました。何でもないことですが、当時はテンプレートを新たに作るという発想がなく(というか、そういう知識がなく)、合体という「暴挙」に出たのでした。
新しいインデックステンプレートに「スタイルシート(オリジナル)」と名前をつけ(完全なオリジナルではないのですが)、ファイル名を"kim.css"としました。
そして、スタイルシート(メイン)にこのスタイルシートを読み込む指定を以下のように追加しました。

@import url(kim.css);

これだけです。もっと早くやるべきでした。

2008年11月 7日

モジュール「ヘッダ」の記述(メニュー)

ここまで色々とメニューをカスタマイズし、スタイルシートの内容は書いてきましたが、本文については(多分)書いていませんでした。
モジュールテンプレート「ヘッダ」の最後の方(divタグ2つの前)に以下の記述を追加しています。
<div id="navigation">
<ul>
<li id="navi01"><a href="<$MTBlogURL$>blog.html">ブログ記事</a></li>
<li id="navi02"><a href="<$MTBlogURL$>link.html">リンク集</a></li>
<li id="navi03"><a href="<$MTBlogURL$>profile.html">プロフィール</a></li>
<li id="navi04"><a href="<$MTBlogURL$>gallery.html">携帯写真ギャラリー</a></li>
<li id="navi05"><a href="mailto:shoji.s.kimura@nifty.ne.jp">Mail</a></li>
</ul>
</div>
上の記述で、各ウェブページへのリンク先を絶対パスにしていますが、ここは最初<MTBlogURL>を付けない相対パスで書いていました。
そうすると、メインページ(index.html)から、またはウェブページ同士ではちゃんと飛ぶのですが、それ以外の、カテゴリや月別のアーカイブのページからはリンク切れになってしまうのです。
なかなか原因が分かりませんでした。が、ブログ全体のファイル構成を眺めていてはっとしました。何のことはない、階層が違うのです。
私の知識では、絶対パスでの指定以外解決方法はありませんでした。

2008年11月 2日

メニュー部分の修正

ヘッダ下のメニューを単純なテキストからボタンのような外観に変えてみました。
いずれここは画像にするつもりですが、その前にスタイルシートのお勉強も兼ねてやってみたわけです。
一般的によく使われる方法だと思いますが、以下のように書き換えました。(結構長くなってしまいました。)
/* Navigation ------------------------------------------------------------- */
#navigation ul{
      margin: 0 0 10px 0;
      list-style: none;
      border-left: 1px solid #33789c;
}
#navigation ul li{
      float: left;
      width: 130px;
      height: auto;
      border-top: 1px solid #33789c;
      border-bottom: 1px solid #33789c;
      border-right: 1px solid #33789c;
      text-align: center;
      white-space: nowrap;
}
#navigation ul li a{
      display: block;
      background-color: #cff;
      color: #33789c;
      text-decoration: none;
}
#navigation ul li a:hover{
      background-color: #ff6;
      color: #f00;
} 
その後、#contentのmargin-topを20px→0としてヘッダとメニューの余白をなくし、同時に#alpha(左側の広いスペース)と#beta(右側の狭いスペース)についてmargin-topを20pxに設定して逆に余白を作りました。
また、メニューの各項目をfloat:leftで左寄せにしたので、回り込みを解除するために、#alphaに"clear:both"の指定を追加しました。
これで一応体裁は整ったかに見えますが、ヘッダとメニューの間に10〜15ピクセル程度の余白が残っていること、メニューの左端の青い線が表示されないことが課題(大げさ?)として残りました。
特に余白については、divタグを複雑に入れ子にし、スタイルシートが長くなると、指定場所を見つけるのが結構大変になります。
というわけで、不満ながら今日の作業は終わりとします。

2008年10月27日

トップページの修正

トップページを普通のホームページ風にカスタマイズしようと考えています。
ブログ記事がトップページでは表示されないようにし、その代わりにあいさつの文章と画像を載せてみようと思います。
まずトップページ"index.html"を生成するテンプレート「メインページ」をすべてコピーし、新たにインデックステンプレート「ブログページ」を作成してそこにペーストします。
次に「メインページ」の中でテンプレートモジュール「ブログ記事の概要」を読み込んでいる部分を削除、そこに以下の記述をしました。
<div id="message">
<img src="images/top_image.jpg" />
<p>
ようこそKim's Blogへ!<br />
(中略)
また、姉妹編(?)の"Kim's Blog-2"もよろしくお願いいたします。</p>
</div>
最後にメニューに「ブログ記事」を追加するため、テンプレートモジュール「ヘッダ」を修正、余白を調整するためスタイルシート(ベーステーマ)を修正して今回の作業は終了です。

2008年10月 4日

ヘッダとフッタの修正

Kim's Blog-2の制作に忙しく、こちらのブログがしばらく休止状態になってしまいました。
今回はヘッダの画像を変更するとともに、フッタについては画像を削除し、すっきりとさせてみました。
いくらかイメージが変わったと思います。
しかし、試行錯誤でカスタマイズを進めてきたということもあり、テンプレートの修正よりも、主に別ファイルのスタイルシートを修正するという変則的な形になってしまいました。
そのため、いちいちDreamweaverを立ち上げ、スタイルシートを開いて修正、アップロードという面倒な作業を強いられているのです。
ここまで書いてきてふと思いついたのですが、別ファイルになっているスタイルシートの中身を、テンプレートのスタイルシート(ベーステーマ)にそっくりコピペしたらどうなんでしょう。
これは次回に試してみることにします。

2008年9月 7日

Kim's Blog-2が再構築でエラーに

Movable Typeによるもう一つのブログ"Kim's Blog-2"のレイアウトを大幅に変えるため、有名な「小粋空間」さんのテンプレートを使わせていただくことにしました。
テンプレートをダウンロードし、注意深く既存のテンプレートと置き換え、最後に再構築をすると...。
しばらくして無情にもエラーのダイアログボックスが。そこには「日付アーカイブ「Monthly20080901000000」の再構築中にエラーが発生しました: テンプレート「ブログ記事リスト」の再構築中にエラーが発生しました: テンプレートタグMTIncludeでエラーが発生しました: error in module ヘッダー: テンプレートタグMTEntryTrackbackDataでエラーが発生しました: MTEntryTrackbackDataをコンテキスト外で利用しようとしています。MTEntriesコンテナタグの外部で使っていませんか?」と。
残念ながら今の私の知識では理解不能、対応不能です。
というわけで、Kim's Blog-2が当面使えなくなったので、こちらに書いているわけですが、ともかく少し勉強してみます。
ページの先頭に戻る