Templates for SLMaMe

今回は、グローバルナビゲーション（グロナビ、またはメニューとも言います／以下、ナビゲーション）を追加したいと思います。

ソラマメでは管理者が手動で追加しない限り、「マイアルバム」や「サイトマップ」へのリンクが表示されない仕様になっています。トップページへのリンクも、デフォルトではブログタイトルにしかありません。また、閲覧者の目に触れる場所に置いておきたい記事があったりしますよね。詳しい自己紹介を書いた記事や、お店について説明している記事などが該当すると思います。

これらの問題を、ナビゲーションを追加することで解決します。

ご注意ください

横幅100%のテンプレートを使用されている方は、今回の方法を参考になさらないでください。また、ナビゲーションの表現には様々な方法があり、今回の方法が全てではありません。

リンク先とラベル名を決める

ラベル名とは、カテゴリー名やリンクの呼称を指します。例えば、ナビゲーションに「TOP」「ABOUT」といったボタンがある場合は、「TOP」「ABOUT」がラベル名になります。

閲覧者を混乱させないためにも抽象的なラベル名は避け、ラベル名とリンク先のタイトルが一致するように心掛けましょう。また、項目が多すぎても混乱の元になりますので注意してください。

私は以下４つのリンクをナビゲーションに加えることにしました。

• HOME（http://templ.slmame.com/）
• ABOUT（http://templ.slmame.com/e527802.html）
• MY ALBUM（http://templ.slmame.com/album.html）
• SITEMAP（http://templ.slmame.com/sitemap.html）

私はこのブログを始めたきっかけについて、一番最初の記事に書いています。訪問者にブログの趣旨を理解してもらうため、「ABOUT」（このブログについて）というラベル名のリンクを加えることにしました。こうすることで、深い場所にある記事でも閲覧される機会を増やすことが出来ます。

元々、この記事は「ソラマメブログで落ち着くために」というタイトルでした。これを今回のカスタマイズに合わせて「ABOUT」に変更し、記事の内容も見直しています。また、「未分類」カテゴリーに入れていたのを「カテゴリーなし」に変更しました。

更に、この記事のみ個別にトラックバック受信をオフにしています。コメントは許可していますが、コメントも閉じれば記事とは異なる単独のページに見せかけることが出来ます。

尚、全て英語表記（＋大文字）にしている理由ですが、MY ALBUM と SITEMAP のタイトルが変更できない仕様になっているので、表記を統一するために英語表記にしています。

形と表示位置を決める

私の場合は、ナビゲーションとサイドバーの「カテゴリー」がきちんと区別されるよう、横並びのナビゲーションをヘッダ画像の下に設置することにしました。
ナビゲーションは、ページを表示した時にスクロールしなくても見える位置に設置してください。

背景画像を用意する

ナビゲーション用の背景画像をブログのテイストに合わせて作成します（画像作成は必須ではありません。背景色を指定することも可能です）。

今回は、ナビゲーションボタンを一つ一つ作成するのではなく、１枚の背景画像の上にテキストリンクを並べます。こうしておくことで、ナビゲーションに追加したい項目が出来た時に画像を作り直す必要が無く、コードの修正のみで更新が済みます。

用意した画像がこちら。



現時点でこのブログは横幅を 800px に固定しているので、横幅 800px ちょうどの画像を用意しました。

HTML テンプレートに手を加える

「トップページ」「個別記事」「アーカイブ」に手を加えます。ナビゲーションを追加したい場所に、以下のソースを挿入します。

<div id="nav">

<ul>

<li><a href="<%BlogUrl%>" title="HOME">HOME</a>｜</li>

<li><a href="<%BlogUrl%>記事のファイル名.html" title="ABOUT">ABOUT</a>｜</li>

<li><a href="<%BlogUrl%>album.html" title="MY ALBUM">MY ALBUM</a>｜</li>

<li><a href="<%BlogUrl%>sitemap.html" title="SITEMAP">SITEMAP</a></li>

</ul>

</div>

CSS テンプレートに手を加える

テンプレート「スタイルシート」に以下のコードを追加します。

#nav {

   margin: 0;

   padding: 0;

   width: 800px; /* ナビゲーションの横幅 */

   height: 45px; /* ナビゲーションの縦幅 */

   color: #ccc;

   background: url(ナビゲーション用背景画像のURL) no-repeat;

}



#nav ul {

   margin: 0;

   padding: 13px 0 0 20px; /* ここで文字の位置を決めています */

}



#nav ul li {

   float: left; /* リストを横並びに */

   list-style: none; /* リストのスタイルをリセット */

   font-size: 13px;

}



#nav ul li a, #nav ul li a:link, #nav ul li a:visited {

   color: #333;

   font-weight: bold;

   text-decoration: none;

}



#nav ul li a:hover, #nav ul li a:active {

   color: #009933;

   font-weight: bold;

   text-decoration: none;

}

完成

これで、ブログにナビゲーションが追加されました。



サイドバーには無いリンクが追加されたことで、ブログの使い勝手が更に上がったと思います。