今回は、はてなブログのスマホ画面に「ホーム」「人気記事」「カテゴリ」「トップへ戻る」を表示する「複合メニューバー」を導入する方法についてまとめてみます。
カスタマイズ環境
使用テーマ | Brooklyn |
---|---|
はてなブログ | はてなブログPro |
上記は、私のカスタマイズ環境です。
今回のカスタマイズは(私は試していませんが)「Brooklyn」以外のテーマでも導入できると思います。
私が導入したカスタマイズ方法ははてなブログPROでの方法ですが、コチラの方法で、無料版のはてなブログでも(私は試していませんが)導入することができるようです。
スマホ画面に「複合メニューバー」を導入する
実は、このスマホ用「複合メニューバー」を導入したのは、つい最近です。(パソコン版のグローバルメニューカスタマイズと同じく、はじめはメニューができる程、記事がなかったので必要なかったのです。)
スマホ画面に「複合メニューバー」を導入する方法については、ゆきひー (id:ftmaccho)さんの以下のサイトを参考にさせていただきました。
はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム - Yukihy Life
このカスタマイズを導入すると、スマホ画面下に 「HOME」「人気記事」「はてブ順」「カテゴリ」「TOP」のボタンの付いた「複合メニューバー」を表示することができます。
各ボタンの機能は次の通りです。
「HOME」・・・ブログトップページを標示する
「人気記事」・・人気のある記事を表示する(デフォルト5個・変更可能)
「はてブ順」・・「ブックマーク」の多い記事を標示する(デフォルト5個)
「カテゴリ」・・指定した「カテゴリー」を標示する
「TOP」・・・・閲覧中ページの一番上までスクロールして戻る
記事では「はてブ順」ボタンのある5つボタンバージョンと、「はてブ順」ボタンのない4つボタンバージョンが紹介されています。
ここからは、私が行った導入手順を順番に整理してみます。私は「はてブ順」ボタンのない4つボタンバージョンを導入することにしました。
(1)「カテゴリー」に入れる項目の整理
「複合メニューバー」導入のカスタマイズでは、カテゴリーのデフォルトは6つに設定されています。この表示数には特に制限なく、増やすことも減らすことも可能です。(ただし、あまり多く表示しようとすると、画面からはみ出てしまいますが)
また「カテゴリー」は2列に表示することもできるようです。その場合は「カテゴリー」の数を偶数にしないと、空きができてしまいカッコ悪くなってしまいます。
それらを踏まえ、以下の8つの「カテゴリー」を表示することにしました。
「考え方・習慣」「社会」
「お金のこと」「ブログ運営」
「親子関係」「何気ない日々」
「オーブン料理」「プライバシーポリシー」
「カテゴリー」が7つしかなかったため1か所は「プライバシーポリシー」ページへのリンクを設置することにしました。(私の場合「about」ページにプライバシーポリシーを記載しているため、正確には「about」ページへのリンクです。)
(2)コードを修正する
先程の記事に記載されている「4つのボタンの場合」のカスタマイズコードを修正します。
私が修正したのは次の3か所です。
(a)「homeボタンのURL」に自分のホームページのURLを入力する
(b)「カテゴリ部分」を2列に表示するコードを上書きする
(c)「カテゴリ」に表示するカテゴリー「URL」と「カテゴリー名」を入力する
私の場合は、次のようなコードになりました。
赤字の部分が自分のホームページのURLに書き換えた箇所です。
「カテゴリ」数は6⇒8に増やしています。増やす方法は次のように増やす分だけ行を追加するだけです。
(3)コードを貼り付ける
修正したグローバルメニューのコードを以下に貼り付けます。
ダッシュボードの「 デザイン」>「スマートフォン」>「ヘッダ」>「タイトル下」
以上でスマホ画面への「複合メニューバー」導入は完了です。
導入後の画面はこんな感じです。
〈「人気記事」を表示〉
〈「カテゴリ」を表示〉
このスクリーンショットはiPhone6 Plusのものですが、画面の小さなiPhone5でもちゃんと表示されていたので、これくらいの文字数なら概ね大丈夫なような気がします。
スマホ画面に「複合メニューバー」を導入する方法は以上です。
このカスタマイズでは、他にも 「人気記事」に「はてブ数」を表示したり、「メニュー部分」「カテゴリ」の「背景」や「文字の色」を変更することもできるようです。
カスタマイズ方法などの詳しいことは「はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム - Yukihy Life」のページでご確認いただければと思います。
次回は、デザインテーマ「Brooklyn」でSNSシェアボタンのカスタマイズする方法についてまとめてみます。