SWELLでヘッダーのカスタマイズ方法｜ロゴ画像やボタンも設置できる！

「ヘッダーのカスタマイズ方法は？」

「ヘッダーロゴ画像の推奨サイズを教えて…」

「ヘッダーにボタンを設置できる？」

この記事では、そんな方に向けて、SWELLでヘッダーのカスタマイズ方法を解説します。

ヘッダーとは…サイト上部の場所のこと

この記事を読めば、あなたも簡単に

• PC・スマホ別でヘッダーをカスタマイズ

できるようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、ユーザーにとって利便性の高いヘッダーを作ることができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

また以下の記事では、SWELL導入後にやるべき初期設定をまとめて紹介しています。

SWELLヘッダーのカスタマイズ方法

SWELLでヘッダーをカスタマイズする方法は、下記のとおりです。

ヘッダーをカスタマイズできる項目は、以下12つあります。

それぞれ詳しく解説します。

ヘッダーカラーの設定

ヘッダーの背景色・文字色をカスタマイズできます。

ヘッダーロゴの設定

ヘッダーロゴ画像の設定と画像サイズをカスタマイズできます。

設定できる画像サイズは以下のとおり。

• PCの場合…32~120px
• PC追従ヘッダー内の場合…24~48pv
• sp（スマホ）の場合…40~80px

ヘッダーロゴ画像に適したサイズは、後ほど紹介します。

ヘッダーレイアウト・デザインの設定

以下3項目でカスタマイズできます。

• ヘッダーのレイアウト（PC）
• ヘッダーのレイアウト（SP）
• ヘッダー境界線

ヘッダーのレイアウト（PC）

「ヘッダーのレイアウト（PC）」は4種類あります。

ヘッダーのレイアウト（SP）

「ヘッダーのレイアウト（SP）」は3種類あります。

ヘッダー境界線

「ヘッダー境界線」は3種類あります。

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

ヘッダーの背景を透明にするかどうかカスタマイズできます。

ヘッダーの追従設定

デバイス別でヘッダーの追従させるかどうか設定できます。

PC表示の場合、追従ヘッダーの背景不透明度もカスタマイズできます。

背景不透明度は0~1の間の数字を入力してください。

ヘッダーバーの設定

ヘッダーバーの背景色・文字色をカスタマイズできます。

ヘッダーバーが表示されない場合は、表示設定の「コンテンツが空でもボーダーとして表示する」に✔すると表示されます。

表示設定の「SNSアイコンリストを表示する」に✔すると、ヘッダーバーの右側にSNSやお問い合わせなどのアイコンが表示されます。

キャッチフレーズの設定

キャッチフレーズの設定を

• 表示しない
• ヘッダーバーに表示
• ヘッダーロゴの近くに表示

の3つから選べます。

キャッチフレーズは、PC画面のみしか表示されません。

キャッチフレーズのテキスト入力は、別途設定を行う必要があります。

＼クリックで開く／

また、「キャッチフレーズに〇〇を表示する」に✔すると、キャッチフレーズの語尾にサイトタイトルを表示させることもできます。

ヘッダーメニュー(グローバルナビ)の設定

ヘッダーメニュー（グローバルナビ）設定では、以下3つのカスタマイズが可能です。

• マウスホバーエフェクト
• ヘッダーメニューの背景色
• サブメニューの背景色

ヘッダーメニュー（グローバルナビ）に表示させたいメニュー項目を設定する方法は、下の記事で解説しています。

マウスホバーエフェクト

「マウスホバーエフェクト」は5種類あります。

カーソルをメニュー項目の上に置くとエフェクトが確認できます。

また、マウスホバーエフェクトを「ラインの出現」、「ブロックの出現」に設定した場合のみ、ホバー時に出てくるラインの色を「メインカラー」、「メインテキスト」のどちらかに設定できます。

ヘッダーメニューの背景色

「ヘッダーメニューの背景色」を

• 背景色は設定しない
• 色を指定する

から選べます。

PCではヘッダーのレイアウト（PC）が「ヘッダーナビを下に」、「ヘッダーナビを上に」の場合のみ、ヘッダーメニューの背景色の設定が有効になります。

サブメニューの背景色

「サブメニューの背景色」を2種類から選べます。

ページの背景色と被らないように設定しましょう。

ヘッダーメニュー(SP)の設定

「ヘッダーメニュー（SP）の設定」では、ヘッダーメニューをループさせるかどうか設定できます。

検索ボタンの設定

「検索ボタンの設定」では、以下の2項目でカスタマイズできます。

• 検索ボタンの表示位置（PC）
• 検索ボタンの表示設定（SP）※スマホ

検索ボタンの表示位置（PC）

PC画面で検索ボタンの表示位置を3種類から選べます。

検索ボタンの表示位置（PC）を「ヘッダーバー内のアイコンリストに表示」にした場合、ヘッダーバーの表示設定で「SNSアイコンリストを表示する」に✔を入れないと検索ボタンが表示されません。

ユーザーの利便性を上げるために、検索ボタンは必ず表示させましょう。

検索ボタンの表示設定（SP）

スマホ画面で検索ボタンの表示設定を2種類から選べます。

カスタムボタンの設定は、後ほど解説します。

メニューボタンの設定

スマ画面で表示されるメニューボタンの設定を以下2つできます。

• アイコン下に表示するテキスト
• メニューボタン背景色

アイコン下に表示するテキストは、「メニュー」「menu」「MENU」など…

メニューボタンを目立たせたい場合に、背景色を設定するといいですね。

カスタムボタンの設定

「カスタムボタンの設定」では、ヘッダーに設置したいボタンを自由にカスタマイズできます。

設定できる項目は、以下の4つです。

• アイコンクラス名
• アイコン下に表示するテキスト
• カスタムボタン背景色
• リンク先URL

アイコンクラス名

アイコンクラス名を設定することで、アイコンを表示できます。

SWELLで使えるアイコンクラス名は公式サイトで紹介されていますが、本記事でも一部抜粋して紹介します。

アイコン	クラス名	アイコン	クラス名
	icon-swell		icon-wordpress
	icon-phone		icon-mail
	icon-search		icon-cart
	icon-person		icon-download
	icon-megaphone		icon-check
	icon-home		icon-bubbles

公式：SWELLで使えるアイコンの一覧

アイコン下に表示するテキスト

アイコン下に表示するテキストを決められます。

カスタムボタン背景色

カスタムボタンの背景色を設定できます。

リンク先URL

「リンク先URL」にURLを入力すると、そのリンクへ飛ぶボタンが作れます。

検索ボタンの表示設定（SP）で「カスタムボタンにセット」を選んでいる場合は無効になります。リンク先URLを設定したい場合は、「表示しない」を選んでください。

設置するボタンは、読んでもらいたい記事だったり、電話番号やお問い合わせページもおすすめです。

リンク先URLを設定したら、アイコンクラス名やアイコン下に表示させるテキストもあわせて設定してください。

SWELLヘッダーロゴ画像について

SWELLではヘッダーにロゴ画像の設定ができます。

そこで、以下の2つについて解説します。

ヘッダーロゴ画像に適したサイズ

SWELLのヘッダーに設置するロゴ画像のおすすめなサイズは、幅180px×高さ40pxです。

理由は以下の3つです。

使用するロゴ画像のサイズが大きくなると、その分サイトの表示速度が遅くなります。

以下の表にもあるように、たった数秒でも表示速度が遅くなるだけで、離脱率が2~3倍にも跳ね上がってしまうのです。

ページの読み込み時間	離脱率
1~3秒	32%
1~5秒	90%
1~6秒	106%
1~10秒	123%

参考：Googleが2018年に発表したモバイルサイトの表示速度および直帰率に関するデータ

SWELLでは、設定できるロゴ画像の最小サイズが

• PC表示の場合…高さ32px
• スマホ表示の場合…高さ40px

です。

ここで、PC表示で設定可能なロゴ画像の最小サイズである高さ32pxにしたほうがいいのではないか？という疑問に思われる人もいるかもしれません。

もしロゴ画像のサイズを高さ32pxにすると、スマホ表示でロゴ画像が40pxまで引き延ばされてしまい、画像が粗くなる可能性もあります。

ですので、ロゴ画像の高さは40pxがおすすめです。

次は、幅についてです。

SWELL公式サイトで使われているロゴ画像のサイズは、幅1600px×高さ360pxであり、縦横比率4.4：1です。

この縦横比率に合わせて、ロゴ画像の幅を決めるのが理想です。

高さ40px×4.5＝180pxになり、おすすめなロゴ画像の幅は180pxです。

ヘッダーロゴ画像の作り方

ヘッダーに設定するロゴ画像は、デザインツール「Canva」での作成がおすすめです。

Canvaは誰でも無料で使うことができ、

• 自分の写真をデザインしたり
• テンプレート画像やイラストを使えたり

できます。

Canvaでヘッダーロゴ画像を作る方法は、下記のとおりです。

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

SWELLのヘッダーにボタンを設置する方法は、下記2つの手順で行います。

順番に詳しく解説します。

今から紹介する方法は、PC表示のときヘッダーにボタンを設置する方法です。スマホ表示でボタンの設定方法はこちら ＞

手順①：ブログパーツでボタンの作成

手順②：ウィジェットからボタンを配置

SWELLヘッダーのカスタマイズでよくある質問

ここからはSWELLのヘッダーをカスタマイズする方法でよくある質問に回答します。

SWELLヘッダーのカスタマイズ方法まとめ

今回は、SWELLでヘッダーのカスタマイズ方法を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。