【SWELL】 ヘッダーロゴ画像のサイズっていくつ？おすすめサイズと設定方法を合わせて解説！

SWELLでヘッダーロゴを作ろうと思ったら、

こんな悩みに直面していませんか？

この記事では、SWELLでのヘッダーロゴ画像のおすすめサイズ、設定方法について解説していきます

ヘッダーロゴってどこに表示されるの？

ヘッダーロゴはサイトの頭の部分、1番上のエリアに表示されます

当ブログで例えるなら、下記画像で赤く枠で囲ってあるところがヘッダーロゴになります

ヘッダーロゴの部分をクリックすると、トップページに戻る機能もあるので、ヘッダーロゴは目につきやすく、サイトのイメージを伝えやすいです

ヘッダーロゴ画像サイズはいくつがおすすめ？

ヘッダーロゴ画像サイズは、幅 1600px × 高さ 360pxがおすすめ！

ロゴ自体が大きく表示されることは少ないため、ページ表示速度を重視するならサイズを小さくするのもOK！

ただし、画像のサイズが小さすぎるとロゴが粗くなってしまうことがあるので気をつけましょう

速度重視の場合は、600px ×135pxで作るのがおすすめです

サイト表示にかかるスピードが気になる人は、PageSpeed Insightsで調べることができます

無料で素敵なロゴを作るならCanva、画像のデータ容量を軽くするならTinyPNGがおすすめ

⬆︎目次へ戻る

設定方法｜ヘッダーロゴ画像はどこから設定するの？

ヘッダーロゴを設定していない場合は、「サイト基本情報」で入力した「サイトのタイトル」が表示されます

ヘッダーロゴは、カスタマイズのヘッダーから設定することができます

「外観」＞「カスタマイズ」＞「ヘッダー」の順にクリック

そうすると以下のような項目にたどり着きます

この「ヘッダーロゴの設定」から、ヘッダーに表示されるロゴ画像に関する設定ができます！

⬆︎目次へ戻る

スポンサーリンク

ヘッダーロゴ画像を設定する

ヘッダーのロゴ画像を設定するには、「ロゴ画像の設定」の下にある「画像を選択」をクリック

「ファイルをアップロード」から画像のアップデート、または「メディアライブラリ」のアップロード済みの画像からヘッダーに表示させたいロゴ画像を選択します

ロゴ画像を選択し、右側にある「画像を編集」をクリックすると、ロゴ画像の切り抜き、編集画面になります

サイトに表示したい切り抜き領域を選択して、「切り抜き」→「更新」をクリックします

切り抜き編集を行わず、そのまま使用する場合は、右下にある「画像を選択」をクリック

そうすると、ヘッダーにロゴ画像が表示されます

⬆︎目次へ戻る

ロゴ画像の表示サイズを調整しよう！

ロゴ画像がヘッダーに表示されたとき、

と思いませんでしたか？

SWELLでは、設定されているヘッダーロゴ画像のサイズをもとに高さの数値（px）を調整することができます

また端末の画面ごとにヘッダーロゴ画像の高さを設定できるので、パソコンでは大きめ、スマホでは小さめといった設定が可能です

スマホやタブレットの追従ヘッダーのサイズは、画像サイズ（SP）と同じものになります

パソコン表示での画像サイズを調整する

パソコンで表示されるロゴ画像サイズの高さは32〜120pxの範囲で設定できます

パソコンの追従ヘッダーでの画像サイズを調整する

パソコンで表示される、スクロールしたらついてくるヘッダーのロゴ画像サイズの高さは24〜48pxの範囲で設定できます

スマホ表示での画像サイズを調整する

スマホやタブレット画面で表示される、ヘッダーロゴ画像のサイズの高さは40〜80pxの範囲で設定ができます

スマホやタブレットの追従ヘッダーのサイズはこちらの設定と同じものになります

⬆︎目次へ戻る

スポンサーリンク

ヘッダーのレイアウト・デザインの設定は何ができるの？

ヘッダーロゴが設定できたら次に、ヘッダーロゴに関わるレイアウトをしていきましょう

先ほどのヘッダーロゴの設定から下にスクロールすると、レイアウト・デザイン設定の項目があります

そこからヘッダーのレイアウトやデザインを設定することができます

ひとつひとつ詳しく解説していきます

⬆︎目次へ戻る

サイトの雰囲気が変わる？ヘッダーのレイアウト設定をしよう！

ヘッダーのレイアウト設定ではパソコンとスマホ、タブレットでロゴ画像とヘッダーメニューの並び方を設定することができます

パソコン画面でのヘッダーのレイアウト

パソコン、タブレットの横表示では、4種類からヘッダーのレイアウトを選択することができます

ヘッダーナビをロゴ横に（右寄せ）

ヘッダーナビをロゴ横に（左寄せ）

ヘッダーナビを下に

ヘッダーナビを上に

「ヘッダーナビをロゴ横に（右寄せ）」、「ヘッダーナビを下に」のレイアウトになっているサイトが多く見受けられます

スマホ画面のヘッダーのレイアウト

続いてスマホ、タブレット（縦向き）では、3種類から選択できます

ロゴ：左 / メニュー：右

ロゴ：中央 / メニュー：右

ロゴ：中央 / メニュー：左

ヘッダーのレイアウトですが、一概にコレというものはありません

⬆︎目次へ戻る

背景の透過について

「トップページでの特別設定」では、ヘッダーの背景を透明にするかどうか選択することができます

「ヘッダーの背景を透明にするかどうか」を「する」に設定すると、透過時のロゴ画像の設定項目が出てきます

このエリアの設定により、下記のようなメインビジュアルの上にヘッダーを被せるデザインが作れます

ちなみに文字色の白・黒はヘッダーナビの文字色のことを指しています

失敗例

無料で背景を透過できるロゴを作るならCanvaがおすすめ！

⬆︎目次へ戻る

ヘッダーの追従について

ページをスクロールした時に、画面上部にヘッダーを追従させるかどうかを設定できます

また、PC表示では「追従ヘッダーの背景不透明度」も設定することができます

ロゴが常に視界に入っているので、印象に残りやすいです

さらにメニューも目につきやすいので、ページの移動が楽になります

ヘッダーロゴ画像のサイズでも触れましたが、ロゴサイズが大きい場合、画面のサイズが圧迫されてしまうので記事が読みづらくなってしまいます

ただし高さがあると表示される記事の範囲が狭くなり、記事が読みづらくなってしまうので、追従させるのであれば小さめのサイズにしておきましょう

ロゴサイズが大きい場合は追従はおすすめしません

⬆︎目次へ戻る

SWELL公式サイトのヘッダーロゴの設定はこれ！

SWELL公式サイトでは以下のようなヘッダーロゴ設定になっています

ヘッダーロゴサイズ	1600px × 360px
PC表示サイズ	48px
SP表示サイズ	32px

⬆︎目次へ戻る

まとめ

以上、SWELLのヘッダーロゴ画像のサイズ、設定方法について解説しました

ヘッダーロゴの設定を変えるだけで、サイトの印象がずいぶん変わります

自分のサイトに合ったヘッダー設定を見つけて素敵なサイトを作りましょう