思考は現実化するスマートフォン用の表示で見る思考は現実化する自分の潜在意識を書き換えるために、自分が学んだ事を整理しまとめています。ブログカスタマイズ今回は、はてなブログのスマホ画面に「ホーム」「人気記事」「カテゴリ」「トップへ戻る」を表示する「複合メニューバー」を導入する方法についてまとめてみます。使用テーマBrooklynはてなブログはてなブログPro上記は、私のカスタマイズ環境です。今回のカスタマイズは(私は試していませんが)「Brooklyn」以外のテーマでも導入できると思います。私が導入したカスタマイズ方法ははてなブログPROでの方法ですが、コチラの方法で、無料版のはてなブログでも(私は試していませんが)導入することができるようです。スマホ画面に「複合メニューバー」を導入する実は、このスマホ用「複合メニューバー」を導入したのは、つい最近です。(パソコン版のグローバルメニューカスタマイズと同じく、はじめはメニューができる程、記事がなかったので必要なかったのです。(id:ftmaccho)さんの以下のサイトを参考にさせていただきました。「HOME」「人気記事」「はてブ順」「カテゴリ」「TOP」のボタンの付いた「複合メニューバー」を表示することができます。各ボタンの機能は次の通りです。ある記事を表示する(デフォルト5個・変更可能)「はてブ順」・・「ブックマーク」の多い記事を標示する(デフォルト5個)「カテゴリ」・・指定した「カテゴリー」を標示する「TOP」・・・・閲覧中ページの一番上までスクロールして戻る記事では「はてブ順」ボタンのある5つボタンバージョンと、「はてブ順」ボタンのない4つボタンバージョンが紹介されています。ここからは、私が行った導入手順を順番に整理してみます。私は「はてブ順」ボタンのない4つボタンバージョンを導入することにしました。「複合メニューバー」導入のカスタマイズでは、カテゴリーのデフォルトは6つに設定されています。この表示数には特に制限なく、増やすことも減らすことも可能です。(ただし、あまり多く表示しようとすると、画面からはみ出てしまいますが)また「カテゴリー」は2列に表示することもできるようです。その場合は「カテゴリー」の数を偶数にしないと、空きができてしまいカッコ悪くなってしまいます。それらを踏まえ、以下の8つの「カテゴリー」を表示することにしました。「カテゴリー」が7つしかなかったため1か所は「プライバシーポリシー」ページへのリンクを設置することにしました。(私の場合「about」ページにプライバシーポリシーを記載しているため、正確には「about」ページへのリンクです。)(2)コードを修正する先程の記事に記載されている「4つのボタンの場合」のカスタマイズコードを修正します。私が修正したのは次の3か所です。(a)「homeボタンのURL」に自分のホームページのURLを入力する(b)「カテゴリ部分」を2列に表示するコードを上書きする(c)「カテゴリ」に表示するカテゴリー「URL」と「カテゴリー名」を入力する私の場合は、次のようなコードになりました。});});</script>赤字の部分が自分のホームページのURLに書き換えた箇所です。「カテゴリ」数は6⇒8に増やしています。増やす方法は次のように増やす分だけ行を追加するだけです。href='url'>カテゴリ8</a></li>(3)コードを貼り付ける修正したグローバルメニューのコードを以下に貼り付けます。以上でスマホ画面への「複合メニューバー」導入は完了です。導入後の画面はこんな感じです。Plusのものですが、画面の小さなiPhone5でもちゃんと表示されていたので、これくらいの文字数なら概ね大丈夫なような気がします。スマホ画面に「複合メニューバー」を導入する方法は以上です。「人気記事」に「はてブ数」を表示したり、「メニュー部分」「カテゴリ」の「背景」や「文字の色」を変更することもできるようです。Life」のページでご確認いただければと思います。次回は、デザインテーマ「Brooklyn」でSNSシェアボタンのカスタマイズする方法についてまとめてみます。はてなブログPro自分の潜在意識を書き換えるために、自分が学んだ事を整理しまとめています。(29)月別アーカイブ検索リンクはてなブログはてなブログ開発ブログABOUT自分の潜在意識を書き換えるために、自分が学んだ事を整理しまとめています。思考は現実化するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。