カスタマイズ日和

はてなブログをカスタマイズした記録をまとめていきます。ミジンコのようにちまちまとカスタマイズ中。

【はてなブログ】ナビゲーションボタンを設置するには

ほしかったナビゲーションボタン。

f:id:darie1228:20160226001911p:plain

けっこう簡単に設置することができますので、まとめておきます。

 

やり方は、

デザイン→スパナアイコン→ヘッダ→タイトル下 に以下のコードをコピペ。

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

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

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

<div id="sm_nav">

<span class="category"><a href="http://darie-daphnia.hatenablog.com/archive/category/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">カスタマイズ</a></span>

<span class="category"><a href="http://terakoya-seibutsu.hatenablog.com/archive/category/%E7%94%9F%E7%89%A9">全体</a></span>

</div>

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

#sm_nav{ 下のcolorはナビゲーションボタンの線の色を、background-colorは背景色(ここでは透明にするために指定していません)を表しています。

ナビゲーションボタンの位置は、width(全体の幅)を変えることで調整できます。

#sm_nav a{ 下のcolorは文字色を表しています。

 

そして何より大切なのは、赤字で示した箇所を「カテゴリーページのURL」「カテゴリ名(カスタマイズなど)」に変更することです。

<span class…> ~ </span>までをさらにコピペすれば、新たにカテゴリを追加することもできます。

*カテゴリを新たに作成したら、こちらも併せて追加するようにしてください。

 

ナビゲーションボタンの設置については、色々なところで紹介されていますが、私はこちらのサイトを参考にさせていただきました。

chipspd.hatenadiary.jp

 

スマホページにはまた違ったやり方で設置しないといけないため、スマホに関しては時間のあるときにまた書こうと思います!

ここまで読んでいただき、ありがとうございました!