簡単！はてなブログにグローバルメニューを設置する方法
こんにちは。hanaです。
今日はブログど素人、メカ音痴の私でも出来たシンプルなグローバルメニューの設置の方法の覚書です。今回も分かる人にはあたりまえ〜あたりまえ〜♪の内容ですが、グローバルメニューを設置しようとしたけれど断念してしまった方々の参考になればと思います。
私のカスタマイズした方法で書いていますが、もし変更後にうまく作動しなくても責任はとれませんので、自己責任でお願いします！
必ず変更前のコードなどをコピーしておいてくださいね。
グローバルメニューとは
グローバルメニューとは当ブログ(PC版で見てください)で言うとブログ「ズボラ主婦の覚書」のタイトル下(ヘッダー)にあるTOP,子育て、お役立ち情報…とカテゴリーが並んでいるバーのことです。このカテゴリをクリックするとそれぞれのカテゴリーのページに飛びます。グローバルメニューがあるとブログが見やすくなります。
グローバルメニューで読者の興味のあるジャンルの記事を探しやすくしよう
私のブログは育児や家事が主ですが何か１つに絞った専門のブログではないので、ブログの記事の内容は様々です。トップは更新順の一覧なので、いろいろなジャンルが混在しています。グローバルメニューでカテゴリー別に分けると特定のジャンルに興味のある読者はそのジャンルを読むことができるので、ブログが見やすくなります。
グローバルメニューはグーグルアドセンス審査に有利
グローバルメニューの設置をしておくとグーグルアドセンスの審査に有利になります。グーグルアドセンスの審査に関しては色々な情報であふれていますが、このグローバルメニューに関してはグーグル自体が審査のためにあった方がいいものとしてあげています。
詳しくはこちらから
サイトのページが AdSense のご利用条件を満たしているか確認する - AdSense ヘルプ
上記のサイトより抜粋
お申し込み時の条件
サイトのページが AdSense のご利用条件を満たしているか確認する（途中省略)
操作が簡単でわかりやすくなっているか
ナビゲーション バーやメニューバーは特に重要な要素です。サイトの利便性を高め、ユーザーにじっくりコンテンツを楽しんでもらうためには、見つけやすく使いやすいナビゲーション バーを用意することが大事です。(以下省略)
とあります。
私もGoogleアドセンスの審査に申し込む前に一度グローバルメニューの設置をしようと思ったのですが、できなくて結局そのまま申請、放置していました。
Googleアドセンスからもまだ合否の通知が来ていないのでもうひとあがきしようと昨日グローバルメニューを設置してみました。
グローバルメニューの設置の仕方
今回参考にさせていただいたサイトはこちら
はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ - Yukihy Life
当ブログの現在のデザインテーマは以前から使用しているはてな公式テーマのReportです。ReportはPC版ではサイドバーがあるデザインなので見やすいです。テーマストアにはおしゃれなデザインテーマがたくさんありますが、何せズボラなもんで変えるの面倒だしこのまま使用します。シンプルで見やすいしね！
- デザインテーマを変更するなら
管理画面→デザイン→デザインテーマ→公式テーマ→Report→変更を保存するを押す
ではグローバルメニューを作っていきます！上記のサイト通りに操作して下さいね！私のようなど素人用に補足を入れます。
- カスタマイズ、コード1のHTMLのコードをコピーし指定の場所に貼り付けます。
- 4行目から自分のブログ用にに書き換えていきます
例）4行目<li><a href='url'>TOP</a></li>
urlのところに飛ばしたいページのurlを入力します(urlの文字は消して、飛ばしたいページのurlをコピーしurlの文字があった場所に張り付ける)。
飛ばしたいところがTOP画面であれば、TOP画面のurlを張り付けます。TOPの表記のままでよければそのままで、もしトップにするならTOPの文字を消してトップに変更。
5行目<li><a href='url'>カテゴリ１</a></li>
4行目と同じようにurlとカテゴリ1の部分を自分のブログ用に書き換えます。
私の場合はカテゴリ1の部分は子育てと書き換えました。
カテゴリが3つしか必要ない方は、8行目カテゴリ４の行は削除して下さい。
カテゴリが5つ以上必要な方は8行目と9行目の間に
<li><a href='url'>カテゴリ５</a></li>
<li><a href='url'>カテゴリ６</a></li>
と挿入してください。
- カスタマイズ、コード2を先ほど操作した画面の下のほう「デザインCSS」にコピペするのですが、公式デザインのReportにはすでに以下のコードが入力されていたので
/* <system section="theme" selected="report"> */
@import "/css/theme/report/report.css";
/* </system> */
#menu {以下省略
この#menu {以下の部分を削除しコード2を貼り付けるとうまくいきました。
上記のコードを残さずに全てを書き換えるとサイドバーの表示が消えてしまったので気を付けて下さい。
Report以外はやったことがないのでわかりません。すみません。
プレビューを見てうまく作動していたら変更を保存するを押してできあがり。お疲れ様でした。
スマホ版にトグルを設置する方法
こちらは上記の作業をした後であれば補足なしで分かると思うので参考サイトのみ掲載します。分かりやすく、すぐにできましたよ！
コピペ１発+αではてなブログスマホ画面にトグルメニューをつけるカスタマイズ - Yukihy Life
HTTPS配信の方はトグルメニューのコードの変更が必要なのでこちらの記事も必ずチェックしてください！
私もやっと設置できてほっとしています。みなさんもぜひ参考にグローバルメニューを設置してみてください。
アフィリエイト始めませんか？
前回の記事はこちら↓
今日も読んでくれてありがとう！
