redoブログ

redoブログ

現役スピーカー設計者によるお役立ち情報発信ブログ

Amazon Music Unlimited 1ヵ月無料
トップ > ブログカスタマイズ > 【ブログカスタマイズ】ブログ初心者におすすめ「はてなブログ」でハンバーガーメニューの追加するCSS・HTMLコードを紹介

【ブログカスタマイズ】ブログ初心者におすすめ「はてなブログ」でハンバーガーメニューの追加するCSS・HTMLコードを紹介

ブログカスタマイズ

はてなブログ　ハンバーガーメニュー

はてなブログで「グローバルメニュー(グローバルナビゲーション)」をスマホでみるさいに「ハンバーガーメニュー」も表示できるように対応した「CSSコード」「HTLMコード」を詳しく紹介しています。

 

最近ではパソコンよりスマホでブログを閲覧する人が圧倒的に多いことから、スマホ上でどのように見えるかも意識することが大切です。

 

ハンバーガーメニューと聞いて「何それうまいの？」と思ったかもしれませんが、食べられません。

 

簡単に言うと、ブログをみるときにたまに見かけるスマホ画面の右上によくある「三本バーのメニュー表示」のことです。本記事のTOP画像の右横にあるアイコンです。

 

とくにこれからブログをはじめようと考えているブログ初心者へおすすめのブログカスタマイズ方法です。

 

色や配置、形、文字など工夫次第で多種多様な設定が可能です。

 

各自で「CSSコード」「HTMLコード」を書き換えないといけない部分もありますが、出来る限りシンプルにお伝えしたいと思います。

 

はてなブログで収益化を目指している方へ向けて「100記事」達成時のPV数など詳しく紹介しています。

redo5151.hatenablog.com

 

グローバルメニューとは？

f:id:redo5151:20191012195645p:plain

上の青字で囲ったメニュー画面のことを「グローバルメニュー」と呼びます。

 

これがあると見る側が見たい記事に直ぐに飛べるので便利です。

 

また、ブログ内での回遊率があがり、SEOの観点からもアクセス数アップに繋がります。

 

Googleアドセンスの審査を考えている方は、「お問合せ」「プライバシーポリシー」の設置が必須ですので、必ず設定しておきましょう。

 

以下でシンプルなグローバルメニューを紹介しています。

redo5151.hatenablog.com

 

redo5151.hatenablog.com

ハンバーガーメニューとは

ハンバーガーメニュー

 

ハンバーガーメニューとは、サイト内の三本線のナビゲーションメニューで、クリックすると隠れている情報が表示される形式のことを言います。

 

主にスマートフォンのUIデザインとして用いられています。スマートフォンでは、パソコンと比べて画面サイズに制限があります。

 

そのため、グローバルナビゲーションなどを表示させると画面上が情報過多になってしまうため、ハンバーガメニューの中に隠すことで情報を整理して見やすくできるメリットがあり多くのブログで採用されています。

 

一方で、常に右上にメニューが追従してくるので、人によっては抵抗がある方もいるかと思います。

グローバルメニュー(サブカテゴリ―付)をスマホでハンバーガーメニュー表示対応させる

youtu.be

 

参考までにスマホ上での動作は上のYoutube動画で確認できます。

 

グローバルメニューを同じカテゴリーにサブカテゴリ―を準備して、「2段階表示＋スマホではハンバーガーメニュー表示のレスポンシブル対応バージョン」を紹介します。

 

こちらのグローバルメニューは少し個人で変更する箇所が多いので、コードの意味をある程度理解した上で、バックアップを取りつつ、アレンジして使ってもらえればと思います。

パソコン表示の場合のグローバルメニューの見え方

グローバルメニュー

 

 

今回はカテゴリーを6項目作り、メニュー2、メニュー3にサブメニューをそれぞれ3項目つけるパターンを準備しました。

 

スマホでの見え方

ハンバーガーメニュー

こちらのようにスマホでは右上にハンバーガーメニューが表示され、常に追従するようになっています。

 

表示形式がWordPressっぽくなるので、けっこう見た目はよくなるのでおすすめです。

HTMLコード(ヘッダー→タイトル下)

下記にHTMLコードを示します。

<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="url">メニュー1 </a>
</li>
<li>
<a href="url">メニュー2 </a>
<span class="touch-btn"><i class="blogicon-chevron-down lg"></i></span>
<ul class="second-level">
<li>
<a href="url">サブメニュー1</a>
</li>
<li>
<a href="url">サブメニュー2</a>
</li>
<li>
<a href="url">サブメニュー3</a>
</li>
</ul>
</li>
<li>
<a href="url">メニュー3 </a>
<span class="touch-btn"><i class="blogicon-chevron-down lg"></i></span>
<ul class="second-level">
<li>
<a href="url">サブメニュー1</a>
</li>
<li>
<a href="url">サブメニュー2</a>
</li>
<li>
<a href="url">サブメニュー3</a>
</li>
</ul>
</li>
<li>
<a href="url">メニュー4 </a>
</li>
<li>
<a href="url">メニュー5 </a>
</li>
<li>
<a href="url">メニュー6 </a>
</li>
</ul>

 

<a href="#">メニュー1 </a>の「url」と「メニュー1,2,3,4,5,6」は各自の項目で設定してください。

 

基本的には冒頭に紹介した、 グローバルメニューと同じ要領で、「url」に「アクセスURL」を記入し、「メニュー」をご自身の好きなように設定しましょう。

 

サブメニューも同じように必要に応じて、変更してください。

 

また、「メニューの項目や数」は人によって異なると思うので、削除及び置き換え作業が必要になります。

 

HTMLやCSSに慣れない初心者の方はシンプルなグローバルメニューでバックアップを必ず取り、なんどもトライ＆エラーを繰り返して、動作を確認し、変更していくことをおすすめします。

 

グローバルメニュー2段階層+ハンバーガーメニューの「CSSコード」

以下の「CSSコード」をコピペしましょう。

/* 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;
	}
}

※コピペする際には必ずバックアップを取ってください。はてなブログで採用しているテーマによってはうまく表示されない場合があります。

 

コード内に「背景色」や「文字色」などとコメントをかいているので、その部分を適宜変更することで、グローバルメニューの背景色、文字色を変更できます。

 

冒頭で紹介したシンプルなグローバルメニューで試してから、チャレンジしてみましょう。

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

f:id:redo5151:20191008223021p:plain

管理画面から、プルダウンメニューの「デザイン」を選択しましょう。

 

f:id:redo5151:20191012203252p:plain

カスタマイズ(レンチアイコン)→「｛｝デザインCSS」を選択し、
先ほど記載した「CSS用コード」をコピペして貼り付けます。

 

 以上で、設定を保存し、反映されていれば完了です。

 

「カテゴリーの数や内容、使いたい背景色や文字色」の部分だけうまく変更し、活用してもらえれば幸いです。

 

まとめ

今回は「グローバルメニュー(グローバルナビゲーション)」をスマホでみるさいに「ハンバーガーメニュー」も表示できるように対応したコードも詳しく紹介しました。

 

雑記ブログなどでカテゴリがとても多い方へおすすめなブログカスタマイズ方法になります。

 

プログラミングコードの中でも「CSS」や「HTML」は比較的簡単な部類には入るものの、普段からプログラミングに慣れていない人にとっては宇宙言語に見えるかと思います。

 

私も大学、大学院時代で「Fortran」や「C言語」を勉強していたので、今ではあまり抵抗はなくなったものの、当時はホントわからないことだらけで混乱したことを覚えています。

 

今の時代ネットにいくらでもコピペできるコードは落ちており、完全に白紙な状態からコードを書く人は少ないのが現実です。

 

私も研究室時代に扱ったプログラミングも一から書いたのは最初だけであとはいかにベースのコードを応用して自分なりのアレンジができるかがポイントです。

 

そもそもプログラミングコードを一から書いては非効率すぎるので、中身をしっかりと理解できていれば問題ないです。そのための訓練は最初のうちはもちろん必要です。

 

少しでもお役にたてれば幸いです。

 

 

・SEO対策として、グローバルメニューを追加してみましょう。
・レイアウトを制したければ「HTML」「デザインCSS」を覚えましょう。
・お手軽に「グローバルメニュー」を設置したい方は本記事を参考に。
・はてなブログProの方は携帯での設定も可能です。無料はPCのみ。

 

 

 

 

redo5151.hatenablog.com

 

redo5151.hatenablog.com

 

redo5151

広告を非表示にする
関連記事
コメントを書く