こんにちは。
4児パパです。
ブログを毎日書きつつ、色々な事をやっている日々です。その中でも最近避けて通ってきましたブログデザインをやっています。
『グローバルメニュー』はSEOにも重要で読者の回遊性を保ちます。
参考になれば幸いです。
はてなブログ初心者でも再現性のあるグローバルメニューをいじっております。色んな方の記事を参考にしつつも、実装して確認。なんか楽しくなってきた。
今から『グローバルメニュー』について、記事を書きます。グローバルリンクはSEOにも適しています。
初心者の方でも参考になる様、努めます😊— 4児パパ (@ARTS_papa) 2019年8月6日
はてなブログ初心者でも再現性のあるグローバルメニューをいじっております。色んな方の記事を参考にしつつも、実装して確認。なんか楽しくなってきた。 今から『グローバルメニュー』について、記事を書きます。グローバルリンクはSEOにも適しています。 初心者の方でも参考になる様、努めます😊
初心者にはちょっと難しいコードが入っていますので、基本的にコピペで済む様に解説していきます。
■目次
1.グローバルメニューの必要性
グローバルメニューがあるのと無いので、サイトの仕上げがだいぶ変わってくる。
グローバルメニューとは
グローバルメニューはサイト上部にあるメニューです。カテゴリー名など記載されていて、読者でもわかるお店のメニューの様なもの。ここから今見ている記事以外に必要な情報がある記事へと誘導することができます。
グローバルメニューSEO対策になる
グローバルメニューに記載されている各カテゴリーにリンクを貼り付けるので、内部リンク扱いとしてSEO対策にも直結する。
グローバルメニューの重要性
利便性つまりユーザーが使いやすいというユーザビリティの底上げする事が出来るので、あるかないかで自分のサイトの見た目も中身も含めた価値感が出てくる。
2.はてなブログのテーマを選択
最近のテーマは割とグローバルメニューがついている。
グローバルメニューがついているテーマを選ぶ
私のブログデザインのテーマ『DUDE』レスポンシブデザイン非対応なので、おすすめしない。初心者にはコードを書くには、ちょっと勉強がいるのでもともとレスポンシブデザイン対応のテーマを選ぶのをおおすすめします。
グローバルメニューあるテーマの選び方
『管理画面』→『デザイン』→下部にある『テーマストアでテーマを探す』→『テーマを選ぶ』
グローバルメニューバーが設置してあるテーマを選ぶ
各テーマを見て選ぶのですが、私が初心者におすすめするのは三つ。
無難にこの三つの中からで十分ですね。
3.グローバルメニューを設置する
参考にしたサイトはこちら。
https://www.yukihy.com/entry/dropdown-toggle-menu
実装仮完成図
グローバルメニュを設置してみよう
コピペで済みますので参考にしてみてください。
デザインCSSから
『管理画面』→『デザイン』→『カスタマイズ』→『デザインCSS』でcodeを入れます。
/*****グローバルメニュー****/
#menu{
width: 100%;
margin: 10px auto;
background: #444;/*7*/
}
#menu-inner{
width: 1000px;/*1*/
height: 40px;/*2*/
margin: 0 auto;
background: #444;/*8*/
}
#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;/*2*/
background: #444;/*9*/
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;}
/*2階層目*/
#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;/*4*/
height: 40px;/*5*/
}
#menu-content > li > ul.second-content > li > a{
display: block;
line-height: 40px;/*5*/
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/“>カテゴリ1 <i class=”blogicon-home”></i></a>
<ul class=”second-content”>
<li><a href=”2階層目のリンク”>カテゴリ1-1</a></li>
<li><a href=”2階層目のリンク”>カテゴリ1-2</a></li>
<li><a href=”2階層目のリンク”>カテゴリ1-3</a></li>
<li><a href=”2階層目のリンク”>カテゴリ1-4</a></li>
</ul>
</li>
<li>
<a href=”1階層目のリンク”>カテゴリ2 <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”2階層目のリンク”>カテゴリ2-1</a></li>
<li><a href=”2階層目のリンク”>カテゴリ2-2</a></li>
<li><a href=”2階層目のリンク”>カテゴリ2-3</a></li>
<li><a href=”2階層目のリンク”>カテゴリ2-4</a></li>
</ul>
</li>
<li>
<a href=”1階層目のリンク”>カテゴリ3 <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”2階層目のリンク”>カテゴリ3-1</a></li>
<li><a href=”2階層目のリンク”>カテゴリ3-2</a></li>
<li><a href=”2階層目のリンク”>カテゴリ3-3</a></li>
<li><a href=”2階層目のリンク”>カテゴリ3-4</a></li>
</ul>
</li>
<li>
<a href=”1階層目のリンク”>カテゴリ4 <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”2階層目のリンク”>カテゴリ4-1</a></li>
<li><a href=”2階層目のリンク”>カテゴリ4-2</a></li>
<li><a href=”2階層目のリンク”>カテゴリ4-3</a></li>
<li><a href=”2階層目のリンク”>カテゴリ4-4</a></li>
</ul>
</li>
<li>
<a href=”1階層目のリンク”>カテゴリ5 <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”2階層目のリンク”>カテゴリ5-1</a></li>
<li><a href=”2階層目のリンク”>カテゴリ5-2</a></li>
<li><a href=”2階層目のリンク”>カテゴリ5-3</a></li>
<li><a href=”2階層目のリンク”>カテゴリ5-4</a></li>
</ul>
</li>
<li>
<a href=”1階層目のリンク”>カテゴリ6 <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”2階層目のリンク”>カテゴリ6-1</a></li>
<li><a href=”2階層目のリンク”>カテゴリ6-2</a></li>
<li><a href=”2階層目のリンク”>カテゴリ6-3</a></li>
<li><a href=”2階層目のリンク”>カテゴリ6-4</a></li>
</ul>
</li>
<li>
<a href=”1階層目のリンク”>カテゴリ7 <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”2階層目のリンク”>カテゴリ7-1</a></li>
<li><a href=”2階層目のリンク”>カテゴリ7-2</a></li>
<li><a href=”2階層目のリンク”>カテゴリ7-3</a></li>
<li><a href=”2階層目のリンク”>カテゴリ7-4</a></li>
</ul>
</li>
<li>
<a href=”1階層目のリンク”>カテゴリ8 <i class=”blogicon-chevron-down”></i></a>
<ul class=”second-content”>
<li><a href=”2階層目のリンク”>カテゴリ 8-1</a></li>
<li><a href=”2階層目のリンク”>カテゴリ 8-2</a></li>
<li><a href=”2階層目のリンク”>カテゴリ 8-3</a></li>
<li><a href=”2階層目のリンク”>カテゴリ8-4</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.アイコンも変更してみる
せっかくなので、一箇所アイコンを変えてみました。
はてなブログのアイコン
はてなブログで使用出来るアイコンは割とあるので、変えてみました。
はてなブログアイコンの変え方
まず参考にしましたサイトです。
<ul id=”menu-content”>
<li>
<a href=”https://www.papa-programing.jp/“>カテゴリ1 <i class=”blogicon-home“></i></a>
<ul class=”second-content”>
<li><a href=”2階層目のリンク”>カテゴリ1-1</a></li>
<li><a href=”2階層目のリンク”>カテゴリ1-2</a></li>
<li><a href=”2階層目のリンク”>カテゴリ1-3</a></li>
<li><a href=”2階層目のリンク”>カテゴリ1-4</a></li>
</ul>
</li>
<li>
“blogicon-chevron-down”から赤太文字の部分のにblogicon-home変更しました。
そして一番最初のカテゴリにtop画面に変移する様URLを差し込んでいます。
<a href=”https://www.papa-programing.jp/“>カテゴリ1 <i class=”blogicon-home“></i></a>
5.ブログデザインは記事を書いてからで良い
ブログを始めたばかりでは、ブログのデザインまで頭が回りません。
ブログは記事が命
形だけ求めても、結局中身がない為記事を重ねてから変更していきましょう。
外注もあり
記事を書くだけに専念したい場合は、一切デザインの為のコードを触るずに外注するのもありですね。
SEO対策をしてアクセス伸ばす
何度かSEO対策について記事を書いていますので、参考にしていただけましたら幸いです。
6.最後に
もうすぐブログの更新をして二ヶ月を迎えます。
まだまだ達観できないです。でも毎日成長しているのにワクワクしています。
記事を書けない時は、「あぁちょっとスランプきてるなぁ」って感じで、奮闘しています。ただスランプの後のブレイクスルーが堪らない。
ブログで稼ぐというのは、その立ち位置までいくのに時間がかかります。
でもみてみたいですね。月収50万以上。
我が家では共働きしているので、それだけで経済的『安定』はありますが、『自由』を得ていません。マイホームを買いましたが、家賃収入で払っている為、給与から支払いはしていません。
株のおかげで新車を購入しました。一切給与から払っていません。
本業x株x不動産収入xブログ
人生常にハードですが、
無理ゲーから脱却しつつありますので、
割と人生楽しんでいます。
挑戦あるのみです。
人生伸びしろしかないので。
4児パパ
コメントを残す