2005年6月 3日

トップナビゲーションの設置

FAQ > 回答編

開講以来、初めて質問を受けましたので、はりきってその質問にお答えします＾＾

【質問内容】
貴ブログのように、banner部分で掲示板や記事、カテゴリーなどにリンクする方法をお教えください。（一部修正）

【使用ブログ】
MovableType 3.11-ja

【質問者】
uskさん「易の向くまま気の向くまま」

当ブログタイトルの下の部分を見ていただくと、下記のような「ナビゲーション」が設置されています。

サイトマップ

作成

カスタマイズ

掲示板

リンク

このようなナビゲーションがページの上の方に設置されていれば、いちいち下の方にスクロールしなくてもリンク先にいけますので、非常に便利ですね。訪問者だけでなく、自分自身も活用するはずです＾＾

トップナビゲーションの設置方法

今回は、MovableTypeでのテンプレートを例として説明しますが、CSSとHTMLを編集できるブログでしたら、トップナビゲーションを設置することができますので、是非、参考にしてください。
それでは、「トップナビゲーションの設置方法」について説明します。

トップナビゲーションを設置するには、「スタイルシート」と「メインページ」「カテゴリー・アーカイブ」「個別・アーカイブ」「日付・アーカイブ」を編集します。

■ HTMLタグ
メインページやカテゴリーアーカイブなどのテンプレートを編集し、トップナビゲーションを挿入したい箇所に、下記のようなHTMLタグを貼り付けます。

＜メインページ＞＜カテゴリー・個別・日付アーカイブ＞

・リンク先URLとタイトルは、適切な文字に変更してください。

■ CSS
スタイルシートには、下記のような記述を追加します。（説明文は不要）
下記は、当ブログの記述例ですので、参考にしてください。

＜スタイルシート＞

#navigation {
width: 800px;
padding: 5px;
background-color: #000099;
}

#navigation ul {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 13px;
text-align: center;
background-color: #000099;
}

#navigation li {
display: inline;
white-space: nowrap;
}

【ナビゲーションの全体設定】
←横幅
←内側の余白（上下）
←背景色

【マーク付リスト】
←マーカー文字の種類（なし）
←外側の余白（上・右・下・左）
←内側の余白（上・右・下・左）
←文字サイズ
←文字の位置揃え
←背景色

【リスト項目】
←要素の表示形式（インライン）
←自動改行の禁止

・幅や高さ、文字の大きさ、文字色、背景色、マージン・パディングなどは、サイトのデザインに応じて変更してください。

また、当ブログで設置してますように、「リンクタイトル部分の背景色」や、「リンク部分にカーソルをあてた際の背景色」を変える方法は、下記の記述も追加することでできます。

＜リンクの装飾＞

#navigation a {
text-decoration: none;
color: #ffffff;
background-color: #3399ff;
padding : 1px 16px;
}

#navigation a:hover{
text-decoration: none;
color : #ffffff;
background-color : #3366cc;
}

【リンクの設定】
←テキストの下線等（なし）
←文字色
←背景色
←内側の余白（上下、左右）

【マウスオーバー中】
←テキストの下線等（なし）
←文字色
←背景色

編集後は「保存」をクリックします。「サイトの再構築」から「すべてを再構築する」を選択し、「再構築」をクリックすると、ブログに反映されます。

以上で、トップナビゲーションの設置は完了です。あとは、ブログデザインに応じて、背景色や幅などを調整してくださいね。

[関連記事] ドロップダウンメニューの設置

1クリックの応援で、質問に丁寧にお答えします＾＾