読者です 読者をやめる 読者になる 読者になる

New Market Creation - 市場創造

株主優待と米国株がメインの投資家のブログです。株初心者の方にもに分かりやすく興味を持ってもらえるブログを目指しています。

はてなブログのスマホ画面にホーム、人気記事、カテゴリを表示するメニューバーを設置

検証

f:id:randompotato:20170407173355j:plain

 

ども、ランダムぽてとです。

はてなブログのスマホ画面にメニューバーを設置しました。

PCで普段私のブログを見ている方にはわからない変更なのですが、私のはてなブログをスマホで見た場合、画面にホームや人気エントリー、カテゴリを表示させるメニューバーが無かったため、出先で自分のブログをみてニマニマしたい時に不便さを感じていました。(うゎ、気持ち悪いな自分)

 

はてなブログのメニューバー設置方法

そこでスマホ画面のデザインをもう少しスマートなものにしたいなと思い、メニューバーの設置方法を探していたところ、ゆきひー氏のブログに辿り着きました。
コードの転載は禁止となっているため、参考にしたい方はブログを訪れて下さい。

www.yukihy.com

 

早速カスタマイズしてみたところ、殺風景だった私のブログの画面下にスマートなデザインのメニューバーを設置することが出来ました。

f:id:randompotato:20170407173716p:plain

 

メニューバーの設置方法ですが、はてなブログの管理画面よりデザイン > スマートフォン > ヘッダ > タイトル下の部分にソースコードを追加します。(貼り付ける前にバックアップは一応残しておきましょう)

f:id:randompotato:20170407173955p:plain

ボタンは4つと5つのタイプが公開されていました。
私は欲張って5つボタンにしました。5つの方には、はてブ順のボタンが追加されています。

 

メニューバー詳細

メニューバーには、

  1. ホームに戻るボタン
  2. 人気記事ボタン
  3. はてブ順ボタン
  4. カテゴリ一覧ボタン
  5. トップへ戻るボタン(画面上に移動)

が用意されていました。

例えば人気記事ボタンを押すと、上にトグルメニューが開いて、人気記事が表示されます。カスタマイズ前に比べて非常に見やすくなっています。

f:id:randompotato:20170407174039p:plain

 

件数変更や2列表示にも対応

デフォルトでは5件表示ですが、増やしたい場合には公開されているコードのdata-count部の5の数字を変更すれば表示件数が変更できます。

 

また、カテゴリ数が多いと、画面に入りきらなくなってしまう場合があります。1画面にスッキリ収めたい場合のために、2列に並べて表示させるコードも公開されています。カテゴリを画面内に収めることができ、すっきりさせることが出来ました。

f:id:randompotato:20170407174140p:plain

 

大変分かりやすく、参考になりました。
ゆきひーさん、ありがとうございました。

Copyright © 2014 ランダムぽてと All Rights Reserved.