はてなブログ

【はてなブログ】スマホにトグルメニューを設置する

アイキャッチ画像

はてなブログのスマートフォンデザインにトグルメニューを設置してみました。
全ページに共通して表示されるので、サイト内の回遊率を高めたいというのが狙いでした。
また、Googleアドセンスの申請に当たり、お問い合わせフォーム・プライバシーポリシーのページを作成したのですが、トグルメニュー内に設置しておけば、すっきりして見やすいかなと思いました。(お問い合わせフォームとかポリシーって、読者さんはそんなに見ないものだと思いますし。)

まずは、比較のため、カスタマイズ前の画面を掲載します。

ヘッダ画面

 

コードの入力場所

管理画面から、「デザイン」ー「スマートフォン」と画面遷移し、「ヘッダ」の「タイトル下」にコードを記述していきます。
入力欄が表示されていない場合は、「スマートフォン用にHTMLを設定する」にチェックを入れます。

コード入力場所

 

トグルメニューの追加

カスタマイズ後の画面

ベースとしてYukihy Lifeさんのサイトに掲載されているコードを使わせていただき、一部デザインを修正してみました。
カスタマイズ後の画面イメージは以下のとおりです。

カスタマイズ後画面

変更した部分

メニューボタンをヘッダの上部に表示

btnAreaに指定する部分を、以下のとおり記述し、メニューボタンをヘッダの上部に表示するようにしました。

 

後は、メニューボタンや、各メニューの背景色を変更・下線の追加などを行いました。

ヘッダのデザインを変更

トグルメニューを追加でき、いい感じのトップページになってきました。
この調子で、ヘッダの背景色等も変更しました。

記述したコード

コードを解説

トグルメニューをヘッダの上に持って行ったことで、ヘッダの上に余白ができてしまったので、3~5行目で削除を行いました。
また、8~14行目でヘッダ周りの余白等を調整し、18~23行目でタイトルのサイズ変更やフォントの指定を行いました。

 

グローバルメニューやトグルメニューがあると、一気に使いやすいサイトになりますよね。

以上、参考になれば幸いです。