はてなブログのスマホ版カスタマイズについて。画面下に固定バーをコピペで簡単にカスタマイズできる方法を紹介します。固定メニューは「ブックマーク、読者登録、おすすめ記事、カテゴリー、トップに戻る」の５つです。興味のある方は自由にコードをコピペして使ってください。
スマホカスタマイズ版フッターに固定メニューを設置する方法
久しぶりのカスタマイズ記事になります。ある程度カスタマイズ系はこのブログ内でも紹介しています。カスタマイズもむやみやたらにするのではなく自分のブログに合わせて、必要最低限している程度です。
今回、スマホデザインで画面下に固定メニューを設置する方法を改めて自分なりにカスタマイズしようと思います。
以前はtopに固定メニューを設置していました。これはこれで気に入っていました。
目立ちすぎず、読者も気にならないと思って設置していました。しかし、最近アクセス解析をしているとメニューからの検索が皆無であったことが判明しました。目出しすぎずというより、全く目立っていませんでした。もはや黒子状態でした。その結果今回改めて設置したのがコチラ
topよりも画面下「フッター」に設置したほうが読者に注目されやすいです。記事を読む上でもそんなに邪魔にはなりません。
参考にしたサイト
こちらのサイトを参考にしました。
はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム – Yukihy Life
はてなブログの人気ブロガー代名詞「ゆきひー」さんのカスタマイズを参考にさしていただきました。この人のカスタマイズから勉強することはたくさんあります。ブログでもなんでもそうですが、先人から学び、吸収できることはとことん吸収したいと思います。
改良点
今回のカスタマイズはスマホカスタマイズ専用になっています。レスポンシブデザインを設定している方は設定できないのでご了承ください。ゆきひーさんのカスタマイズでは固定メニュー「HOME,人気記事,ブックマーク記事,カテゴリー,topに戻る」の5を設置していましたが、僕の場合は少し改良して「ブックマークボタン、読者登録ボタン、好きな記事、カテゴリー、topに戻る」の5つに変更しています。
読者が記事の途中でいつでも「ブックマークと読者登録」のどちらかをストレスなくクリックできるように考えて設置してみました。ブックマークや読者登録を記事前後に設置するパターンをよく見かけますが、このようにいつでもフッターにクリックできるように設置しておくことでクリック率を高めると思います。
また、ゆきひーさんのカスタマイズでは人気記事を自動で表示できるように競ってしていました。僕のブログでは記事下にも同様の人気記事が表示しています。固定メニューにわざわざ表示する必要もないかと思い、別の方法を考えました。
僕の場合、好きな記事や読者に読んでほしい記事を４〜５記事選んで表示できるように設定することに決めました。このようにすることでブログ全体の滞在時間も長くなり、メリットだと考えたからです。
設置方法
設定手順は全く難しくないです。紹介するコードをコピペして貼り付けるだけであなたのブログにも同様の設定ができます。
コピペコード&設置場所
今回紹介するコードはスマートフォン→ヘッダ→タイトル下に以下のコードをコピペしてください。あらかじめ、メニューを設定している人は解除するようお願いします。コードをコピペしても上手く動作しないパターンとして考えられるのは、その他のメニュー「コードの重複」があるからです。
以下のコードをコピペする。
読者登録設定
25 行目で設定可能です。任意の場所にあなたのブログ名とブログURLを入力してください。正しく変更しないと僕のブログに読者登録となりますのでご注意ください。メニューに表示する「読者登録」を変更したければコード最後の名前を好みで変更してください。
おすすめ記事設定
6〜8行目に記事名と記事URLを入力してください。あなたの好きな記事や読んでほしい記事を表示するように設定できます。
81〜91行目で文字の大きさや背景色や文字色を変更できます。
26行目で固定メニューに表示する名前を自由に変更できます。初期設定は「おすすめ」となっています。
カテゴリー設定
13〜18行目にカテゴリー名とカテゴリーURLを入力してください。初期設定では2列で表示されるようになっていますので偶数のカテゴリー数が奇麗におさまります。
27行目で固定メニューに表示する名前を自由に変更できます。初期設定は「メニュー」となっています。
102〜112行目で文字の大きさや背景色や文字色を変更できます。
色の参考はコチラ
カラーコードの定番です。
その他カスタマイズ
その他にも固定メニューの順番を変えたり、メニューに少し装飾を加えるカスタマイズ紹介します。特に難しいことはありません。手順に従えばだれでも設定可能です。
固定メニューの順番を入れ替える
24 行目〜28行目が上から順に「ブックマーク、読者登録、おすすめ記事、カテゴリー、topに戻る」と設定されています。この順番を入れ替えることで固定メニューの位置を自由に変更することができます。
注意
おすすめ記事とカテゴリーを入れ替える場合はもう１つ作業が必要になります。6〜8行目（おすすめ記事名とURL）と13〜18行目（カテゴリー名とURL）も順番を入れ替えるようにしてください。どちらか一方のみですと、うまく機能しません。
固定メニューをカスタマイズ
114行目〜128行目を使って固定メニューを自由にカスタマイズできます。 現在は上下イにボーダーの線を加えています。不要な場合は125行目〜126行目を削除してください。また128行目を設置することで透明化さしています。こちらも不要な場合は削除してください。
カテゴリーやおすすめ記事を増やしたい
おすすめ記事の表示は３つに設定していますがもっと表示したい場合は以下のコードを使います。
記事名やURLを入力したら、6〜8行目や13〜18行目にコピペしてください。増やしたい数だけコピペしてください。
おわりに
今回のカスタマイズはフッターに便利な機能のボタンを設置するカスタマイズを紹介しました。久しぶりのカスタマイズ記事の投稿で、見苦しい部分もあると思いますが、許してください。しかし、これに変更してから読者登録がわずかに増えた気もします。あなたもよかったら試してみてください。
