FC2ブログにナビゲーションメニューを設置する

（この記事は、FC2ブログを使用していたときに書いた記事です。）

くらげ模様に、ナビゲーションメニューを設置しました。

ナビゲーションメニューとは、別名グローバルメニューとも呼ばれるメニュー機能で、サイト内の各ページに共通して設置されるサイトコンテンツメニューのことです。
ナビゲーションがあると、見てほしいページなどへの誘導が容易になります。

また、現在見ているページだけでなく、他のページを見てもらうキッカケにもなります。Webデザインの仕事をしていくうちに、ナビゲーションの大切さを実感したので、設置することにしました。

ナビゲーションメニューはどんな項目にする？
ナビゲーションメニューの設置の仕方
- 参考にするデザイン
- HTMLタグの記述
スタイルシートでデザインを決める
終わりに

ナビゲーションメニューはどんな項目にする？

ホーム

トップページに戻る手段は、ヘッダーのタイトルをクリックしたり、パンくずリストと呼ばれる、現在どこのページにいるかを表示するヘッダーの下の左側によくいる小さいやつのホームという文字をクリックするなどの方法がありますが、やはりメニューボタンがあるとすぐにクリックできるのでユーザーにとってはありがたい存在です。(2017年10月13日現在はホームを削除しています） >ブログで一番読んでほしいカテゴリー

サイドメニューにもカテゴリーリストがありますが、グローバルメニューの中に入っていると、より目立ちます。ユーザーとしても、イチオシのカテゴリーなんだなと認識することができます。

プロフィール

ブログの機能に、カンタンなプロフィールを表示できるプロフィール機能が付いているので、そちらで十分であれば必要ありません。しかし、くらげのように別ファイルでプロフィールページを作ったり、プロフィール用の記事を書いている場合はそちらに誘導することが可能です。

お問い合わせページ

こちらも、プラグインでサイドメニューにお問い合わせフォームを表示させることができます。しかし、FC2IDでメールフォームを設定している場合は、お問い合わせフォーム用のアドレスへのリンクを貼ることができます。

記事一覧

FC2では、ブログのアドレスに/archives.htmlを付けることによって記事一覧ページを表示させることが可能です。この一覧ページへのリンクを貼ることによって、他の記事を見てもらうことができます。

ナビゲーションメニューの設置の仕方

さて、それではナビゲーションメニューの設置の方法について説明していきます。
設置については、ブログテンプレートのHTMLとCSSをいじります。一度いじってしまったら元に戻せないので、必ずテンプレートの複製をしておいてください。

参考にするデザイン

ナビゲーションを作るにあたり、デザインはシンプルにすることにしました。ただの横並びです。横並びにする方法はいろいろありますが、参考にしたのはコチラのサイト。
【CSS】table-cellを使って要素を均等に配置する方法 | delaymania

HTMLタグの記述

設置場所はヘッダーの下になので、<div id="header></div>という記述を探します。Ctl+FかComand+Fで[header]と打つとすぐに検索できます。その下に、以下のように記述します。

<div id="header-menu">
<ul>
<li><a href="<%url>" title="<%template_home>" class="home">Home</a></li>
<li><a href="<%url>archives.html">記事一覧>/a</li>
<li><a href="http://kuragemoyou.com/wp-content/uploads/Profile_02.html">
Profile></a></li>
<li><amp;lt;a href="http://form1.fc2.com/form/?id=891486">Contact</li>
</ul>
</div>

上記コードの一番最初にある、

<div id="header-menu">

というのは、このひとかたまりの記述は、"header-menu"という名前ですよという意味です。最後に</div>で閉じてあげます。
タグの意味をカンタンに説明すると、

<ul>(Unordered Listというリスト表記のためのタグ)
<li>(リストの項目)<a href="FC2の変数＋飛ぶ先のアドレス">メニューに表記する文字</a></li>
</ul>

となっています。

<a href="<%url>" title="<%template_home>" class="home">Home</a></li>

というのは、ブログのトップページに飛びますよという記述です。

FC2変数に関しては、こちらを参照にしてください。
FC2ヘルプ | FC2ブログ | テンプレート用　変数一覧

スタイルシートでデザインを決める

次に、CSSでデザインしていきます。

#header-menu ul{
background-color: #BEE1ED;  /*メニュー全体の色の表記。カラーコードを書き換えれば色も変わる。*/
display: table;
table-layout: fixed;
text-align: center;
margin-top:2px; /*headerとの距離を2px離しています。*/
width: 100%;
}
#header-menu  ul li {
border-right: 1px solid #fff; 　/*項目と項目の間の色。#fffは真っ白*/
vertical-align: middle;
height: 50px;　/*メニューの高さ*/
}
#header-menu li a {
color: #fff;  /*メニューのテキストの色。ここも、カラーコードで変更できる*/
display: table-cell;
display: block;
font-size: 12px;　/*テキストフォントの大きさ。12pxから14pxが標準的な大きさ*/
text-decoration: none;
padding:10px;
}
#header-menu li a:hover {
display:block;
line-height:30px;
font-weight: bold;
background:#00afec;　/*マウスカーソルを合わせたときの色。この色を変えておくとクリックできると
　　　　　　　　　　　　　　　ユーザーが認識できる*/
color:#fff;       /*カーソルを合わせたときのテキストフォントの色*/
}

ここで、先ほど参照サイトにあった記事の表記が出てきます。難しいことは置いておきますが、要するに均等に横並びにするための方法です。
横幅100%にしてあるため、それぞれの項目の幅が足して100%になるような大きさに配分されます。

以上で、グローバルメニューの完成です。くらげ模様では、テキストの前にWebアイコンフォントというアイコンを使用しています。これはまた次の機会にでも説明します。