ニワアソビ

北国で小さな庭作りを楽しんでいます。

はてなブログにグローバルナビゲーションを設置しました。

使い始めたばかりのはてなブログにグローバルナビゲーションを設置してみました。

グローバルナビゲーションとは、ブログタイトルの下(ヘッダー)にあるメニューバーのこと。

 

私のブログではまだTOPとしか書かれていませんが、今後メニューを増やしていきたいと思っています。

 

で、どうやったのかというと。

私と全く同じナビゲーションバーで良いという方は以下をコピーしてください。

  

<!-- グローバルナビゲーションここから -->
<nav id="global">
<ul>
<li><a href="menu1-url">menu1</a></li>

<li><a href="menu2-url">menu2</a></li>

<li><a href="menu3-url">menu3</a></li>

<li><a href="menu4-url">menu4</a></li>
</ul>
</nav>
<!-- グローバルナビゲーションここまで -->

 

 これをダッシュボード→デザイン→カスタマイズ→ヘッダと開き、タイトル下の部分に貼り付けます。

そして念のため一度変更を保存するをクリック。

 

次に以下をコピーして下さい。

<!-- グローバルナビゲーションここから -->
#top-editarea {
width: 100%;
text-shadow: inherit;
}
#global ul{
list-style: none;
width: 100%;
text-align: center;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #fff; 

}
#global ul li{
display: inline-block;
}
#global ul li a{
text-decoration: none;
display: block;
padding: 1em;
}
#content{
margin-top: 0;
background: #fff;
box-shadow: inherit;
}
<!-- グローバルナビゲーションここまで--> 

 

 これをダッシュボード→デザイン→カスタマイズ→デザインCSSと開き貼り付け。

そしてここでまた変更を保存です。

どうですか?できましたか?

 

今回はこちらを参考にさせていただきました。

rrt.hateblo.jp

lettuce0831さん、おかげで素敵なナビゲーションを設置することが出来ました。

本当にありがとうございます。

 

今後自分の備忘録としてカスタマイズのカテゴリーにカスタマイズの履歴を残していきたいと思います。

広告を非表示にする