グローバルメニューってなんだ？
ここからは「完全に先人様頼り」になってきます。
超初心者のわたくしには自力では手も足も出せません。
.グローバルメニューって？
グローバルメニュー・・ブログページのタイトル下にカテゴリーをバー状に表示させてメニュー化しているものの事だそうだ。先人様達の素晴らしいページには確かにメニューバーが表示されていますね。（かっこいいー）
このグローバルメニューなるものを私のブログにも導入しようと思います。
さて、どうしたらいいのか先人様から学びましょう。
はてなブログにグローバルメニューを作る。
１．「ダッシュボード」「デザイン」「カスタマイズ」「ヘッダー」「タイトル下」の部分にメニュー用HTMLのコードを記入。
コードは色々な先人様が親切に公開してくださっているので、気に入ったものを自分のサイト用に一部変更してコピペさせて頂きます。
２．「ダッシュボード」「デザイン」「カスタマイズ」「デザインCSS」の所にメニュー用のCSSコードを記入。
CSSも同様に先人様のサンプルをお借り（コピペ）してみましょう。
これでグローバルメニューが表示されるそうだ。？？？ ズブの素人の私から見れば、ヘーっ、そーなのかー！って感じです。
さっそく任意の先人様のコードを頂戴しコピペしてみました。
失敗は成功のもと？
ほえ！？ うまくいかねー・・・。原因を調べること数時間。原因はページ全体のテーマによってはCSSコードの内容を変更しなければいけないとの事。
まったくの素人の私はCSSコード内の数値を順番にいじって何が変化するか確かめつつ自分のテーマ内でなんとか適切な位置に表示されるように調整しました。
その結果が本ブログのメニューになってます。
試しに全体テーマを変更すると一気に配置バランスが崩れます。なるほどですな。
参考に使用させて頂いたものです。
ーー デザインCSS追記分（先人様感謝です）ーーーーー
/* グローバルナビゲーション */
.nav {
width: 100%; /* 幅を指定 */
padding: 0 0; /* 余白を指定 */
margin-left: -0px;
margin-top: -20px;
}
.nav ul{
padding: 0;
overflow:hidden; /* 高さを出すために指定 */
list-style-type: none; /* リストスタイルを指定 */
background:#4169E1; /* 背景色を指定 */
margin-bottom:100px; /* 枠の下周囲の余白を指定 */
text-align: center; /* 文字を真ん中に表示 */
height: 40px; /* 高さを指定 */
}
.nav li{
float:left; /* 左に詰めて表示をする */
text-align: center;
width:15%; /* 幅を指定 */
margin: 0;
}
.nav li a{
display: block; /* ブロック表示にする */
margin: 0;
line-height:45px; /* 高さを指定 */
color: #FFFFF0; /* 文字色の指定 */
font-size: 17px; /* 文字の大きさを指定 */
text-decoration: none; /* アンダーラインを消す */
}
.nav a:hover{
color: #FFFFF0; /* マウスオーバー時の文字色を指定 */
background:#9370DB; /* マウスオーバー時の背景色を指定 */
}
h2 {
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
}
こんな感じのを入れてみました。
まだまだページのカスタマイズ余地ありますが、なにしろ手探り状態でやっております。先人様の記事参考にボチボチやってみましょう。
本記事読んで下さった方、ありがとうございます。
