(この記事は、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]と打つとすぐに検索できます。その下に、以下のように記述します。
<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アイコンフォントというアイコンを使用しています。これはまた次の機会にでも説明します。
終わりに
まずは、実際にいじってみるのが一番です。まだまだ駆け出しWebデザイナーでコーディングのできないくらげでも何とかなったのだから、初心者でも何とかなります。
コメントを残す