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

MENU

【より使いやすいブログを作る】 はてなブログ無料版にグローバルメニューを設定する簡単な方法【Google AdSense対策】

f:id:keykuuun:20211012174937j:image

前回に続きGoogle AdSenseに合格するために、はてなブログ無料版で俺が実際に設定した内容を共有していきます。

 

今回の記事は少し専門的な話になりますが、初心者でも簡単に設定できます。

 

また、設定を行う際には、PCからの設定をしていただけるといいかと思います。

 

では、初心者でも簡単にできるグローバルメニューの設定方法を本日は解説していきます。

 

 

グローバルメニューはどんなサイトにも設置した方がいい魔法のツール

サイト内のコンテンツにどのようなものがあるのかを一覧表示するものです。

 

はてなブログでいうと、自ら設定ができるカテゴリーをブログタイトル下に一覧表示をする方法になります。

 

現在、スマホスクリーンショットになりますが、イメージは下記のような感じです。

f:id:keykuuun:20211012151537p:image

 

 

またスマホだとこのようにハンバーガーメニューと言われる層構造になったメニュー表示になりますが、PC画面で見ると帯にそれぞれのカテゴリーが表示されるようになります。

 

これを設定するだけでかなりブログが見やすくなります。

 

ちなみにデザインに元々グローバルメニューを搭載したものもありますが、今から紹介しておく方法を使うと、どんなデザインでもグローバルメニューを設定することができるようになります。

 

自分のブログにオリジナリティを持たせることもできますので、ぜひ活用してみてください。

 

グローバルメニューの設定方法

グローバルメニューを設定するには少しプログラミングの知識が必要になりますが、「コードをコピー&ペースト!少し書き換えるだけ!」この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コードを自分専用に書き換える

ここでデザインやリンク先を全て設定してしまいます。

 

先ほどコピー&ペーストをしたコードを書き換えていきますが俺はこの時メモ帳やワードで行うことを推奨します!

 

コードは見ていただいた通り長いですが、手を加えるところはほんの少しです!頑張りましょう!

 

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>

と続けて同じようなコードが並んでいますが、この数行の少しの部分を書き換えます。

 

色が変わっているところをそれぞれ書き換えていくだけです!

 

こちらでグローバルメニューに表示させる内容とリンク先の設定ができます。

 

まずカテゴリを自分が表示させたいメニュー内容に書き換えます。

 

自身がブログでカテゴリ登録しているもので問題ありません。

 

「お役立ち情報」というカテゴリを記事につけているのであれば、そのまま「お役立ち情報」に書き換えましょう。

 

ちなみに最終行のカテゴリは「プライバシーポリシー」と書き換えてください。

 

前回作成したプライバシーポリシーを設定することでいつでもプライバシーポリシーに飛べるようにできます。

 

前回記事はこちら

 

そして、urlにはそれぞれのページのURLを設定します。

 

カテゴリがTOPとなっているところには自分のブログのトップページのURLをコピー&ペーストしてください。

 

ほかはそれぞれカテゴリーのURLをコピー&ペーストしていきます。

 

すると、このようなコードが仕上がると思います。

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

<li><a href='https://keykun.hatenablog.jp/archive'>お役立ち情報</a></li>
<li><a href='https://keykun.hatenablog.jp/archive'>趣味</a></li>
<li><a href='https://keykun.hatenablog.jp/archive'>ゲーム</a></li>
<li><a href='https://keykun.hatenablog.jp/archive'>プライバシーポリシー</a></li>

※URL、カテゴリ名はあくまで一例です。

 

 

プライバシーポリシーのところにはそのまま記事のURLを設定しましょう。

 

ちなみに表示させたい項目がまだある方に向けて補足です。

このコードに1行同じコードを挿入するとさらに表示できるカテゴリーが増えます。

 

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

 

表示内容を追加したい人向けにこちらのコードも置いておきますのでご活用ください。

 

これで準備は万端!

ここからはてなブログ側でグローバルメニューを設定していきます。

 

はてなブログにグローバルメニューを設定する

はてなブログに先程作成したコードをコピペします。

 

なお、開発者向けの設定を触るので、正常に動作しないこともありますので、必ずバックアップを取っておいてください。

 

では、早速はてなブログで設定を始めていきます。

 

まずは、「ダッシュボード」を開きます。

 

続いて、「デザイン」から「スパナ」のマークをクリックし、「ヘッダ」を開きます。

f:id:keykuuun:20211012174026j:image

そして、「タイトル下」を開いて先ほどのhtmlコードを貼り付けます。

f:id:keykuuun:20211012174113j: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;
}
}

 

今回もこちらのコードをご活用ください。

 

設定方法は至ってシンプルです。

 

はてなブログの「ダッシュボード」から設定を開きます。

 

「デザイン」タブ内の「スパナマーク」を開きます。

 

1番下の項目に「デザインCSS」がありますのでそちらを開いて先ほどのコードをペーストします。

f:id:keykuuun:20211012174347j:image

 

 

以上でグローバルメニューは完成となります。

 

横文字ばかりで疲れますね。

 

【補足】グローバルメニューの文字色や背景色を変更する方法

先ほどのコードを貼り付けると確かにグローバルメニューは完成します。

 

しかし、人によってはイメージと違ったり、配色を変えたいという方もいると思います。

 

デザインは凝り出すと歯止めが効かなくなりますからね。気持ちは痛いほどわかります。

 

自身でコードを書き換える必要がありますが、グローバルメニューの配色設定は変更することが可能です。

 

先ほどのコード中に「color:#〜」という記載があると思いますが、それぞれのところを書き換えれば色を変えることはできます。

 

色のコードについてはこちらのサイトを参考にして下さい。

 

WEB色見本 原色大辞典 - HTMLカラーコード

 

あとがき

まさかの本日2記事目。

と言っても鉄は熱いうちに打ちたいので、AdSense合格したんだからこそ実施してきたことを共有したいのです。

 

2記事合わせて1万字は行っているでしょうか…

 

多分大学の卒論ですらここまで真剣に文字を書いたことはありませんからね。

 

以上でグローバルメニューの設定は完了になります。

 

最後に参考になったと思いましたら、こちらワンプッシュお願いします。

ブログランキング・にほんブログ村へにほんブログ村