【はてなブログカスタマイズ】メニューバーを設置しました

f:id:sntkk3:20180204193450p:plain

本はてなブログをカスタマイズ、
ヘッダにグローバルメニューを設置してみました。

はてなブロググローバルメニュー設置

コードは以下の通りです。

[html]
以下HTMLを管理画面「デザイン」>「カスタマイズ」>「ヘッダ」の「タイトル下」に入力します。

<!-- ナビゲーションバー -->
<div id="menubar">
 <ul>
 <li><a href="http://times-diary.hatenablog.com/" title="ホーム" >ホーム</a></li>
 <li><a href="http://times-diary.hatenablog.com/" class="has-child" title="Web制作">Web制作</a></li>
 <li><a href="http://times-diary.hatenablog.com/my_notes" class="has-child"  title="リンク集">リンク集</a></li>
 <li><a href="http://times-diary.hatenablog.com/contact_form" title="お問い合わせ">お問い合わせ</a></li>
 </ul>
</div>

[css]
以下CSSを管理画面「デザイン」>「カスタマイズ」の「デザインCSS」に入力します。

 <!-- メニューバー -->
#manubar{
 width:100%; }
#menubar ul{
 display:table;
 width:100%;
 margin: 0; 
 padding: 0;
 background-color: #FFFFFF; }
#menubar li{
 display: table-cell;
 width:20%;
 padding:0;
 background-color: #63b7e0; }
#menubar li a{
 display: block;
 margin:0 auto;
 padding:5px;
 border: 1px solid #FFFFFF;
 text-decoration: none;
 color: #FFFFFF;
 text-align: center;
 font-size: 18px; }
#menubar li a:hover{
 background-color: #007bc1; }
 
 #blog-title {
   padding-bottom: 10px;
 }