サボりは1日にしてならず。

MENU

はてなブログにグローバルメニューを設定する方法【ブログデザイン】

f:id:keykuuun:20211012174937j:image

はてなブログをよりグレードアップさせる方法第二弾として、今回はグローバルメニューの設定方法を解説する。第一弾は下記。

 

 

 

【おさらい】Google AdSenseの審査基準と合格するために俺が取り組んだこと

  • 優良なコンテンツであること
  • プライバシーポリシー、問い合わせフォームがあること
  • ページデザインが見やすい、使いやすいこと
  • 画像が適切に差し込まれた見やすいページであること
  • Googleのサービスを連携すること(Google analyticsGoogle search console)
  • PVは審査に一切関係がない

 

以上が俺が体感したGoogle AdSenseの審査通過基準なんだけど,このひとつひとつを追加、修正したのみで審査には通過した。

 

2度審査を通過ができなかった俺はたったこれだけのことに取り組んでGoogle AdSenseの審査に通過することができたから、みんなも審査通過次第はできる。はてなブログ無料版でも。

 

グローバルメニューはユーザーにとってサイトを使いやすくするツール

グローバルメニューはサイト内のコンテンツにどのようなものがあるのかを一覧表示するものだから、ユーザーにとってページを使いやすくなるのが特徴。どんなサイトもそうなんだけど、自分の興味あるコンテンツとか情報にアクセスしやすい方がいい。

 

俺の場合、投稿しているカテゴリーを表示する設定にしている。

 

f:id:keykuuun:20220304193625j:image

 

PCで閲覧した場合にはタイトル下に、スマホでは閲覧した場合は画面右端にハンバーガーメニューと言われるメニューを表示するように設定することが可能。

 

これを設定するだけでブログを見やすくできるだけじゃなく、サイトそのものの滞在率や回遊率、PVも上げることができる。

 

はてなブログのデザインには元からグローバルメニューが設定されているものもあるんだけど、今回紹介する方法を使えばどんなブログデザインでもグローバルメニューの設定をすることが可能になる。

 

グローバルメニューの設定方法【下準備編】

グローバルメニューを設定するために取り組むことはたった2つ。

 

  1. htmlコードをコピーする
  2. コードの一部を書き換える

 

①htmlコードをコピーする

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='url'>TOP</a></li>
<li><a href='url'>カテゴリ1</a></li>
<li><a href='url'>カテゴリ2</a></li>
<li><a href='url'>カテゴリ3</a></li>
<li><a href='url'>カテゴリ4</a></li>
</div>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>

 

上記のhtmlコードをコピーして、メモ帳やワードの編集ソフトにペースト。この際1度保存をしておくことをお勧めする。

 

②htmlコードを書き換える

先ほどのコピーしたコードを書き換える。主に書き換える箇所は2箇所。

 

  • URLを自分のリンクしたいページに書き換える
  • 「カテゴリ」を自分のリンクしたいページを表す言葉に書き換える

 

先ほどのコードの4行目から

<li><a href='url'>TOP</a></li>

<li><a href='url'>カテゴリ1</a></li>
<li><a href='url'>カテゴリ2</a></li>
<li><a href='url'>カテゴリ3</a></li>
<li><a href='url'>カテゴリ4</a></li>

という文字列があるんだけど、この文字列の色が変わっている部分を書き換えていく。

 

カテゴリ」を自分の好きなカテゴリー名に書き換える

さっきのhtmlコードで青字でカテゴリと書いてあるところから書き換えていく。

 

これはそれぞれはてなブログで記事を投稿する際に設定しているカテゴリー名に変えておけば問題ない。この時設定した言葉がグローバルメニューに表示される。

 

<li><a href='url'>TOP</a></li>

<li><a href='url'>お役立ち情報</a></li>
<li><a href='url'>日記</a></li>
<li><a href='url'>音楽</a></li>
<li><a href='url'>食べ物</a></li>

 

上のコードのように日本語で自分が記事投稿をするときによく設定しているカテゴリーの名前を入れたらOK。

 

<li><a href='url'>カテゴリ</a></li>

 

この文字列を追加することでグローバルメニューに表示するカテゴリー数を増やすこともできる。

 

url」をリンクさせたいページのURLに書き換える

続いてURLの書き換え。先ほどのコードにそれぞれ赤字でurlと書かれている箇所があるんだけど、それぞれを任意のページのURLに変更する。

 

<li><a href='url'>TOP</a></li>

<li><a href='url'>お役立ち情報</a></li>
<li><a href='url'>日記</a></li>
<li><a href='url'>音楽</a></li>
<li><a href='url'>食べ物</a></li>

 

それぞれをリンクさせたいURLに書き換える。この時先ほど設定したカテゴリーをはてなブログで開いてそのページのURLに書き換えることでリンクをさせることが可能。

 

例えば、TOPページにリンクをさせたいのなら下記のようにコードを書き換える。

 

  1. トップページのURLをコピーする
  2. htmlコードの「url」を選択し、ペーストする

 

<li><a href='https://keykun.hatenablog.jp/archive'>TOP</a></li>

<li><a href='url'>お役立ち情報</a></li>
<li><a href='url'>日記</a></li>
<li><a href='url'>音楽</a></li>
<li><a href='url'>食べ物</a></li>

 

このようにそれぞれのurlを書き換えていく。

 

<li><a href='https://keykun.hatenablog.jp/archive'>TOP</a></li>

<li><a href='https://keykun.hatenablog.jp/yakudachi'>お役立ち情報</a></li>
<li><a href='https://keykun.hatenablog.jp/diary'>日記</a></li>
<li><a href='https://keykun.hatenablog.jp/music'>音楽</a></li>

 

全てのurlを書き換えることができたら準備は完了。なので1度保存をしておくとミスがなくなる。いよいよはてなブログにグローバルメニューを設定をしていく。

 

グローバルメニューの設定方法【はてなブログ設定編】

f:id:keykuuun:20220304193720j:image

htmlコードの作成はできたから、はてなブログにhtmlコードを設定する。この時、万が一の事態に備えて一度はてなブログのバックアップを取っておくことをおすすめしたい。

 

はてなブログの設定では2つのことに取り組む。

 

  1. 先ほどのhtmlコードを設定する
  2. グローバルメニューのデザインを設定する

 

①htmlコードを設定する

はてなブログの「ダッシュボード」を開き、メニューの「デザイン」から「スパナ」のマークをクリックし、「ヘッダ」を開く。

f:id:keykuuun:20220304193924j:imagef:id:keykuuun:20220304194127j:image

 

「タイトル下」を開いて先ほどのhtmlコードを貼り付けることでグローバルメニューを設置することは可能。

 

f:id:keykuuun:20220304194209j:image

 

ただ、このままだとタイトルの下にグローバルメニューの「骨組み」を配置しただけなので、デザイン性も低く見た目はカッコ悪い。続いてグローバルメニューのデザインを変更していく。

 

②グローバルメニューのデザインを設定する

今回はCSSコードを使用して、グローバルメニューをデザインする。

 

#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #343838;/*グローバルメニュー背景色*/
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: left;
}
#menu li a {
padding-left: 15px;
padding-right: 15px;
display: block;
color: #ffffff;/*グローバルメニュー文字色*/
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #ffffff;
transition: all .5s;
}
.menu-toggle{
display: none;

}
/*パソコン1カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}
/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #343838;/*MENU背景色*/
text-align: right;/*MENUの文字の位置*/
width: 100%;
}
.menu-toggle{
color: #ffffff;/*MENUの文字色*/
display: inline-block;
padding: 5px;
margin: 3px;
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;
}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
float: none;
height: 35px;
width: 100%;
list-style-type: none;
background: #00DFFC;/*リスト文字の背景色*/
margin: 0 auto;
text-align: left;/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: #343838;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;
}
}

 

こちらも同じくメモ帳やワードに一度コピーをしてから取り組んだ方がいい。

 

グローバルメニューの色を決める

先ほどのCSSコードのままだとページに合う色の設定ができていないから、それぞれの色を変更する。今回のコードに「○○の色」と日本語で書いてある箇所があるんだけど、そこを変更することで好きな色に設定できる。

 

その前についている「#○○○○○○」という6桁の文字列(もしくは数列)を変更するんだけど、下記のサイトを参考に自分が好きな色に設定することをおすすめします。

 

 

こちらのカラーコード一覧を参考に色の設定を行ったらいよいよはてなブログに設定をする。

 

デザインCSSにコードを貼り付ける

先ほど作成したコードをデザインCSSに貼り付ける。

 

はてなブログの「ダッシュボード」から設定を開き、「デザイン」タブ内の「スパナマーク」を開く。

 

f:id:keykuuun:20220304193924j:imagef:id:keykuuun:20220304194325j:image

 

1番下の項目に「デザインCSS」があるから、それを開いて先ほどのコードをペースト。

 

f:id:keykuuun:20220304194437j:image

 

完成を確認する【確認作業】

最後に適切にグローバルメニューが機能しているか確認。自分のブログを開いて以下の項目を確認して作業は終わり。

 

  • グローバルメニューが表示されているか?
  • グローバルメニューの色は反映されているか?
  • 設定したカテゴリーの誤字脱字はないか?
  • 操作をした時に設定したリンクにアクセスができるか?

 

【まとめ】グローバルメニューはユーザーにとっても嬉しい機能

グローバルメニューはユーザーにとってとても便利かつページを使いやすくする機能だから設定しておいて損はない。

 

それにページの操作性の向上だけではなく、ユーザーの滞在率やPVにも密接に関係してくる機能だから、せっかく設定できるのにしないのは勿体無い。

 

複雑な工程だけど、設定しておくことで得られるメリットは多数あるから必ず設定をしてほしい。