そらいろくらげが浮き輪で海に浮いているイラスト

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

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

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

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

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

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

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

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

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

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

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

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

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

参考にするデザイン

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

HTMLタグの記述

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

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

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

&lt;div id="header-menu">

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

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

となっています。

&lt;a href="&lt;%url>" title="&lt;%template_home>" class="home">Home&lt;/a>&lt;/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アイコンフォントというアイコンを使用しています。これはまた次の機会にでも説明します。

終わりに

まずは、実際にいじってみるのが一番です。まだまだ駆け出しWebデザイナーでコーディングのできないくらげでも何とかなったのだから、初心者でも何とかなります。

コメントを残す


goToTop