FC2ブログ

ヘッダーメニューのカスタマイズ方法② Templ8@FC2blog

FC2ブログテンプレートの無料配布とカスタマイズでSEO対策(検索エンジン最適化)

ホーム > templ8カスタマイズ >ヘッダーメニューのカスタマイズ方法②

ヘッダーメニューのカスタマイズ方法②

FC2ブログテンプレートカスタマイズ「ヘッダーメニューのカスタマイズ方法②」

僕のカスタムテンプレートのヘッダーメニューの初期設定では、HOME、MAIL、ARCHIVES(全記事表示)、RSS、EDIT(管理画面)になっていますが、この初期設定は万人向けというかとりあえずの設定でして、ほんとは僕のテンプレートを使う人たち、またそのブログに訪れる人たちにとって使いやすいようなメニューにカスタマイズしてほしいと考えて作りました。

例えばこのサイトでヘッダーメニューでカテゴリーリンクや特定記事へのリンク、掲示板などへのリンクを貼り、サイトに訪れた人がすぐに見たいページに飛べるように工夫しています。
パニック障害自助グループ「太陽の翼」

このようにカテゴリリンクなどを貼り、メニューとして機能させればブログを訪れる人にもやさしいブログになります。

ではヘッダーメニューのカスタマイズ方法です。基本はとても簡単です。ヘッダーメニュー部分のHTMLを見てみましょう。

<!--▼▼ ヘッダーメニュー ▼▼-->
<div class="menu">
<ul>
<li><a href="<%url>">HOME</a></li><li>|</li>
<li><a href="mailto:">MAIL</a></li><li>|</li>
<li><a href="<%url>archives.html">ARCHIVES</a></li><li>|</li>
<li><a href="<%url>?xml">RSS</a></li><li>|</li>
<li><a href="<%url>?admin">EDIT</a></li><li>|</li>
</ul>
</div>
<!--▲▲ ヘッダーメニュー ▲▲-->

<ul>と</ul>の間に下記のような<li>タグで始まる行が縦にならんでいます。1行で1セットと考えてください。

<li><a href="URL">タイトル</a></li><li>|</li>

URLとタイトルを自分のリンクしたいものに変えていくだけです。そして、もっとメニューの数を増やしたければ上記1行をそのまま増やせばメニューが横に増えてきます。

<カスタム例>
<!--▼▼ ヘッダーメニュー ▼▼-->
<div class="menu">
<ul>
<li><a href="<%url>">HOME</a></li><li>|</li>
<li><a href="カテゴリ①URL">カテゴリ①タイトル</a></li><li>|</li>
<li><a href="カテゴリ②URL">カテゴリ②タイトル</a></li><li>|</li>
<li><a href="カテゴリ③URL">カテゴリ③タイトル</a></li><li>|</li>
<li><a href="カテゴリ④URL">カテゴリ④タイトル</a></li><li>|</li>
<li><a href="カテゴリ⑤URL">カテゴリ⑤タイトル</a></li><li>|</li>
<li><a href="カテゴリ⑥URL">カテゴリ⑥タイトル</a></li><li>|</li>
<li><a href="カテゴリ⑦URL">カテゴリ⑦タイトル</a></li><li>|</li>
<li><a href="カテゴリ⑧URL">カテゴリ⑧タイトル</a></li><li>|</li>
</ul>
</div>
<!--▲▲ ヘッダーメニュー ▲▲-->

↑上の設定でブログを見ると....

HOME | カテゴリ① | カテゴリ② | カテゴリ③ | カテゴリ④ | ………

...と横にずらーっと並んでいきます。

ぜひいろいろ試してみて自分のブログにあったメニューを作って見てください。

2008/11/01 21:58 templ8カスタマイズ
メールフォーム
僕のカスタマイズしたテンプレート、その他テンプレートについて、何か解からないことがあれば何でも聞いてください。具体的に書いて頂けるとありがたいです。

名前:

メール:

件名:

本文: