« ブルーライン | メイン | ポッドキャストはじめました »
2005年07月28日
8月号
theme of this month
「サイトナビゲーションを工夫する」
ブログをカスタマイズする際、デザインに凝るのはもちろんだが、サイトナビゲーションの向上についても考慮していきたい。今回は読者がページ内の目的の場所にスムーズに移動したり、読みたい記事を簡単に探すことができるような機能を考えてみることにする。
●個別エントリーアーカイブを選び、ヘッダーの下に以下のソースを追加します。
<ul class="inline navigation">
<li> <a href="<$MTBlogURL$> " title="トップページ"> Top</a> <img src="http://www.○○○○.com/arrow.jpg" width="12" height ="12" alt="に含まれる" />
<ul class="inline">
<li> <MTParentCategories> <a href="<$MTCategoryArchiveLink$> " title="カテゴリー"<$MTCategoryLabel$> ""> <$MTCategoryLabel$> </a> </MTParentCategories> <img src="http://www.○○○○.com/arrow.jpg" width="12" height ="12" alt="に含まれる" />
<ul class="inline">
<li> <a href="<$MTEntryPermalink$> " title="<$MTEntryTitle$> "> <$MTEntryTitle$> </a> </li>
</ul>
</li>
</ul>
</li>
</ul>
●スタイルシートを選び、以下のソースを追加してください。
ul.inline li ul.inline {
display: inline;
padding: 0;
margin: 0
}
ul.inline li {
display: inline;
}
ul.navigation {
border: 1px solid black;
background-color: white;
margin: 1em 0;
padding: 1em 0 1em 1em;
}
ul.navigation li a {
color: black;
text-decoration: none;
}
ul.navigation li a:hover {
color: black;
text-decoration: underline;
}
●最後にアーカイブテンプレートにもパンくずリストを設置しましょう。管理者ページのテンプレート画面で、カテゴリーアーカイブを選び、ヘッダーの下に以下のソースを追加します。
<ul class="inline navigation">
<li> <a href="<$MTBlogURL$> " title="トップページ"> Top</a> <img src="http://www.○○○○.com/arrow.jpg" width="12" height ="12" alt="に含まれる" />
<ul class="inline">
<li> <a href="<$MTArchiveLink$> " title="<$MTArchiveTitle$> "> <$MTArchiveTitle$> </a>
</li>
</ul>
</li>
</ul>
●エントリーにタグを付与する
個別エントリーアーカイブを開き、任意の場所にソースを挿入します
<p> Tags: <MTEntryTags> <a href="<$MTTagArchiveLink$> " title="<$MTTagName$> "> <$MTTagName$> </a> </MTEntryTags> </p>
投稿者 tag : 2005年07月28日 18:53
トラックバック
このエントリーのトラックバックURL:
http://www.rickdom.com/mt3/mt-tbbbb.cgi/1535