2019.05.07はてなブログのスマートフォンデザインにトグルメニューを設置してみました。全ページに共通して表示されるので、サイト内の回遊率を高めたいというのが狙いでした。Googleアドセンスの申請に当たり、お問い合わせフォーム・プライバシーポリシーのページを作成したのですが、トグルメニュー内に設置しておけば、すっきりして見やすいかなと思いました。(お問い合わせフォームとかポリシーって、読者さんはそんなに見ないものだと思いますし。)まずは、比較のため、カスタマイズ前の画面を掲載します。管理画面から、「デザイン」ー「スマートフォン」と画面遷移し、「ヘッダ」の「タイトル下」にコードを記述していきます。入力欄が表示されていない場合は、「スマートフォン用にHTMLを設定する」にチェックを入れます。Lifeさんのサイトに掲載されているコードを使わせていただき、一部デザインを修正してみました。カスタマイズ後の画面イメージは以下のとおりです。変更した部分メニューボタンをヘッダの上部に表示btnAreaに指定する部分を、以下のとおり記述し、メニューボタンをヘッダの上部に表示するようにしました。*/}後は、メニューボタンや、各メニューの背景色を変更・下線の追加などを行いました。ヘッダのデザインを変更トグルメニューを追加でき、いい感じのトップページになってきました。この調子で、ヘッダの背景色等も変更しました。sans-serif;}</style>コードを解説トグルメニューをヘッダの上に持って行ったことで、ヘッダの上に余白ができてしまったので、3~5行目で削除を行いました。8~14行目でヘッダ周りの余白等を調整し、18~23行目でタイトルのサイズ変更やフォントの指定を行いました。グローバルメニューやトグルメニューがあると、一気に使いやすいサイトになりますよね。以上、参考になれば幸いです。育児・マイホームアイテムレビューブロガーだちたまこんにちは!「だちたま」です。2人(4才・0才)の4人家族。元エンジニアの夫に教えてもらいながら、WordPressのカスタマイズ・プログラミングについてお勉強中。