紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

はてなブログのグローバルメニューの作成の仕方【コピペ可】

f:id:slash1196:20210606223702j:plain

 

f:id:slash1196:20200520205950j:plain

はてなブログでグローバルメニューを設置したい人

はてなブログを使っていて、グローバルメニューを付けたいんだけど、どうしたらいいのかがわからない。

教えてほしいなぁ。

 

こんなお悩みにお答えします。

 

【この記事でわかること】

  • グローバルメニューとは
  • はてなブログのグローバルメニューの作り方

 

 こんにちわ、紅蓮です。

はてなブログで書いていて、グローバルメニューを作りたいと思うこともありますよね。

 

今回は、はてなブログでグローバルメニューの設置に仕方をお話していきます。

この記事を読み終わるころには、はてなブログでグローバルメニューの作成の仕方がわかるようになります。

 

この記事を書く僕は、はてなブログ歴は3年目。

ブログ収益は現在、月3000円ほどですね。

 

グローバルメニューがあることによって、読まれる率もぐんっと上がりますから、ぜひ最後までお読みくださいね。

 

では早速行ってみましょう。

Here We Go!!

 

 

グローバルメニューとは

f:id:slash1196:20210531163343j:plain

では、グローバルメニューの作り方に行く前に、グローバルメニューとは何かについてお話していきましょう。

 

グローバルメニューとは、 サイトのタイトル下にある部分のメニューのことです。

以下の画像の部分を言いますね。

f:id:slash1196:20210606170723j:plain

カテゴリー名が記載されていて、そこから好きなページに飛ぶことができるメニューですね。

 

グローバルメニューを設置するメリット・デメリット

次にグローバルメニューがあるメリットとデメリットについてお話していきましょう。

 

グローバルメニューを設置するメリット

グローバルメニューを設置するメリットは、以下の通り。

 

  • 全体的な利便性が上がる
  • SEO対策にもなる

 

では詳しく見ていきましょう。

 

 全体的な利便性が上がる

グローバルメニューを設置するメリットの1つ目は、全体的な利便性が上がることですね。

グローバルメニューを付けると、どのページからもヘッダのところにはグローバルメニューがあるんです。

 

すると以下のようなことが、あるんですよね。

 

  • サイトの概要を把握しやすくなる
  • 目的地にたどり着きやすくなる
  • 他の記事にも興味を持ってもらえる

 

すると読者にとって使いやすいサイトになり、回遊(別のページも見てみる行為)率も上がったり、サイトに滞在する時間が伸びたりするんです。

 

読者にとって使いやすいサイトになるのです。

 

 

 SEO対策にもなる

グローバルメニューを設置するメリットの2つ目は、SEO対策にもなるからです

グローバルメニューを設置すると、各カテゴリーにリンクを貼り付けることになるんですね。

 

そのためにGoogle先生からクローラーが来た時に、どんなサイトかという概要がわかりやすくなります。

 

わかりやすいとGoogle先生は、

「このサイト、わかりやすいサイトじゃないか」

という評価を下します。

 

そうなるとSEO対策になり、上位表示しやすくなるのです。

だから、グローバルメニューを設置するのは、メリットなんです。

 

グローバルメニューを設置するデメリット

グローバルメニューを設置するデメリットも、実は存在するんです。

そのデメリットは、以下の通り。

 

  • 階層式にすると気づかれない可能性もある
  • ブログ自身のデータが重くなる

 

では詳しく見ていきましょう。

 

 階層式にすると気づかれない可能性もある

グローバルメニューを設置するデメリットの1つ目は、階層式にすると気づかれない可能性があることです。

 

というのも、グローバルメニューを設置すると、階層式にすると以下のような感じになります。

f:id:slash1196:20210606174053j:plain

そうなんです。

グローバルメニューにマウスを置かないと、中にあるカテゴリが出てこないために、気が付かない可能性もあるんです。

 

ちょっと気づかれない場合もあるので、気を付けないといけないですね。

 

 

 ブログ自身のデータ量が多くなるために重くなる

グローバルメニューを設置するデメリットの2つ目は、ブログ自身のデータ量が多くなるために重くなることですね。

 

グローバルメニューを設置するときには、コードを入力しますよね。

実はコードを書き込むとデータ量って増えてしまうんですよね。

 

そして、読み込みに時間がかかってしまうことがあります。

 

はてなブログのグローバルメニューの作り方

f:id:slash1196:20210527200426j:plain

ここでははてなブログでグローバルメニューの作り方をお話していきましょう。

手順は以下の通り。

 

  • 手順①グローバルメニューのコードをコピーする
  • 手順②自分のブログにコードを貼り付ける
  • 手順③リンクをカスタマイズする
  • 手順④色をカスタマイズする

 

 では詳しく見ていきましょう。

 

手順①グローバルメニューのコードをコピーする

一つ目の手順は、グローバルメニューのコードをコピーすることです。

コピーするには、

「かっこいいな」

と思うサイトのグローバルメニューを見つけるのがいいです。

 

基本的には、[はてなブログ グローバルメニュー]などの言葉で検索するのがいいですね。

 

見つけたら、そのコードをコピーしましょう。

 

手順②自分のブログにコードを貼り付ける

2つ目の手順は、自分のブログにコードを貼り付けることです。

 

はてなブログでグローバルメニューを作るためのコードを置く場所

まずはてなブログにグローバルメニューのコードを置く場所をお話ししましょう。

置く場所は、以下の通り。

 

  • デザイン→カスタマイズ→ヘッダのタイトル下
  • デザイン→カスタマイズ→デザインCSS

 

では詳しく見ていきましょう。

 

 デザイン→カスタマイズ→ヘッダのタイトル下

ここは、HTMLとJQueryを置く場所です。

 

デザイン→カスタマイズ→ヘッダと進み、タイトル下をクリックします。

f:id:slash1196:20210606181247j:plain

 

そこにHTMLコードとJQueryコードを、コピペします。

 

 デザイン→カスタマイズ→デザインCSS

ここはCSSコードをペーストするところです。

まず管理画面から、デザイン→カスタマイズとクリック後、デザインCSSをクリックします。

f:id:slash1196:20210606181402j:plain

 

以下の画面のところに、CSSコードをコピペします。

 

貼り付けるコード

貼り付けるコードは、以下の通りになります。

 

  • HTML
  • JQuery
  • CSS

 

では詳しく見ていきましょう。

 

 HTML

貼り付けるHTMLは、以下の通り。

<div class="drawer_menu">
<!-- コピーライト消さないように!
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office
Customized by minimalgreen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
コピーライトここまで -->
<div class="drawer_bg"></div>
<button type="button" class="drawer_button">
<span class="drawer_bar drawer_bar1"></span>
<span class="drawer_bar drawer_bar2"></span>
<span class="drawer_bar drawer_bar3"></span>
<span class="drawer_menu_text drawer_text">MENU</span>
<span class="drawer_close drawer_text">CLOSE</span>
</button>
<nav class="drawer_nav_wrapper">
<ul class="drawer_nav">
<li>
<a href="#">メニュー1 </a>
</li>
<li>
<a href="#">メニュー2 </a>
<span class="touch-btn"><i class="blogicon-chevron-down lg"></i></span>
<ul class="second-level">
<li>
<a href="#">サブメニュー1</a>
</li>
<li>
<a href="#">サブメニュー2</a>
</li>
<li>
<a href="#">サブメニュー3</a>
</li>
</ul>
</li>
<li>
<a href="#">メニュー3 </a>
<span class="touch-btn"><i class="blogicon-chevron-down lg"></i></span>
<ul class="second-level">
<li>
<a href="">サブメニュー1</a>
</li>
<li>
<a href="">サブメニュー2</a>
</li>
<li>
<a href="">サブメニュー3</a>
</li>
</ul>
</li>
<li>
<a href="#">メニュー4 </a>
</li>
<li>
<a href="#">メニュー5 </a>
</li>
<li>
<a href="#">メニュー6 </a>
</li>
</ul>
</nav>
</div>
 

 

 JQuery

JQueryコードは、以下の通り。

<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(function () {
$('.drawer_button').click(function () {
$(this).toggleClass('active');
$('.drawer_bg').fadeToggle();
$('nav').toggleClass('open');
})
$('.drawer_bg').click(function () {
$(this).fadeOut();
$('.drawer_button').removeClass('active');
$('nav').removeClass('open');
});
$(".touch-btn").on("click", function () {
$(this).next().slideToggle();
});
})
</script>

 

 

 CSS

デザインCSSのコードは、以下の通りです。

 

/*
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office
Customized by minimalgreen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.drawer_menu a {
color: inherit;
text-decoration: none;
}
.drawer_menu a:visited {
color: inherit;
}
/* PC用ナビゲーション */
.drawer_menu .drawer_nav_wrapper {
transform: translate(0);
width: 100%;
height: 50px;
/* PC用メニュー高さ */
position: relative;
top: auto;
right: auto;
z-index: 100;
background-color: #555;
/* PC用メニュー背景色 */
}
.drawer_menu .drawer_nav {
max-width: 1000px;
/* コンテンツ幅に合わせる */
padding: 0;
margin: 0 auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
list-style-type: none;
}
.drawer_menu .drawer_nav li {
font-size: 16px;
margin: 0;
padding: 0;
width: 100%;
height: 50px;
/* PC用メニュー高さ */
line-height: 50px;
/* PC用メニュー高さ */
background-color: #555;
/* PC用メニューボタン背景色 */
text-align: center;
list-style-type: none;
}
.drawer_menu .drawer_nav li:hover {
background-color: #999;
/* PC用メニューボタンマウスオーバー背景色 */
}
.drawer_menu .drawer_nav li a {
color: #fff;
/* PC用メニューボタン文字色 */
}
/* PC非表示 */
@media screen and (min-width:1001px) {
.pc-hidden {
display: none;
text-align: center;
}
@media screen and (min-width: 1001px) {
/* ドロップダウンメニュー2階層目 */
.drawer_menu .drawer_nav li ul.second-level {
visibility: hidden;
list-style-type: none;
position: absolute;
z-index: -1;
top: 0;
margin: 0;
padding-left: 0;
}
.drawer_menu .drawer_nav li:hover ul.second-level {
visibility: visible;
z-index: 1;
top: 50px;
/* PC用メニューの高さに合わせる */
transition: all .3s;
}
.drawer_menu .drawer_nav li:hover ul.second-level li {
width: 200px;
/* ドロップダウンメニューボタン横幅 */
height: 50px;
/* Pドロップダウンメニューボタン高さ */
text-align: center;
}
.drawer_menu .drawer_nav li:hover ul.second-level li a {
display: block;
background-color: #555;
/* ドロップダウンメニューの文字の背景色 */
color: #fff;
/* ドロップダウンメニューの文字色 */
font-size: 100%;
text-decoration: none;
line-height: 50px;
/* Pドロップダウンメニューボタン高さ */
text-align: center;
}
.drawer_menu .drawer_nav li:hover ul.second-level li a:hover {
background-color: #999;
/* ドロップダウンメニューマウスホバー背景色 */
}
.touch-btn {
color: #fff;
margin-left: 5px;
}
/*+++ Default Button Color +++*/
.drawer_menu .drawer_button {
color: #fff;
/* ハンバーガーメニュー文字色 */
display: none;
}
.drawer_menu .drawer_button .drawer_bar {
background-color: #fff;
/* ハンバーガーメニュー三本線の色 */
}
/* 1000px以下 */
@media screen and (max-width: 1000px) {
.drawer_menu .drawer_bg {
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
background-color: rgba(51, 51, 51, 0.5);
display: none;
top: 0;
left: 0;
}
.drawer_menu .drawer_button {
display: block;
background-color: #555;
color: #fff;
border: none;
padding: 5px;
width: 50px;
letter-spacing: 0.1em;
cursor: pointer;
position: fixed;
top: 10px;
right: 10px;
z-index: 1001;
text-align: center;
outline: none;
}
.drawer_menu .drawer_button.active .drawer_bar {
width: 40px;
}
.drawer_menu .drawer_button.active .drawer_bar1 {
transform: rotate(30deg);
}
.drawer_menu .drawer_button.active .drawer_bar2 {
opacity: 0;
}
.drawer_menu .drawer_button.active .drawer_bar3 {
transform: rotate(-30deg);
}
.drawer_menu .drawer_button.active .drawer_menu_text {
display: none;
}
.drawer_menu .drawer_button.active .drawer_close {
display: block;
}
.drawer_menu .drawer_bar {
display: block;
height: 2px;
margin: 8px 2px;
transition: all 0.2s;
transform-origin: 0 0;
}
.drawer_menu .drawer_text {
text-align: center;
font-size: 10px;
}
.drawer_menu .drawer_close {
letter-spacing: 0.08em;
display: none;
}
.drawer_menu .drawer_menu_text {
display: block;
}
.drawer_menu .drawer_nav_wrapper {
width: 250px;
height: 100%;
transition: all 0.2s;
transform: translate(250px);
position: fixed;
top: 0;
right: 0;
z-index: 1000;
background-color: #FFF;
/* ドロワーメニュー内背景色 */
overflow-x: hidden;
overflow-y: auto;
}
.drawer_menu .drawer_nav {
display: block;
position: relative;
margin-top: 40px;
}
.drawer_menu .drawer_nav li {
background-color: #fff;
height: auto;
line-height: 50px;
/*  ドロワーメニューリスト項目高さ */
position: relative;
border-bottom: 1px solid #eee;
}
.drawer_menu .drawer_nav li a {
background-color: #fff;
/* ドロワーメニューリスト背景色 */
color: #555;
/* ドロワーメニューリスト文字色 */
display: block;
text-align: left;
padding-left: 20px;
}
/* スマートフォン2階層目 */
.drawer_menu .drawer_nav li:hover ul.second-level {
display: block;
}
.drawer_menu .drawer_nav li ul.second-level {
display: none;
position: relative;
padding: 0;
z-index: 1001;
}
.drawer_menu .drawer_nav li ul.second-level li a {
padding-left: 40px;
}
.drawer_menu .drawer_nav_wrapper.open {
transform: translate(0);
}
.drawer_menu.left .drawer_button {
right: auto;
left: 32px;
}
.drawer_menu.left .drawer_nav_wrapper {
transform: translate(-250px);
right: auto;
left: 0;
}
.drawer_menu.left .drawer_nav_wrapper.open {
transform: translate(0);
}
.pc-hidden {
text-align: center;
}
.touch-btn {
color: #555;
position: absolute;
top: .25rem;
right: 2%;
display: block;
z-index: 10;
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
}
}
/*  ウィジェットタイトル */
.drawer-title {
text-align: center;
width: 100%;
height: 50px;
line-height: 50px;
background-color: #555;
/* ドロワーメニュー内タイトルライン背景色 */
color: #fff;
}

 

手順③リンクをカスタマイズする

手順の3つ目は、リンクをカスタマイズすることです。

というのもコードをコピーして貼り付けても、そのままでは機能しません。

 

ですから、カテゴリーのURLと名前を書き換えましょう。

#にURLを入れて、メニューのところに名前を入れましょう。

 

ポイントとしては、2階層目があるときには、1階層目にはURLを入れてしまわないことですね。

 

なお、HTMLの上に置いてある条文に関しては消してしまわないことです。

これを消してしまうとOSSライセンス違反になってしまい、著作権の違反になってしまいます。

違法行為になってしまいますので、注意してくださいね。

 

手順④色をカスタマイズする

手順の4つ目は、色をカスタマイズすることですね。

CSSの赤色になっているところを中心に色をカスタマイズしましょう。

 

基本的には無難な色にしたほうがいいですね。

色に関しては、WEB色見本 原色大辞典 - HTMLカラーコードを見ながらやっていくといいですね。

 

CSSの上にある条文に関しても、消さないようにしてくださいね。

 

コードの解説

f:id:slash1196:20210606222642j:plain

ではコードの解説をしていきましょう。 

 

HTML&CSSの解説

面白いのが、ボタンを一つ一つの要素で作っているところですね。

線の三本を重ねて作っていますね。

 

1000px以下(タブレットまで)の解像度のデバイスでは、トグルになるように作られています。

それ以上のものはパソコンのタイプになるようになっていますね。

 

JQueryの解説

次にJQueryの解説です。

 

JQueryは3つの要素でできています。

 

まず1つ目の要素は、以下の通り。

$('.drawer_button').click(function () {
		$(this).toggleClass('active');
		$('.drawer_bg').fadeToggle();
		$('nav').toggleClass('open');
	}

これは、ボタンがクリックされたら、トグルが開き、ナビゲーションが開くようになっています。

 

次の2段目です。

$('.drawer_bg').click(function () {
$(this).fadeOut();
$('.drawer_button').removeClass('active');
$('nav').removeClass('open'); });

これに関しては、もう一度押すと、出ていたメニューが見えなくなるように設定されています。

 

次に3段目。

$(".touch-btn").on("click", function () {
$(this).next().slideToggle();
});

 

こちらは、メニューの中の話ですね。

トグルメニューの中のメニューをクリックすると子要素が表示されるようにコードを書いています。

 

まとめ|グローバルメニューを付けて読者のユーザビリティを極限まで上げよう

お疲れさまでした。

ここまでグローバルメニューの設置の仕方をお話してきました。

 

まとめると以下のようになります。

 

まとめ
  • グローバルメニューは、読者にとってもあなたにとってもいいことがあるので設置しておいて損はない
  • ただデメリットもあるので注意が必要
  • グローバルメニューの置き方はコピペでできるからやっておいて損はなし。
  • コピーする際にはミニファイできるものとそうでないものがある。OSS違反になるものがあるので注意が必要

 

グローバルメニューってあると本当に読者にとっていいことばっかりなんですよね。

ぜひ実装してみてはいかがでしょうか。

 

興味が出てきたら、おすすめの本

今回はグローバルメニューの実装方法についてお話ししました。

もし興味があるのなら、以下の本で勉強してみてはいかがでしょうか。

 

おすすめの本は、アフィリエイトを勉強するのにおすすめな本15選【行動も説明】のウェブデザインのおすすめの3選にも載っています。

 

よかったらぜひともお読みくださいね。

 

ってことで今回はこの辺で。

また次回に。