Templates for SLMaMe

（2009.04.20 23:37 記事タイトルと本文を一部変更しました）
以前、「グローバルナビゲーションを追加する」方法をご紹介しました。
この方法は背景画像の上に横並びにさせたリストを配置しているので、リンクはテキストリンクのままです。

そこで今回は、リンクをボタンに見せかけたナビゲーションの作成方法をご紹介します。

ナビゲーションに加えるボタンは、例として「HOME」「MY ALBUM」「SITEMAP」にしています。

ご注意ください

今回のカスタマイズ方法はソラマメのデフォルトテンプレート「幅100%」でも有効ですが、もしかすると、貴方が望む見栄えにならない（更にカスタマイズを必要とする）可能性があります。

また、他所で配布されているテンプレートや、既にカスタマイズしたテンプレートに使用すると、レイアウトなどに問題が生じる場合があります。

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

ナビゲーションはデフォルトでは存在しないので、ソースを追加することになります。追加するテンプレートは「トップページ」「個別記事」「アーカイブ」の３つです。

ヘッダーの下にナビゲーションを表示させたい場合は、以下のソースを <div id="banner">（中略）</div> の後に追加してください。

<div id="nav">

<ul>

<li><a href="<%BlogUrl%>" title="HOME">HOME</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><!-- /#nav -->

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

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

/* ナビゲーション全体 */

#nav {

    width: 100%; /* 横幅 */

    height: 45px; /* 縦幅 */

    border: 1px solid #ccc; /* 枠線 */

    background: #fff; /* ナビゲーションの背景色 */

}



#nav ul {

    font-size: 12px; /* フォントサイズ */

    font-weight: bold; /* 文字を太く */

    text-align: center; /* 文字の中央寄せ */

}



/* ボタン */

#nav ul li {

    float: left; 

    list-style: none; 

    border-right: 1px solid #ccc; /* ボタン右側の枠線 */

}



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

    display: block; 

    width: 150px; /* ボタンの横幅 */

    height: 45px; /* ボタンの高さ */

    text-decoration: none; /* 文字の装飾 */

    line-height: 45px; 

    background: #fff; /* ボタンの背景色 */

}



/* オンマウス＆クリックした時の背景色 */

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

    background: #e0e0e0; 

}

完成

これで、ナビゲーションがヘッダーの下に追加されました。