SWELLを使っていると、グローバルナビ（ヘッダーメニュー）のフォントが少し小さいな！と感じることがあります。こちらを大きくする方法です。

本記事は、2024/5/10時点（バージョン: 2.10.0）のSWELLを対象としています。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL のグローバルナビのフォントの大きさ

SWELLはデザイン性が高いとても素晴らしいテーマですが、メニューのフォントが小さいと感じることがあります。

メニュー例

メニューのフォントはCSSで強制的に指定して変えることが可能です、以下がフォントを大きくしたサンプルです。

フォント（およびドロップダウンした際のサブメニューのフォント）の大きさを調整しています。

SWELL のグローバルナビのフォントの変え方

グローバルナビ（通常）のフォントの変え方

SWELLのグローバルナビ（通常表示）のフォントの変え方です。

WordPress の管理画面から「外観」→「追加CSS」を選択します。

入力するCSSは下記です。

/* 通常のグローバルナビ */
#header #gnav .menu-item .ttl {
	/* フォントを大きく */
	font-size : 24px;
	
	/* フォント名 */
	font-family : 'Monotype Corsiva', cursive, sans-serif;;
}

#header #gnav .menu-item .desc {
	/* フォントを大きく */
	font-size : 24px;
	
	/* フォント名 */
	font-family : 'Monotype Corsiva', cursive, sans-serif;;
}

#header #gnav li:hover {
	/* マウスオーバーで色を変える */
  color : #833C0B;
}

追従ヘッダーのフォントの変え方

SWELLには「追従ヘッダー」という、スクロールしてもついてい来るヘッダーがあります。

追従ヘッダーのメニューのフォントも一緒に変えたほうがバランスが良いですね。

WordPress の管理画面から「外観」→「追加CSS」を選択します。

入力するCSSは下記です。

/* 追従ヘッダー */
#fix_header .c-gnav .menu-item .ttl {
	/* フォントを大きく */
	font-size : 24px !important;
	
	/* フォント名 */
	font-family : 'Monotype Corsiva', cursive, sans-serif;;
}

#fix_header .c-gnav .menu-item .desc {
	/* フォントを大きく */
	font-size : 16px !important;
	
	/* フォント名 */
	font-family : 'Monotype Corsiva', cursive, sans-serif;;
}

#fix_header .c-gnav li:hover {
	/* マウスオーバーで色を変える */
  color : #833C0B;
}

完成です。

まとめ：SWELL のグローバルナビのフォントの大きさ

SWELLテーマのグローバルナビのフォント変更の方法です。

うまく利用して、より良いサイト、よりよいページを作ってくださいね。

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

ブログをデザインしていると一度は作ってみたいと思うデザインの一つに「メガメニュー」があります。

グローバルナビ（ヘッダーメニュー）上でマウスをホバーすると通常のテキストのサブメニューではなく画像などを使った表現力の大きいポップアップで表示するメニューです。

本記事の情報は SWELL（バージョン: 2.7.6.2）にて確認しています。今後のバージョンアップなどで動作が変わる可能性があります。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

メガメニュー（Mega Menu）とは

企業系のサイト、特にファッション系などでよく利用されることが多いです。上部のメニューで表示されるサブメニューの表示を拡大し、画像などを利用して視覚的に読者にメニューを見せる手法でインパクトが大きいですね。

上記のイメージでは、「メニュー１」上にマウスが来た場合、オレンジ枠で括ったポップアップを画面上に表示しています。実際の動きは次の動画でご確認いただけます。

メニュー１では画像を並べて、メニュー２では動画を並べています。（サンプルです）

SWELLでメガメニューを作る方法

実際に SWELL を使ってメガメニューを作る方法です。

■ Step.1 ブログパーツでポップアップ部分を作る

サブメニューとしてポップアップする部分はブログパーツで作ります。

WordPress の管理画面から「ブログパーツ」を選択して、ブログパーツを作ります。「呼び出しコード」は後ほど利用するのでメモっておきます。

ブログパーツの中身は自由に作れます。カラムブロックなどを使って画像を並べると見栄えがいいですね。

■ Step.2 メニューを作る

メニューを作っていきます。親メニュー（画面上に常に表示されている部分）を普通に作り、サブメニューにブログパーツを割り当てます。また、PC用とスマホ用の両方を作ります。

WordPress の管理画面から「外観」→「メニュー」を選択して、メニューを作ります。

■ Step.3 PC用の親メニュー

PC用の親メニューを作ります。メニューにクラス名を指定します。

PC用の親メニュー（画面上に常に表示されている部分）を作ります。

• 「CSS class（オプション）」に任意のクラス名を指定する

■ Step.4 PC用のサブメニュー

PC用のサブメニューを作ります。ブログパーツを割り当てます。

PC用のサブメニュー（メガメニューになる部分）を作ります。

• 「ナビゲーションラベル」にブログパーツの「呼び出しコード」を指定する

ブログパーツの「呼び出しコード」の前後にHTMLタグ A と SPAN を付与して指定します（以下参照）。

</span></a>（呼び出しコード）<a><span>

※前方が閉じるタグ、後方が始めるタグになります。

<a><span>メニューの表示テキスト</span></a>

<a><span></span></a>（呼び出しコード）<a><span></span></a>

■ Step.5 スマホ用の親メニュー

スマホ用の親メニューを作ります。メニューにクラス名を指定します。

スマホ用の親メニュー（画面上に常に表示されている部分）を作ります。

• 「CSS class（オプション）」に任意のクラス名を指定する

■ Step.6 スマホ用のサブメニュー

スマホ用のサブメニューを作ります。

スマホ用のサブメニューを作ります。特別な設定や操作は必要ありません。通常の作成方法で作ります。

■ Step.7 CSSでPCとスマホで表示を切り替える

CSSを利用して、PC用とスマホ用のメニューを切り替えます。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加 CSS」を選択します。

• CSSを適用する

CSSは以下のコードを適用します。

@media (max-width: 960px) {
    .my-parent-menu-pc {
       display:none;
    }   
}
@media (min-width: 961px) {
    .my-parent-menu-sp {
       display:none;
    }   
}

ポイントを解説します。

• 「@media (max-width: 960px) 」と「@media (min-width: 961px)」でPCとスマホで表示を切り替えています

■ Step.8 CSSでメガメニュー用に調整する

CSSを利用して、メアメニューの見た目や動きを整えていきます。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加 CSS」を選択します。

• CSSを適用する

CSSは以下のコードを適用します。

.my-parent-menu-pc {
  position : unset !important;
}
.my-parent-menu-pc .sub-menu {
  width: calc(100vw - 16px);
  border : 10px solid #FA8072;
}
.my-parent-menu-pc .sub-menu a {
  padding: 0em;
}
.my-parent-menu-pc .sub-menu a:before {
  display : none;
}
.my-parent-menu-pc .sub-menu a:hover {
  background-color : unset;
}
.my-parent-menu-pc .sub-menu .ttl {
  left: 0 !important;
}

ポイントを解説します。

• 「my-parent-menu-pc」クラス（PC用に作ったメニュー）で「position : unset !important;」を指定して位置の指定を初期化します。
• PC用のメニューの「sub-menu」に対して、横幅を「width: calc(100vw – 16px);」で指定します
• 「border : 10px solid #FA8072;」で枠線を 10px 桃色で指定します。

• 「sub-menu」の「a」タグに対して、padding をキャンセルします

• 「.sub-menu a:before」を非表示にします

• 「.sub-menu a:hover」の背景色をクリアします

• 「.sub-menu .ttl」の横移動を「left: 0 !important;」でクリアします

完成です。

まとめ：グローバルナビに横幅一杯のメガメニューを作る方法

メガメニューはインパクトもあり、読者にとってもわかりやすい工夫のため、ぜひ使ってみたいデザインです。しかし、作成は意外と難しい。メガメニュー用のプラグインを使い方法や、メニューを１から自作する方法もありますが、大変です。

本記事では、SWELL を利用した場合に比較的簡単にメガメニューを作れる方法を解説しました。ブログパーツをサブメニューの「ナビゲーションラベル」に設定することでメガメニューを呼び出せます。多少のCSSでの表示調整を行うことでメガメニューを利用することができます。

いろいろな表現を工夫して、ぜひ、おしゃれなサイトを作ってくださいね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

お店のサイトなどでは電話番号を読者がわかりやすい場所に配置したいですね。

SWELLではヘッダーの中に電話番号（や、お問合せ）ボタンを配置することができます。

本記事の情報は SWELL（バージョン: 2.7.6.2）にて確認しています。今後のバージョンアップなどで動作が変わる可能性があります。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

電話番号ボタンを配置したサンプル

飲食店のサイトや美容院など特にお店のサイトでよく利用されることが多いです。上部のヘッダーの中（右側）に電話番号ボタンやメールお問合せボタンを配置します。

またボタンを複数個（電話番号ボタン＋お問合せボタンなど）を並べることもできます。

電話でのお問合せと、メールでのお問合せの両方で受け付ける場合などに便利ですね。

ヘッダーにボタンを配置する方法

実際にボタンを配置してみましょう。

■ Step.1 ブログパーツでボタンを作る

ブログパーツを使ってボタンを作ります。

WordPress の管理画面から「ブログパーツ」を選択して、ブログパーツを作ります。「呼び出しコード」は後ほど利用するのでメモっておきます。

「SWELL ボタン」ブロックを使って電話番号ボタンを作ります。アイコンは、右側のブロックの設定から「アイコン選択」で電話番後やメールなどのアイコンを選ぶことができます。

電話番号をリンクとして設定する場合は、「tel:」の後に「電話番号」を入力します。

tel:090-1234-5678

「tel:」を使うことでスマホなどでクリックした場合に自動的に電話アプリと連携します。

■ Step.2 ヘッダー内部にブログパーツを設定する

作成したブログパーツをヘッダー内部に設定します。

WordPress の管理画面から「外観」→「ウジェット」を選択します。

• 「ヘッダー内部」に「テキストウジェット」を設定する
• 「テキスト」タブに、ブログパーツの「呼び出しコード」を入力する

右上に電話番号ボタンが表示されていれば、完成です。

複数個のボタンを並べる方法

すこしの工夫で複数個のボタンを並べることも可能です。実際に複数個ボタンを配置してみましょう。

■ Step.1 ブログパーツで複数個ボタンを作る

ブログパーツを使ってボタンを作ります。

「カラムブロック」を「50 / 50」で配置します。

各々のカラムに「SWELL ボタン」ブロックを配置します。

■ Step.2 ヘッダー内部にブログパーツを設定する

作成したブログパーツをヘッダー内部に設定します。

WordPress の管理画面から「外観」→「ウジェット」を選択します。

• 「ヘッダー内部」に「テキストウジェット」を設定する
• 「テキスト」タブに、ブログパーツの「呼び出しコード」を入力する

ボタンを複数個並べると、ボタン内部のテキスト（主に電話番号）が改行する場合があります。
次の工程で改行を禁止します。

■ Step.3 ボタン内部の改行を禁止する

ボタン内部の改行禁止は、CSS を使って設定します。

クラス名の設定

ブログパーツで作成した「SWELL ボタン」に対して、改行させたくないボタンの「追加 CSS クラス」に、任意のクラス名を入力します。

CSSの設定

WordPress の管理画面から「カスタマイズ」→「追加 CSS」を選択します。

• CSS を追加する

追加する CSS は以下です。

.my-button-nobr{
  white-space : nowrap;
}

先ほどボタンに設定したクラス（例：.my-button-nobr）に対して改行禁止「white-space : nowrap;」を指定しています。

右上のボタンで改行が修正されていれば成功です。

まとめ：電話番号やお問合せボタンを配置する方法

お店のサイトなどでは電話番号を読者がわかりやすい場所に配置したいですね。

SWELLではブログパーツでボタンを作成し、ヘッダーの中に埋め込むことで、電話番号（や、お問合せ）ボタンを配置することができます。

複数個のボタンを配置した場合にボタン内のテキストが改行される場合は、CSSを使って改行禁止を設定することで回避が可能です。いろいろな表現を工夫して、ぜひ、おしゃれなサイトを作ってくださいね。

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

WordPressを使う上で、テーマに合わせて使いやすいメニューを作成することができます。

「ヘッダーメニュー（グローバルナビ）」とは、ページ上部に表示されるカテゴリメニューのようなもので、ユーザーがサイト内を簡単に移動できるようにするためのものです。

本記事では、WordPress のテーマ「SWELL」を用いて簡単にメニューを作成する方法について解説します。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

メニューを作る方法

■ Step.1 「メニュー」 カスタマイズ画面を表示する

WordPress の管理画面から、「外観」 → 「メニュー」 を選択します。

• メニュー名を指定
• 「グローバルナビ」をチェック
• 「メニューを作成」ボタンをクリック

■ Step.2 「説明」を表示する

「表示オプション」 をクリックし 「説明」 をチェックします。

■ Step.3 「HOME」 メニューを作る

「HOME」 メニューとは、「トップページへのリンク」です。（必須ではないので特に無くても問題ありません）

常に「トップページに戻るボタン」を画面上の 目につくところに配置しておくことは直帰率の改善に有効です。

• カスタムリンクを指定する
• URL にトップページの URL を指定
• リンク文字列を入力（ 例：”HOME” ）

「メニューに追加」 をクリックして、メニューを追加します。

■ Step.4 メニュー下のサブタイトルを追記（表示）する

メニュー下に小さいフォントで付記文字列を追加表示します。

• メニュー項目「HOME」を開く
• 説明欄に任意の文字列を追記

■ Step.5 「カテゴリー」 をメニューに追加する

• 「カテゴリー」を選ぶ
• 「すべて表示」 から、メニューに入れたいカテゴリをチェックする
• 「メニューに追加」 をクリックする

カテゴリーメニューを追加後、必要に応じて説明欄にサブタイトルを追記（表示）します。

■ Step.6 順番を調整する

右側のメニューをドラッグして上下を入れ替えます。

「メニューを保存」 をクリックして完成です！

メニューの各設定（デザイン）

WordPress の管理画面から、「外観」 → 「ヘッダー」 → 「ヘッダーメニュー（グローバルナビ）設定」を選択します。

まとめ：ヘッダーメニュー（グローバルナビ）の作り方と設定方法

WordPress で作成したサイトでは「メニュー」を作ることが多いです。メニューを作る方法です。

• WordPress の管理画面から、「外観」 → 「メニュー」 で作成する
• 特定のリンクに遷移する（例：HOME に戻る）、「カテゴリ」リンクなどを設置できる
• メニューの背景色は WordPress 管理画面上から設定する

SWELLでナイスなデザインのブログを作ってくださいね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

SWELLでは、初期状態ではヘッダー（サイトの上の方）にバーが出ます。キャッチフレーズとSNSアイコンを表示します。

ヘッダーバーの表示を消す方法です。（SWELLの設定で変更できます）

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL のヘッダーバー

SWELLのヘッダーバーは、サイト上部に出るバーです。

ヘッダーバーは上部に一本「線」が入りサイトにメリハリが出るデザインになります。

SWELL のヘッダーバーを消す方法

ヘッダーバーを消す設定

WordPress の管理画面から「外観」→「カスタマイズ」→「ヘッダー」を選択します。

• 「SNSアイコンリストを表示する」のチェックを外す
• 「キャッチフレーズの表示位置」に「表示しない」を設定する

上記２点を設定することでヘッダーバーの表示が消えます。

コンテンツが無くてもヘッダーバーを表示する

「キャッチフレーズ」「SNSアイコン」の表示は行わずヘッダーバーだけを表示することができます。

• 「コンテンツが空でもボーダーとして表示する」をチェックする

上記を設定することでヘッダーバー（高さが細い）を表示します。

まとめ：SWELL のヘッダーバーを消す方法

SWELL のヘッダーバーを消す場合は、「外観」→「カスタマイズ」→「ヘッダー」にて設定します。

また、線だけ（高さが細いヘッダーバー）を表示することもできます。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記