はてなブログのスマホ版にメニューバーを付けました
2016/8/14更新
スマホ版にメニューバーを付けました。はてな公式にはメニューバーをつける機能がなかったので、以下の記事を参考に実装してみました。
はてなブログのスマホ表示にグローバルナビゲーションを設置する - AIUEO Lab2
サンプルコード
以下に、サンプルコードを載せます。
設定方法は、ダッシュボードの「デザイン」⇒「スマホ」⇒「タイトル下」のhtmlに以下のコードを貼り付けてください。
この設定は、はてなブログPro会員でないとできません。
<style type="text/css"> // メニューバーのテーブルスタイル .g_nav ul { width: 100%; display: table; table-layout: fixed; -webkit-padding-start: 0px; } // メニューバーの項目スタイル .g_nav li { padding: 1px; display: table-cell; background-color: red; text-align: center; font-size: 80%; font-weight: bold; } // メニューバーの最終項目のみ右枠線削除するスタイル .g_nav li:not(:last-child){ border-right:1px solid #ffffff; } // メニューバーの項目のリンク色スタイル .g_nav a { color:#ffffff; } </style> <nav class="g_nav"> <ul> <!-- 「a href="ここにカテゴリのURLを記述してください。"」 --> <!-- 「<a href="">ここにカテゴリ名を記述してください。</a>」 --> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </nav>