MENU
メンバー限定サイト
  1. ホーム
  2. css
  3. CSS「ハンバーガーメニューのデザイン応用編」

CSS「ハンバーガーメニューのデザイン応用編」

css

こちらのカスタマイズはWordPressテーマ「SWELL」を使っている場合を前提として説明しています。

ハンバーガーメニュー（正式名称：スマホ開閉メニュー）を自分好みにカスタマイズする方法をお伝えします。
実際の完成見本はこちら↓

YouTubeで見る

STEP

STEP
ナビメニュー用背景を作る
STEP
ブログパーツを作る
  • ナビメニュー
  • SNSアイコン
  • CTAボタン
STEP
ウィジェットにブログパーツを設定
STEP
追加CSSにコピペする
目次

STEP1　ナビメニュー用背景を作る

まず、背景にしたい画像をPhotoshopなどで作成します。

POINT

  • 画像は背景透過にする
  • 使用画像は透明度を下げる等してやや薄めに作る
  • 画像の横幅は1080px、縦幅は適宜（見本は1760pxで作成）

STEP2　ブログパーツを作る

見本サイトの場合だと３つのブログパーツを用意しています。

  • ナビメニュー
  • SNSアイコン
  • CTAボタン

※CTAとはCall To Action(コール トゥ アクション)の略で、「行動喚起」のことです。簡単に言うと、今回の場合はお申し込みボタンです。

「ブログパーツ」→「新規投稿を追加」で作成します。
タイトル名は自分にわかるものなら何でも大丈夫です。

ナビメニュー

こちらを作っていきます。
まず、「フルワイドブロック」を出し、背景画像にSTEP1で作った画像を設定します。

フルワイドブロックの中に「リンクリスト」を呼び出します。

（↑今この状態）

デフォルトではアイコンが出てきているので、このアイコンを削除します。

右のエディターで編集

  • スタイル：「デフォルト」
  • アイコン設定：「なし」
  • カラー：ホバーした時のカラーを設定

文字の中央揃えは後ほどCSSで設定します。

SNSアイコン

こちらのブログパーツを作っていきます。

ここでは、「インライン画像」を使って挿入しています。
（2列カラムでも大丈夫ですが、より細かいサイズや余白設定をするためにインライン画像を使っています）

「インライン画像」で挿入した画像に、遷移させたいURLを被リンクさせます。

アイコンは各社の公式サイトからダウンロードしてください。
使用規定などは各自の責任でご確認ください。

Instagramロゴ→こちら
Xロゴ→こちら

CTAボタン

ここは至ってシンプルです。

ご自身が好きなようにお問い合わせを作ってください。

ちなみに、メールアドレスをクリックするとメールにつながるようにする設定は上の画像のようにリンク欄に

「mailto:〜〜〜（アドレス）」

と入力すると設定できます。

補足

電話番号の被リンクの場合は

「tel:〜〜（電話番号）」

で、入力した電話番号にワンクリックで荷電することができるので覚えておくと便利です。

STEP3 ウィジェットにブログパーツを設定

「外観」→「ウィジェット」を開き
「スマホ開閉メニュー下」の中に「カスタムHTML」をドラッグ&ドロップし、3つ用意する。
（今回の場合は①ナビメニュー、②SNSアイコン、③CTAボタンの3つのブログパーツを使うので「カスタムHTMLを３つ用意しました。ブログパーツの個数に合わせて用意してください。）

それぞれのカスタムHTMLの「内容」にブログパーツのショートコードをコピペします。
表示させたい順番でブログパーツを入れていきましょう。

「タイトル」は空欄にします。

ブログパーツのショートコードは、ブログパーツ一覧のここに表示されています。

STEP4 追加CSSにコピペする

準備

CSSをちゃんと反映できるよう、カスタマイズをデフォルトに戻します。

「カスタマイズ」→「サイト全体設定」→「スマホ開閉メニュー」に進みます。
文字色：任意
背景の不透明度：1
メニュー展開時のオーバーレイカラー：０
メインメニュー上に表示するタイトル：削除（なし）

「カスタマイズ」→「ヘッダー」に進みます。
アイコン下に表示するテキスト：なし

CSSコピペ

「外観」→「カスタマイズ」→「追加CSS」に、以下のコードを全てコピペします。

/**ハンバーガーメニュー**/
/* メニューアイコン（デフォルト時） */
.-menuBtn .c-iconBtn__icon {
	width: 24px;
	height: 2px;
	background-color: #333;
	display: grid;
	place-items: center;
	transition: transform .3s;
	
	&::before,
	&::after {
		grid-area: 1 / 1;
		content: '';
		display: block;
		inset: 0;
		width: 24px;
		height: 2px;
		background-color: #333;
		transition: transform .3s;
	}
	
	&::before {
		transform: translateY(-8px);
	}
	
	&::after {
		transform: translateY(8px);
	}
}

/* メニューアイコン（オープン時） */
[data-spmenu=opened] {
	
	.-menuBtn .c-iconBtn__icon::before {
			transform: rotate(45deg);
	}
	
	.-menuBtn .c-iconBtn__icon {
		background-color: transparent;
	}
	
	.-menuBtn .c-iconBtn__icon::after {
		transform: rotate(-45deg);
	}
}

/* ボタンラベル */
.l-header__menuBtn .c-iconBtn::after,
.p-spMenu__closeBtn .c-iconBtn::after {
	font-size: 10px;
	line-height: 10px;
	transform: translateY(12px);
}

/* ボタンラベル（開くボタン） */
.l-header__menuBtn .c-iconBtn::after {
/* 	content: 'MENU'; */
}

/* ボタンラベル（閉じるボタン） */
.p-spMenu__closeBtn .c-iconBtn::after {
/* 	content: 'CLOSE'; */
}

/* メニュー */
.p-spMenu__inner {
  width: 100%;
  height: 100%;
  transform: translateX(0)!important;
  opacity: 0;
  transition: opacity .5s ease-out!important;
}

/* メニュー（オープン時） */
[data-spmenu="opened"] .p-spMenu__inner {
  opacity: 1;
}

/* 背景色をぼかす */
.p-spMenu__inner::before {
	background: rgba(255, 255, 255, .8);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

/* メニューをフェードイン */
.p-spMenu__body {
	opacity: 0;
	transform: translateY(20px);
}

[data-spmenu="opened"] .p-spMenu__body {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1s ease-in, transform .7s ease-out;
}

/* 既存のメニューを削除 */
.c-widget__title.-spmenu,
.p-spMenu__nav {
  display:none;
}

/* リンクリストメニュー余白 */
.p-spMenu__body .swell-block-linkList {
	gap: 2em;
}

/* リンクリストメニュー中央寄せ */
.p-spMenu__body .swell-block-linkList__text {
	margin-inline: auto;
css

関連記事

目次