チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

【はてなブログ】ブログ(PC版)のヘッダーにグローバルナビを設置する方法

 スポンサード リンク

f:id:chipsforest:20151206215914j:plain:w600

 今回ははてなブログのヘッダー(PC版)に上画像の様なグローバルナビを設置する方法を紹介します。

設置方法


<style>

#blog-title{
height:170px;
}

/*↓グローバルナビCSSここから*/
#sm_nav{
color: #ffffff;
width:900px;
text-align: center;
background-color: #3b63a6;
margin-bottom:15px;
margin-top:0px;
}
#sm_nav .category{
padding-right:30px;
padding-left:30px;
padding-top:5px;
line-height: 300%;
font-size: 90%;
}
#sm_nav a{
color: #ffffff;
text-decoration: none;
word-wrap: break-word;
}

/*↑グローバルナビCSSここまで*/
</style>

<!-- グローバルナビHTMLここから -->

<div id="sm_nav">

<span class="category"><a href="カテゴリ1のURL">カテゴリ1</a></span>

<span class="category"><a href="カテゴリ2のURL">カテゴリ2</a></span>

<span class="category"><a href="カテゴリ3のURL">カテゴリ3</a></span>

<span class="category"><a href="カテゴリ4のURL">カテゴリ4</a></span>

</div>

<!-- グローバルナビHTMLここまで -->

※「カテゴリ〇のURL」「カテゴリ〇」はご自身のブログのカテゴリに書き換えてください。


 上記コードを「デザイン」→「ヘッダ」にコピペするだけでOK。

 CSS部分(<style>~</style>)は「デザインCSS」の中でも大丈夫だと思います。

解説

ヘッダーとグローバルナビの余白調節


#blog-title{
height:170px;
}

 ↑これはヘッダーの高さを指定するものです。


f:id:chipsforest:20151206215851j:plain:w600

 ↑ヘッダーの高さは赤矢印の部分。

 数値を変更することで空白部分(黄色の矢印部分)を調整できます。

 数値を小さくしすぎるとグローバルナビがヘッダー画像に埋まってしまうので注意。

グローバルナビのスタイル部分

「/*↓グローバルナビCSSここから*/~/*↑グローバルナビCSSここまで*/」の部分がグローバルナビのスタイル部分です。

 幅、色、文字サイズ等はお好みで変更するといいんじゃないかと思います。

グローバルナビのHTML部分

「<!-- グローバルナビHTMLここから -->~<!-- グローバルナビHTMLここまで -->」の部分はグローバルナビのHTML部分です。

 今回はカテゴリ4個分に設定しましたが、


<span class="category"><a href="カテゴリ〇のURL">カテゴリ〇</a></span>

 上記コードを減らしたり増やしたりすることでカテゴリ数を変更できます。

スマホ版に関して

 今回のやり方を応用すればスマホ版のグローバルナビの設置も難しくないと思います。

 ただ、スマホ用ページは幅が狭く、カテゴリ数が多いとゴチャゴチャしてしまうので、

f:id:chipsforest:20151206222106j:plain:w300f:id:chipsforest:20151206222113j:plain:w300

 ↑こんな感じのプルダウンっぽいナビにした方が見やすいのかなと思います。

  設置方法は上の記事に載せたので、参考にしていただけると幸いです。

PAGE TOP