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

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

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

Contents

コードの入力場所
トグルメニューの追加
- カスタマイズ後の画面
- 変更した部分
  - メニューボタンをヘッダの上部に表示
ヘッダのデザインを変更
- 記述したコード
  - コードを解説

コードの入力場所

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

トグルメニューの追加

カスタマイズ後の画面

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

変更した部分

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

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

#btnArea
{
  text-align: right;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10; /* メニューボタンをヘッダの前面に表示 */
}

#btnArea

{

text-align: right;

position: absolute;

top: 0;

width: 100%;

z-index: 10; /* メニューボタンをヘッダの前面に表示 */

}

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

ヘッダのデザインを変更

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

記述したコード

<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>

/* ヘッダー上部の余白を削除 */

#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行目でタイトルのサイズ変更やフォントの指定を行いました。

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

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

カスタマイズ