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

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

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

変更した部分
メニューボタンをヘッダの上部に表示
btnAreaに指定する部分を、以下のとおり記述し、メニューボタンをヘッダの上部に表示するようにしました。
1 2 3 4 5 6 7 8 |
#btnArea { text-align: right; position: absolute; top: 0; width: 100%; z-index: 10; /* メニューボタンをヘッダの前面に表示 */ } |
後は、メニューボタンや、各メニューの背景色を変更・下線の追加などを行いました。
ヘッダのデザインを変更
トグルメニューを追加でき、いい感じのトップページになってきました。
この調子で、ヘッダの背景色等も変更しました。
記述したコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<style type="text/css"> /* ヘッダー上部の余白を削除 */ #container { padding-top:0px; } /* ヘッダーの設定 */ #header { width: 100%; /* 横幅を最大に設定 */ padding-top: 50px; /* タイトル上部にスペースをつくる */ padding-bottom: 15px; /* タイトル下部にスペースをつくる */ margin: 0px; /* ヘッダーまわりの余白を消す */ background: #87cefa; /* ヘッダーの背景色を設定 */ } /* ヘッダータイトル設定 */ #header #title a{ color: #111111; /* タイトルの文字色を設定 */ font-size: 24px; /* タイトルを大きく */ /* フォントを設定 */ font-family: '“Lucida Grande”', '“segoe UI”', '“ヒラギノ丸ゴ ProN W4”', '“Hiragino Maru Gothic ProN”', “メイリオ”, Meiryo, Verdana, Arial, sans-serif; } </style> |
コードを解説
トグルメニューをヘッダの上に持って行ったことで、ヘッダの上に余白ができてしまったので、3~5行目で削除を行いました。
また、8~14行目でヘッダ周りの余白等を調整し、18~23行目でタイトルのサイズ変更やフォントの指定を行いました。
グローバルメニューやトグルメニューがあると、一気に使いやすいサイトになりますよね。
以上、参考になれば幸いです。