2004年05月02日
3段組（3カラム）にスタイル変更
iNTERNET magazine -はじめてのCSSでblog自分流デザイン 2xUP新作テンプレートダウンロードページ- のHINAGATA - 3Column（ひな型三段）をベースに、ブログのデザインを変えてみた。当サイトのデザインの作成過程をまとめる。
ブログに慣れていない一般の目から見えば、まだまだ改善点はたくさん見つかるのだろうなあ。
まず、参考にしたテンプレートに一つ間違いを見つけた。MovableTypeのロゴへのURLが間違っていた。次のように修正した。
NG "<$MTCGIPath$>images/powered.gif"
OK "<$MTStaticWebPath$>images/powered.gif"
次に、カテゴリページにそのカテゴリに属するエントリのリストを表示するため、次の記述を追加した。
<div class="sidetitle">
<$MTArchiveTitle$> Entries
</div>
<div class="side">
<MTEntries category="<$MTCategoryLavel$>
<a href="<$MTEntryPermalink$>">- <$MTEntryTitle$></a><br />
</MTEntries>
</div>
次に、個別ページにカテゴリ内のページめくりを表示させるために、CONQUE TINT WORKSを参考に次の作業を行った。
PreviousNextInCategoryというプラグインをインストールし、個別ページに次の記述を追加した。
<MTEntryPreviousInCategory>
<a href="<$MTEntryPermalink$>">« <$MTEntryTitle$></a> |
</MTEntryPreviousInCategory>
<a href="<$MTEntryPermalink archive_type="Category"$>"><$MTEntryCategory$></a>
<MTEntryNextInCategory>
| <a href="<$MTEntryPermalink$>"><$MTEntryTitle$> »</a>
</MTEntryNextInCategory>
次に、個別ページにそのエントリが属するカテゴリのエントリのリストを表示させるために、archippella -EntryCategoryLinks Plugin-を参考に次の作業を行った。
EntryCategoryLinks プラグインとAgain プラグインをインストールし、個別ページに次の記述を追加した。
<div class="sidetitle">
<a href="<$MTEntryPermalink archive_type="Category"$>"><$MTEntryCategory$></a> Entries
</div>
<div class="side">
<MTEntryPrimaryCategory>
<MTAgain limit="none">
<MTEntryNextInCategory>
<$MTAgainHere$>
<a href="<$MTEntryPermalink$>">- <$MTEntryTitle$></a><br />
</MTEntryNextInCategory>
</MTAgain>
<a href="<$MTEntryPermalink$>">- <$MTEntryTitle$></a><br />
<MTAgain limit="none">
<MTEntryPrevInCategory>
<a href="<$MTEntryPermalink$>">- <$MTEntryTitle$></a><br />
<$MTAgainHere$>
</MTEntryPrevInCategory>
</MTAgain>
</MTEntryPrimaryCategory>
</div>
次に、トップページ、カテゴリページと月別ページに表示されるエントリのタイトルをそのエントリの個別ページへのリンクとするため、次のように変更した。
変更前：
<h2 class="date">›<$MTEntryDate format="%B %d, %Y"$></h2>
</MTDateHeader>
<h3 class="title"><$MTEntryTitle$></h3>
<div class="posted">
Posted by <$MTEntryAuthor$> at <a href="<$MTEntryPermalink$>"><$MTEntryDate format="%X"$></a>
変更後：
<h2 class="date">›<$MTEntryDate format="%B %d, %Y"$></h2>
</MTDateHeader>
<h3 class="title"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
<div class="posted">
Posted by <$MTEntryAuthor$> at <a href="<$MTEntryPermalink$>"><$MTEntryDate format="%X"$></a>
最後に、カテゴリページと個別ページにサイトトップへのリンクを付け足すため、次の記述を追加した。
<div class="sidetitle">
Links
</div>
<div class="side">
<a href="<$MTBlogURL$>">サイトトップへ</a><br />
</div>
その他、テンプレート・スタイルシートの細部修正を行い、サイトデザインが一新された。デフォルトのテンプレートに比べ、ぐっと見やすくなった。
参照くださって、ありがとうございました。
カテゴリ内でのページめくり、スッキリしていて見やすいですね♪
カテゴリ関連の修正を参考にさせていただきました。ありがとうございました。