コピペで簡単！フルスクリーンメニュー（ハンバーガーメニュー） – SWELLカスタマイズ

2023年1月7日

こんなSWELLユーザーに読んでほしい！

PCでもハンバーガーメニューを設置したい
フルスクリーンメニューに変更したい
でも、難しいカスタマイズはムリ・・・

あらすじ

フルスクリーンメニューにあこがれて

SWELLではスマホの場合に限り、ハンバーガーボタンで開閉メニュー（ドロワーメニューともいう）が表示されます。

しかし、PC版ではこの開閉メニューが使えません。

たとえば、トップページのファーストビューでメインビジュアルを画面いっぱいに表示して、インパクトのあるデザインにしたい場合など、

できればヘッダーメニューを隠したい。でもメニューは設置したい。

って、思ったことありませんか？

デザイン性の高いサイトでよく見かける「ハンバーガーメニュー」と呼ばれる、三本線をクリックするとフルスクリーンでメニュー画面を表示するギミック。

#ヤモヲのひとりあそびの事例でも多用しているこのカスタマイズですが、当記事ではSWELLの基本設定とCSSのコピペだけで実装する方法をご紹介します。

まずは、完成形をご覧ください。

カスタマイズのポイントを簡単にまとめると、

PCでもハンバーガーボタンを常時表示

開閉メニューではなく、フルスクリーンメニューを表示

スクリプトは一切使用せずCSSのみで実装

といったカンジです。

しかも、SWELLの基本設定とCSSのコピペだけで簡単に実装できますので、興味のある方はぜひ試してみてください。

カスタマイズ方法

以下のカスタマイズ方法は、子テーマ「SWELL CHILD」を有効にしている場合を想定しています。

カスタマイズ内容をご理解いただくために、ここからはSWELLの基本設定とCSSのコピペを要点ごとに区切ってご説明しています。

最終的にはコピペするCSSをまとめていますので、めんどくさい人はすっ飛ばしちゃってください。

カスタマイズ手順

STEP

「スマホ開閉メニュー内」用のメニューを作成

基本操作でもあるので、ここでは詳しい説明は割愛します。

設定方法は以下の動画を参照してください。

「スマホ開閉メニュー内」用のメニューの作成

STEP

ヘッダーの設定

カスタマイザーからヘッダーの設定を行います。

設定方法は以下の動画を参照してください。

ヘッダーの設定

「カスタマイズ＞ヘッダー」を開き、以下の箇所を設定します。

■レイアウト・デザイン設定

ヘッダーのレイアウト(PC)：ヘッダーナビをロゴの横に（右寄せ）
ヘッダーのレイアウト(SP)：ロゴ:中央/メニュー:右
ヘッダー境界線：なし

■トップページでの特別設定

ヘッダーの背景を透明にするかどうか：する（文字：白）
※これで全画面幅になる

■ヘッダーの追従設定

ヘッダーを追従させる（PC）：チェックを外す
ヘッダーを追従させる（SP）：チェック

■ヘッダーバー設定

SNSアイコンリストを表示する：チェックを外す

■キャッチフレーズ設定

キャッチフレーズの表示位置：表示しない or ヘッダーロゴの近くに表示

■カスタムボタン設定

アイコンクラス名：「icon-search」を削除

STEP

メインビジュアルの設定

例の完成形のように、メインビジュアルをフル画面で表示する設定を行います。

設定方法は以下の動画を参照してください。

メインビジュアルの設定

「カスタマイズ＞トップページ＞メインビジュアル」を開き、以下の箇所を設定します。

■表示設定

メインビジュアルの高さ設定：ウインドウサイズにフィットさせる
フィルター処理：なし　※任意
オーバレイカラーの不透明度：0 　※任意

STEP

ヘッダーの設定（style.css）

ここからは、CSSのコピペ作業です。

以降コピペする先は、「ダッシュボード＞外観＞テーマファイルエディタ」から「スタイルシート（style.css）」を選択しペーストします。

まず、ヘッダーを固定表示・画面幅に広げ、ヘッダーメニューを非表示にします。

以下の動画を参照してください。

ヘッダーの設定（style.css）

動画では以下のCSSをコピペしています。

 /* ヘッダーを固定 */
 @media (min-width: 960px) {
  .l-header {
    position: fixed!important;
    background: transparent;
  }
  .p-breadcrumb {
    margin-top: calc(var(--logo_size_pc) + 32px);
  }
}
/* 下層ページのヘッダー幅をトップに合わせる */
.l-header .l-container {
  max-width: 100%!important;
}
/* ヘッダーメニューを非表示 */
nav#gnav {
  display: none;
}

STEP

PCでハンバーガーボタンを表示させる設定　style.css

PCでハンバーガーボタン（三本線）を表示させるためのCSSをコピペします。
※スマホはデフォルトのまま

以下の動画を参照してください。

PCでハンバーガーボタンを表示させる設定（style.css）

動画では以下のCSSをコピペしています。

.l-header__menuBtn.sp_ {
  display: block!important; /* ハンバーガーボタンを表示 */
}
.-series .l-header__inner {
  align-items: center;  /* ハンバーガーボタンの上下位置調整 */
}
.p-spMenu {
  display: block; /* 開閉メニューを有効 */
}

STEP

開閉メニューのフルスクリーン設定

デフォルトの開閉メニューをフルスクリーンメニューに変更します。

以下の動画を参照してください。

開閉メニューのフルスクリーン設定（style.css）

動画では以下のCSSをコピペしています。

.p-spMenu__inner {
	--color_menu_text: #000000; /* メニューテキストの色 */
	--color_menu_bg: rgba(255 255 255 / 85%); /* 開閉メニューの背景色 */
  width: 100vw;
}
.p-spMenu__overlay {
  background: transparent;
}
.-right .p-spMenu__inner {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 0;
  transition: opacity .45s;
}
[data-spmenu=opened] .p-spMenu__inner {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
.p-spMenu__inner::before {
  background: var(--color_menu_bg);
  opacity: 1;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

STEP

フルスクリーンメニュー内の設定

フルスクリーンメニューにあうデザインに変更します。

以下の動画を参照してください。

フルスクリーンメニュー内の設定（style.css）

動画では以下のCSSをコピペしています。

.p-spMenu__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--color_menu_text);
}
@media (max-width: 599px) {
  .p-spMenu__body {
    font-size: 5vw;
  }
}
/* 開閉メニュー内のタイトルを非表示 */
.c-widget__title.-spmenu {
  display: none;  
}
/* メニューリンクの設定 */
.c-spnav a {
  border-bottom: none;
}
.c-gnav .sub-menu a:before, .c-listMenu a:before {
  content: none;
}
.p-spMenu__inner a {
  padding: 1em 0;
  text-align: center;
  transition: transform .5s;
}
.p-spMenu__inner a:hover {
  padding-left: inherit;
  padding-right: inherit;
  background-color: inherit;
  transform: scale(1.1)
}
/* 閉じるボタンの設定 */
.c-iconBtn {
  color: var(--color_menu_text);
}
@media (min-width: 960px) {
  .-right .p-spMenu__closeBtn {
    right: var(--swl-pad_container,0);
    height: calc(var(--logo_size_pc) + 32px);
  }
}

STEP

完成

これで基本カスタマイズは完成です。

フルスクリーンメニューの完成

フルスクリーンメニュー内の色を変更したい場合は、次のSTEPを参照してください。

STEP

フルスクリーンメニュー内の色変更

メニューテキストの色と背景色を変更します。

以下の動画を参照してください。

フルスクリーンメニュー内の色変更（style.css）

動画では以下の箇所を変更しています。

.p-spMenu__inner {
	--color_menu_text: #000000; /* メニューテキストの色 */
	--color_menu_bg: rgba(255 255 255 / 85%); /* フルスクリーンメニューの背景色 */
  width: 100vw;
}

メニューテキストの色と背景色のカラーコードを設定します。

コピペするCSSまとめ

以下に上記のCSSをまとめていますので、これをコピペしてください。

/* ------------------------------------------------------
 * ヘッダーの設定
 * ------------------------------------------------------ */
 /* ヘッダーを固定 */
 @media (min-width: 960px) {
  .l-header {
    position: fixed!important;
    background: transparent;
  }
  .p-breadcrumb {
    margin-top: calc(var(--logo_size_pc) + 32px);
  }
}
/* 下層ページのヘッダー幅をトップに合わせる */
.l-header .l-container {
  max-width: 100%!important;
}
/* ヘッダーメニューを非表示 */
nav#gnav {
  display: none;
}
/* ------------------------------------------------------
 * PCでハンバーガーボタンを表示させる設定 
 * ------------------------------------------------------ */
.l-header__menuBtn.sp_ {
  display: block!important; /* ハンバーガーボタンを表示 */
}
.-series .l-header__inner {
  align-items: center;  /* ハンバーガーボタンの上下位置調整 */
}
.p-spMenu {
  display: block; /* 開閉メニューを有効 */
}
/* ------------------------------------------------------
 * 開閉メニューのフルスクリーン設定
 * ------------------------------------------------------ */
.p-spMenu__inner {
	--color_menu_text: #000000; /* メニューテキストの色 */
	--color_menu_bg: rgba(255 255 255 / 85%); /* フルスクリーンメニューの背景色 */
  width: 100vw;
}
.p-spMenu__overlay {
  background: transparent;
}
.-right .p-spMenu__inner {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 0;
  transition: opacity .45s;
}
[data-spmenu=opened] .p-spMenu__inner {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
.p-spMenu__inner::before {
  background: var(--color_menu_bg);
  opacity: 1;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
/* ------------------------------------------------------
 * フルスクリーンメニュー内の設定
 * ------------------------------------------------------ */
.p-spMenu__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24px;  /* PCのフォントサイズ */
  font-weight: 700;
  color: var(--color_menu_text);
}
@media (max-width: 599px) {
  .p-spMenu__body {
    font-size: 5vw; /* スマホのフォントサイズ */
  }
}
/* 開閉メニュー内のタイトルを非表示 */
.c-widget__title.-spmenu {
  display: none;  
}
/* メニューリンクの設定 */
.c-spnav a {
  border-bottom: none;
}
.c-gnav .sub-menu a:before, .c-listMenu a:before {
  content: none;
}
.p-spMenu__inner a {
  padding: 1em 0;
  text-align: center;
  transition: transform .5s;
}
.p-spMenu__inner a:hover {
  padding-left: inherit;
  padding-right: inherit;
  background-color: inherit;
  transform: scale(1.1)
}
/* 閉じるボタンの設定 */
.c-iconBtn {
  color: var(--color_menu_text);
}
@media (min-width: 960px) {
  .-right .p-spMenu__closeBtn {
    right: var(--swl-pad_container,0);
    height: calc(var(--logo_size_pc) + 32px);
  }
}

いかがでしたでしょうか。

スクリプトでごりごりカスタマイズしなくても、SWELLの基本設定とCSSのみで実装できるフルスクリーンメニューのカスタマイズ方法をご紹介しました。

ではでは。