【初心者でも簡単】グローバルメニューで読者の回遊性を保ちつつSEO対策【はてなブログデザイン】

こんにちは。
4児パパです。

ブログを毎日書きつつ、色々な事をやっている日々です。その中でも最近避けて通ってきましたブログデザインをやっています。

『グローバルメニュー』はSEOにも重要で読者の回遊性を保ちます。
参考になれば幸いです。

はてなブログ初心者でも再現性のあるグローバルメニューをいじっております。色んな方の記事を参考にしつつも、実装して確認。なんか楽しくなってきた。
今から『グローバルメニュー』について、記事を書きます。グローバルリンクはSEOにも適しています。
初心者の方でも参考になる様、努めます😊

— ４児パパ (@ARTS_papa) 2019年8月6日

はてなブログ初心者でも再現性のあるグローバルメニューをいじっております。色んな方の記事を参考にしつつも、実装して確認。なんか楽しくなってきた。今から『グローバルメニュー』について、記事を書きます。グローバルリンクはSEOにも適しています。初心者の方でも参考になる様、努めます😊

初心者にはちょっと難しいコードが入っていますので、基本的にコピペで済む様に解説していきます。

Follow @arts_papa

■目次

▶5.ブログデザインは記事を書いてからで良い

▶6.最後に

１.グローバルメニューの必要性

グローバルメニューがあるのと無いので、サイトの仕上げがだいぶ変わってくる。

グローバルメニューとは

グローバルメニューはサイト上部にあるメニューです。カテゴリー名など記載されていて、読者でもわかるお店のメニューの様なもの。ここから今見ている記事以外に必要な情報がある記事へと誘導することができます。

グローバルメニューSEO対策になる

グローバルメニューに記載されている各カテゴリーにリンクを貼り付けるので、内部リンク扱いとしてSEO対策にも直結する。

グローバルメニューの重要性

利便性つまりユーザーが使いやすいというユーザビリティの底上げする事が出来るので、あるかないかで自分のサイトの見た目も中身も含めた価値感が出てくる。

2.はてなブログのテーマを選択

最近のテーマは割とグローバルメニューがついている。

グローバルメニューがついているテーマを選ぶ

私のブログデザインのテーマ『DUDE』レスポンシブデザイン非対応なので、おすすめしない。初心者にはコードを書くには、ちょっと勉強がいるのでもともとレスポンシブデザイン対応のテーマを選ぶのをおおすすめします。

グローバルメニューあるテーマの選び方

『管理画面』→『デザイン』→下部にある『テーマストアでテーマを探す』→『テーマを選ぶ』

グローバルメニューバーが設置してあるテーマを選ぶ

各テーマを見て選ぶのですが、私が初心者におすすめするのは三つ。

無難にこの三つの中からで十分ですね。

3.グローバルメニューを設置する

参考にしたサイトはこちら。

https://www.yukihy.com/entry/dropdown-toggle-menu

実装仮完成図

グローバルメニュを設置してみよう

コピペで済みますので参考にしてみてください。

デザインCSSから

『管理画面』→『デザイン』→『カスタマイズ』→『デザインCSS』でcodeを入れます。

/*****グローバルメニュー****/
#menu{
width: 100%;
margin: 10px auto;
background: #444;/*７*/
}
#menu-inner{
width: 1000px;/*１*/
height: 40px;/*２*/
margin: 0 auto;
background: #444;/*８*/
}
#menu-btn{display: none;}
#menu-content{
padding-left: 0;
margin: 0;
width: 100%;
height: 100%;
list-style-type: none;
}

#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
width: 12.5%;
}

#menu-content > li > a{
position: relative;
display: block;
height: 100%;
width: 100%;/*3*/
line-height: 40px;/*２*/
background: #444;/*９*/
color: #fff;/*10*/
font-size: 90%;
text-decoration: none;
z-index: 2;
}

#menu-content > li > a:hover{
background: #555;/*11*/
color: #fff;/*12*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*２階層目*/
#menu-content > li > ul.second-content{
visibility: hidden;
position: absolute;
top: 0;
margin: 0;
padding-left: 0;
list-style-type: none;
z-index: -1;
}
#menu-content > li:hover > ul.second-content{
visibility: visible;
top: 40px;/*2*/
z-index: 1;
transition: all .3s;
}
#menu-content > li > ul.second-content > li{
text-align: center;
width: 200px;/*４*/
height: 40px;/*５*/
}
#menu-content > li > ul.second-content > li > a{
display: block;
line-height: 40px;/*５*/
background: #444;/*13*/
color: #fff;/*14*/
font-size: 70%;
text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
background: #555;/*15*/
color: #fff;/*16*/
}

HTMLとJS（jQuery）を入れていきます

基本的にブログ初心者ではHTMLとCSSぐらいしか、学ばないと思いますのでJavaScript（文字に動きを見せる為の言語）までいくと手厳しいので、先駆者の記事を参考にすると良い。

『カスタマイズ』→ 『タイトル下』でコードを挿入します。

<div id=”menu”>
<div id=”menu-inner”>
<div id=”btn-content”>
<span id=”menu-btn”><i class=”blogicon-reorder”></i> MENU</span>
</div>
<ul id=”menu-content”>
<li>
<a href=”https://www.papa-programing.jp/“>カテゴリ１ <i class=”blogicon-home”></i></a>
<ul class=”second-content”>
<li><a href=”２階層目のリンク”>カテゴリ１-１</a></li>
<li><a href=”２階層目のリンク”>カテゴリ１-２</a></li>
<li><a href=”２階層目のリンク”>カテゴリ１-３</a></li>
<li><a href=”２階層目のリンク”>カテゴリ１-４</a></li>
</ul>
</li>
<li>
<a href=”１階層目のリンク”>カテゴリ２ <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”２階層目のリンク”>カテゴリ２-１</a></li>
<li><a href=”２階層目のリンク”>カテゴリ２-２</a></li>
<li><a href=”２階層目のリンク”>カテゴリ２-３</a></li>
<li><a href=”２階層目のリンク”>カテゴリ２-４</a></li>
</ul>
</li>
<li>
<a href=”１階層目のリンク”>カテゴリ３ <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”２階層目のリンク”>カテゴリ３-１</a></li>
<li><a href=”２階層目のリンク”>カテゴリ３-２</a></li>
<li><a href=”２階層目のリンク”>カテゴリ３-３</a></li>
<li><a href=”２階層目のリンク”>カテゴリ３-４</a></li>
</ul>
</li>
<li>
<a href=”１階層目のリンク”>カテゴリ４ <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”２階層目のリンク”>カテゴリ４-１</a></li>
<li><a href=”２階層目のリンク”>カテゴリ４-２</a></li>
<li><a href=”２階層目のリンク”>カテゴリ４-３</a></li>
<li><a href=”２階層目のリンク”>カテゴリ４-４</a></li>
</ul>
</li>
<li>
<a href=”１階層目のリンク”>カテゴリ５ <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”２階層目のリンク”>カテゴリ５-１</a></li>
<li><a href=”２階層目のリンク”>カテゴリ５-２</a></li>
<li><a href=”２階層目のリンク”>カテゴリ５-３</a></li>
<li><a href=”２階層目のリンク”>カテゴリ５-４</a></li>
</ul>
</li>
<li>
<a href=”１階層目のリンク”>カテゴリ6 <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”２階層目のリンク”>カテゴリ６-１</a></li>
<li><a href=”２階層目のリンク”>カテゴリ６-２</a></li>
<li><a href=”２階層目のリンク”>カテゴリ６-３</a></li>
<li><a href=”２階層目のリンク”>カテゴリ６-４</a></li>
</ul>
</li>
<li>
<a href=”１階層目のリンク”>カテゴリ7 <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”２階層目のリンク”>カテゴリ７-１</a></li>
<li><a href=”２階層目のリンク”>カテゴリ７-２</a></li>
<li><a href=”２階層目のリンク”>カテゴリ７-３</a></li>
<li><a href=”２階層目のリンク”>カテゴリ７-４</a></li>
</ul>
</li>
<li>
<a href=”１階層目のリンク”>カテゴリ8 <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”２階層目のリンク”>カテゴリ 8-１</a></li>
<li><a href=”２階層目のリンク”>カテゴリ 8-２</a></li>
<li><a href=”２階層目のリンク”>カテゴリ 8-３</a></li>
<li><a href=”２階層目のリンク”>カテゴリ8-４</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style=”clear:both”></div>

<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.9.1.min.js“></script>
<script>
$(function(){
var menuBtn = $(“#menu-btn”),
menuContent = $(“#menu-content”);
menuBtn.click(function(){
menuContent.slideToggle();
});
$(window).resize(function(){
var win = $(window).width(),
p = 960;//19
if(win > p){
menuContent.show();
}else{
menuContent.hide();
}
});
});
</script>

“デザインCSS”と”HTML/jQuery”をコピで挿入すると『グローバルメニュー』の完成です。あとはリンクの挿入するだけです。

今回は取り急ぎ形までにします。

4.アイコンも変更してみる

せっかくなので、一箇所アイコンを変えてみました。

はてなブログのアイコン

はてなブログで使用出来るアイコンは割とあるので、変えてみました。

はてなブログアイコンの変え方

まず参考にしましたサイトです。

shirokai.hatenablog.com

“blogicon-chevron-down”から赤太文字の部分のにblogicon-home変更しました。

そして一番最初のカテゴリにtop画面に変移する様URLを差し込んでいます。

5.ブログデザインは記事を書いてからで良い

ブログを始めたばかりでは、ブログのデザインまで頭が回りません。

ブログは記事が命

形だけ求めても、結局中身がない為記事を重ねてから変更していきましょう。

外注もあり

記事を書くだけに専念したい場合は、一切デザインの為のコードを触るずに外注するのもありですね。

SEO対策をしてアクセス伸ばす

何度かSEO対策について記事を書いていますので、参考にしていただけましたら幸いです。

www.papa-programing.jp

6.最後に

もうすぐブログの更新をして二ヶ月を迎えます。

まだまだ達観できないです。でも毎日成長しているのにワクワクしています。

記事を書けない時は、「あぁちょっとスランプきてるなぁ」って感じで、奮闘しています。ただスランプの後のブレイクスルーが堪らない。

ブログで稼ぐというのは、その立ち位置までいくのに時間がかかります。

でもみてみたいですね。月収50万以上。

我が家では共働きしているので、それだけで経済的『安定』はありますが、『自由』を得ていません。マイホームを買いましたが、家賃収入で払っている為、給与から支払いはしていません。

株のおかげで新車を購入しました。一切給与から払っていません。

本業x株x不動産収入xブログ

人生常にハードですが、

無理ゲーから脱却しつつありますので、

割と人生楽しんでいます。

挑戦あるのみです。

人生伸びしろしかないので。

4児パパ

■目次