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

当ページのリンクには広告が含まれています。

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

ヘッダーロゴ画像のサイズっていくつにしたらいいの?

ヘッダーロゴの設定方法がよくわからない!

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

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

目次

スポンサーリンク

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

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

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

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

ななこ

どんなサイトなのかヘッダーロゴから伝えることができるよっ

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

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

ななこ

このサイズは、SWELL公式サイトで使われているサイズだよ

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

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

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

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

ロゴ画像を作成するときの注意点
  • 画像形式は高画質で透過などができるPNG形式にする
  • 通常色とホワイト色の2種類を用意しておく → 背景の透過についてで使用するため
  • データの重さは1枚あたり100キロバイト以下が理想
ななこ

ロゴ画像のサイズが分かったら、素敵なロゴを作ろうっ!

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

⬆︎目次へ戻る

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

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

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

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

ななこ

ホーム画面、上にあるカスタマイズから行くこともできるよ!

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

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

⬆︎目次へ戻る

スポンサーリンク

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

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

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

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

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

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

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

⬆︎目次へ戻る

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

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

あれ、思ったよりロゴ画像が大きい or 小さいかも…

と思いませんでしたか?

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

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

  • 画像サイズ(PC): パソコン画面で表示されるヘッダーロゴ画像のサイズ
  • 画像サイズ(PC追従ヘッダー): パソコンで表示される、スクロールしたらついてくるヘッダーロゴ画像のサイズ
  • 画像サイズ(SP): スマホやタブレット画面で表示されるヘッダーロゴ画像のサイズ

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

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

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

ロゴ画像高さ:32px
ロゴ画像高さ:120px

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

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

ロゴ画像の高さ:24px
ロゴ画像の高さ:48px

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

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

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

ロゴ画像の高さ:40px
ロゴ画像の高さ:80px

⬆︎目次へ戻る

スポンサーリンク

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

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

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

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

  • ヘッダーのレイアウト設定
  • 背景の透過設定
  • ヘッダーの追従設定

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

⬆︎目次へ戻る

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

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

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

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

ななこ

それぞれの選択によってどのような表示になるのか見ていくよっ

ヘッダーナビをロゴ横に(右寄せ)

ロゴが左端、ヘッダーメニューが右端に寄ります

ヘッダーナビをロゴ横に(左寄せ)

ロゴが左端、ヘッダーメニューも左側に寄ります

ヘッダーナビを下に

ロゴが上、ヘッダーメニューが下の並びになります

ヘッダーナビを上に

ヘッダーメニュが上、ロゴが下の並びになります

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

ななこ

多いということは、それだけ見やすいってことだよねっ

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

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

ななこ

それぞれの選択によってどのような表示になるのか見ていくよっ

ロゴ:左 / メニュー:右

ロゴが左、右が検索とメニューになります

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

ロゴが中央、右がメニューと左が検索になります

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

ロゴが中央、右が検索とメニューになります

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

ななこ

上記を参考に自分のサイトにあったレイアウトを選ぼうっ

⬆︎目次へ戻る

背景の透過について

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

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

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

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

ななこ

一気にトップページのオシャレ度がアップするよっ!

背景を透過するときの注意点
  • 画像形式は高画質で透過などができるPNG形式にする
  • 背景透過用の画像は、事前に背景を透過・透明にしておく

失敗例

背景が透過できていない例:ロゴ画像の背景が白い
ななこ

PNG形式背景を透過の設定にしておかないと、キレイに表示されないよっ

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

⬆︎目次へ戻る

ヘッダーの追従について

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

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

追従のメリット
  • ブログの印象が残りやすくなる
  • 読者目線、ページの移動が楽になる

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

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

追従のデメリット
  • 画面が圧迫される
  • 記事が読みづらくなる

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

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

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

⬆︎目次へ戻る

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

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

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

⬆︎目次へ戻る

まとめ

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

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

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

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

旦那と2人で東京から山梨へ移住
たくさんの山に囲まれた環境で、キャンプや温泉、山登りなど山梨ライフを満喫中☺︎

メインは山梨のキャンプ場や温泉について・スキマ時間で始めたUber Eats配達員のことを発信しています
また雑記も書いています

アウトドア好き夫婦の日常を発信中

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

目次