HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」 と考える方々に分かりやすい解説記事を書きたいと思っています。
当ブログのグローバルナビは幾分複雑になってしまいましたので、「やってみよう！アメブロカスタマイズ」の記事として、当ブログの簡略版ナビの設置方法を解説したいと思います。
画像を一切使わず、テキストだけで構成しますので、
- 追加・修正が簡単です！
- 各メニューの幅を意識する必要がありませんので、面倒な幅計算も不要です！
とりあえず、設置してみる
手続きは簡単。編集可能CSSの最後とフリースペースに所定のソースコードを貼り付けるだけです。まずやってみて、ご自身のブログの雰囲気にあうかどうか確かめられた後に、実際のリンク設定や、色や文字サイズなどの調整をされてもよいのではないかと思います。
手順1：CSSの最後に下記のソースを加える
/* ■グローバルナビの設定■ */
/* -----clearfix----- */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* -----位置指定の起点ボックス----- */
.skinContentsArea{
position: relative;
padding-top: 58px; /* グローバルナビの高さ38ピクセル＋その下のマージン20px */
/* 注 ベースのcssにwidth:980px;の記述有り */
}
/* -----グローバルナビ設置部分----- */
div#gnav {
position: absolute;
top: 0;
left: 0;
width: 980px;
margin: 0;
padding: 0;
border-top: 1px solid #000000; /* ←グローバルナビ上部ライン色 */
border-bottom: 1px solid #000000; /* ←グローバルナビ下部ライン色 */
}
#gnav ul {
margin: 0;
padding: 0;
list-style-type: none;
background: #000000; /* ←背景BLACKの場合 */
}
#gnav ul li {
display: block;
float: left;
margin: 0;
padding: 0;
font-size: 110%;
font-weight: bold;
}
#gnav ul li a {
display: block;
float: left;
height: 28px;
margin: 0;
padding: 8px 20px 0 20px;
border-right: 1px dotted #666666; /* ←各メニューの仕切り線 */
font-size: 120%;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
#gnav ul li a:link,
#gnav ul li a:visited {
color: #ffffff;
text-decoration: none;
}
#gnav ul li a:hover,
#gnav ul li a:active {
background: #666666; /* ←オンマウスした時のメニュー背景の色 */
color: #ffffff; /* ←オンマウスした時の文字の色 */
text-decoration: none;
}カスタマイズ対象の部分を黄色にしてコメントをつけています。後ほど説明しております。まずはこのまま貼り付けて確認されてみればいかがでしょうか？
それでご自身のブログにあわない部分があったら、黄色い文字の部分を調整しながらトライアンドエラーを繰り返されればよいのではないかと思います。
clearfixクラスが不要な方は削除して適宜HTMLソースを調整してください（←分かる方のみ）。
CSSに上記ソースを付け加えて更新した時点では、まだ大きく見た目は変更されません。
手順2：とりあえず設置確認する
とりあえずの確認が不要な方は、次にすすんでください。
フリースペースを使用して、グローバルナビのソースコードを設置します。すでにフリースペースを使用されている場合は、ソースを貼り付けて更新した段階でグローバルナビ設置が完了します。
まだフリーエリアを使用されていない場合は、まず「クイックリンク＞フリースペースの編集」でページを開き内容を編集します。［保存］ボタンを押した後、編集エリア上部の「サイドバーの配置」をクリックして、任意の場所に「フリースペース」を配置すれば設置が完了します。
確認用に一度設置してみようという方は、下記のソースコードをそのまま貼り付けてみてください。メニュー1～メニュー5までの5つのメニュー設置がされた状態を確認できます。
改行をすべて削除して貼りつけるようにしてください。<div id="gnav" class="clearfix"><ul>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
<li><a href="">メニュー4</a></li>
<li><a href="">メニュー5</a></li>
</ul></div>手順3：リンク設定したグローバルメニューを設置する
実際にメニューとリンク設定をして確認する場合は、下記のソースの黄色い文字部分を編集してください。
<div id="gnav" class="clearfix"><ul>
<li><a href="[リンク先URL]">[メニュー名]</a></li>
<li><a href="[リンク先URL]">[メニュー名]</a></li>
<li><a href="[リンク先URL]">[メニュー名]</a></li>
<li><a href="[リンク先URL]">[メニュー名]</a></li>
<li><a href="[リンク先URL]">[メニュー名]</a></li>
</ul></div>こちらも同様に改行を削除する必要がありますので、編集したファイルを一度保存しておいてから改行コードを削除するのがよいかと思います。
メニュー数を増やす場合は、<li><a href="[リンク先URL]">[メニュー名]</a></li>をコピー＆ペーストして行を増やして編集してください。
もし表示が崩れたりして、一時的に外したいときは、フリースペースをサイドバーの配置から外すか、フリースペースのペーストしたソースコードを削除すればOKです。
手順4：カスタマイズする
CSSコードの黄色い部分を編集することで、背景の色、文字の色、仕切り線の形式や色、オンマウスしたときの背景の色を変更することができます。是非チャレンジしてみてください！
だけど、メニュータイトルの文字数が多いときは、設置できる数が少なくなっちゃいますね。私の場合はメニュー名を短縮して使っています。ご参考までにHTMLの一部ソースはこんな感じです。
<li><a href="http://ameblo.jp/jalan2-net/themeentrylist-10047047386.html"
title="ちょっと難しいカスタマイズ">ちょっと難しい</a></li>title属性をつけてごまかしております（笑）。Firefoxだとポップアップでテキストが表示されます。
ちょっとややこしいのでCSSの文字を黄色くしなかったんですが、メニューの文字サイズを調整するという手もあります。
CSSにfont-size: 110%;という部分があると思いますが、ここです。その場合は、文字の表示位置を調整する必要があります。
#gnav ul li a {
display: block;
float: left;
height: 28px; /* ←調整対象 */
margin: 0;
padding: 8px 20px 0 20px; /* ←8pxの部分が調整対象 */
たとえば、font-size: 100%;とすれば、メニューの文字がナビ内で上寄りに表示されるようになると思います。その場合は、8pxを10pxに変更するなどして好きな見栄えに調整してください。
そのとき一緒に、その上の「←調整対象」と書いている部分の調整もお忘れずに！
いま、28＋8＝36です。10pxにする場合は、合計36になるように26と変更してくださいませ。
今回のサンプルをそのまま実装したページを、記事執筆時点では見ていただくことができます。試験用に使っておりますので、いつまでご確認いただけるかはわかりませんが、こちらです 。