ども、ランダムぽてとです。
はてなブログのスマホ画面にメニューバーを設置しました。
PCで普段私のブログを見ている方にはわからない変更なのですが、私のはてなブログをスマホで見た場合、画面にホームや人気エントリー、カテゴリを表示させるメニューバーが無かったため、出先で自分のブログをみてニマニマしたい時に不便さを感じていました。(うゎ、気持ち悪いな自分)
はてなブログのメニューバー設置方法
そこでスマホ画面のデザインをもう少しスマートなものにしたいなと思い、メニューバーの設置方法を探していたところ、ゆきひー氏のブログに辿り着きました。
コードの転載は禁止となっているため、参考にしたい方はブログを訪れて下さい。
早速カスタマイズしてみたところ、殺風景だった私のブログの画面下にスマートなデザインのメニューバーを設置することが出来ました。
メニューバーの設置方法ですが、はてなブログの管理画面よりデザイン > スマートフォン > ヘッダ > タイトル下の部分にソースコードを追加します。(貼り付ける前にバックアップは一応残しておきましょう)
ボタンは4つと5つのタイプが公開されていました。
私は欲張って5つボタンにしました。5つの方には、はてブ順のボタンが追加されています。
メニューバー詳細
メニューバーには、
- ホームに戻るボタン
- 人気記事ボタン
- はてブ順ボタン
- カテゴリ一覧ボタン
- トップへ戻るボタン(画面上に移動)
が用意されていました。
例えば人気記事ボタンを押すと、上にトグルメニューが開いて、人気記事が表示されます。カスタマイズ前に比べて非常に見やすくなっています。
件数変更や2列表示にも対応
デフォルトでは5件表示ですが、増やしたい場合には公開されているコードのdata-count部の5の数字を変更すれば表示件数が変更できます。
また、カテゴリ数が多いと、画面に入りきらなくなってしまう場合があります。1画面にスッキリ収めたい場合のために、2列に並べて表示させるコードも公開されています。カテゴリを画面内に収めることができ、すっきりさせることが出来ました。
大変分かりやすく、参考になりました。
ゆきひーさん、ありがとうございました。
