【はてなブログカスタマイズ】メニューバーを設置しました
本はてなブログをカスタマイズ、
ヘッダにグローバルメニューを設置してみました。
はてなブログ グローバルメニュー設置
コードは以下の通りです。
[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; }
なお、こちらの実現にあたりましては、以下記事を参考にさせていただきました ^^
情報提供、心より感謝いたします。