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

インターネットで参考になるサイトを探していたのですが、こちらのサイトが大変参考になりました。

【改良版】コピペ一発はてなブログにトグルメニューをつけるカスタムを広告の背景に色がつかないようにしました!(Yukihy Life)

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

ヘッダ画面

 

スポンサーリンク



コードの入力場所

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

コード入力場所

 

トグルメニューの追加

カスタマイズ後の画面

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

カスタマイズ後画面

変更した部分

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

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

 

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

ヘッダのデザインを変更

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

記述したコード

コードを解説

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

 

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

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

“【はてなブログ】スマホにトグルメニューを設置する” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です