はてなブログで『グローバルナビゲーション』の作り方。コピペで使用可能

2015-12-252018-09-01雑多な雑談

はてなブログでグローバルナビゲーションの作り方を説明します。

（もちろんほかのブログ、サイトでも使用可能です）

と、その前にグローバルナビゲーションとは、

このサイトの上にあるこれです。

ブロック状のメニューデザイン、ナビですね。これをヘッダー（上）に配置することで、カテゴリなどを分かりやすく誘導できると思います。

あっというまにコピペで作れてしまうので、気になった方は使ってみてください。

ヘッダーのhtml
デザインCSS

の両方を変更してはじめて成功するので、どちらもやってください。

最後に応用としてグローバルナビゲーションを2段にする

方法を載せています。それではヘッダーのhtmlからです。

ヘッダーのhtml
デザインCSS
グローバルナビゲーションを2段にする
おわりに

ヘッダーのhtml

デザインの編集画面で、ヘッダを開きましょう。タイトル下に以下のコードをコピペしてください。（私の使用しているものです）

<ul id="gNavi">
<li><a href="/">トップページ</a></li>
<li><a href="/archive/category/がんばる日記">がんばる日記</a></li>
<li><a href="/archive/category/ニュース">ニュース一般</a></li>
<li><a href="/archive/category/エンタメ">エンタメ系</a></li>
<li><a href="/archive/category/芸能・スポーツ">芸能・スポーツ</a></li>
<li><a href="/archive/category/二次元">二次元関連</a></li>
<li><a href="/archive/category/ブログの作り方">ブログデザイン</a></li>
</ul>

<ul id="gNavi">と</ul>の中に<li></li>を入れた数だけ、ブロック数が増えます。

<a href="/“>トップページ</a>の"/"には、リンク先のＵＲＬを入れます。

私のブログのＵＲＬはhttp://newnews.mtsukasa.com/ですが、この「　/　」以降を記入すれば大丈夫です。はてなブログの場合、カテゴリーに飛ばしたいのであれば

/archive/category/カテゴリ名

となるので赤字の部分を変えて使用してください。

<a href="/“>トップページ</a>の"トップページ"には、表示させたい名前を入れてください。

デザインCSS

まずはデザインCSSに

/* – ｸﾞﾛｰﾊﾞﾙﾅﾋﾞ- */
#gNavi {
margin:10px 0;
padding:0;
width:960px;
height:36px;
overflow:hidden;
background:#808080;
}
#gNavi li { list-style:none; width:136px; float:left; }
#gNavi li a {
display:block;
line-height:36px;
color:#ffffff;
text-align:center;
}
#gNavi li a:hover { background:#66c; }
li+ li {
border-left: 1px solid #a9a9a9;
}

これをコピペしてください。

width:960px;これは横の長さを表しています。

height:36px;これは縦の幅を表しています。

#gNavi li { list-style:none; width:136px; float:left; }これは１つのブロックの大きさを表します。

border-left: 1px solid #a9a9a9;これはブロックの区切りの幅を表しています。

赤い数字の部分を変えて、自分のブログに合わせてください。

＊重要なのは、ブロック数と全体の長さから一つのブロックの長さを計算することです。

私のブログでは、全体の長さが960、ブロックの数が7つ、区切りの幅が1なで6つあるので、次のように計算します。

(960-1*6)/7=136.2857142857143

全体の長さから区切りの長さを引いて、ブロック数で割ります。

それを小数点以下切り捨てれば、一つのブロックの長さの決定です。

あとはbackground:#808080;の色を好きな色に変えたりすれば、お好みのデザインになるかと思います。

グローバルナビゲーションを2段にする

上のサイトに使用しているヘッダーのhtmlを紹介します。

<ul id="gNavi">
<li><a href="/">最新記事一覧</a></li>
<li><a href="/archive/category/">就活の流れ</a></li>
<li><a href="/archive/category/">就活の準備</a></li>
<li><a href="/archive/category/">業界研究</a></li>
<li><a href="/archive/category/">企業研究</a></li>
<li><a href="/archive/category/">自己分析</a></li>
<li><a href="/archive/category/">ＥＳ</a></li>
</ul>
<ul id="gNavi">
<li><a href="/archive/category/">テスト対策</a></li>
<li><a href="/archive/category/">面接対策</a></li>
<li><a href="/archive/category/">インターン</a></li>
<li><a href="/archive/category/">OB･OG訪問</a></li>
<li><a href="/archive/category/">企業一覧</a></li>
<li><a href="/archive/category/内定後">内定後</a></li>
<li><a href="/archive/category/">就活サイト</a></li>
</ul>