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の範囲で設定できます




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




スマホ表示での画像サイズを調整する
スマホやタブレット画面で表示される、ヘッダーロゴ画像のサイズの高さは40〜80pxの範囲で設定ができます
スマホやタブレットの追従ヘッダーのサイズはこちらの設定と同じものになります




スポンサーリンク
ヘッダーのレイアウト・デザインの設定は何ができるの?
ヘッダーロゴが設定できたら次に、ヘッダーロゴに関わるレイアウトをしていきましょう
先ほどのヘッダーロゴの設定から下にスクロールすると、レイアウト・デザイン設定の項目があります


そこからヘッダーのレイアウトやデザインを設定することができます
- ヘッダーのレイアウト設定
- 背景の透過設定
- ヘッダーの追従設定
ひとつひとつ詳しく解説していきます
サイトの雰囲気が変わる?ヘッダーのレイアウト設定をしよう!
ヘッダーのレイアウト設定ではパソコンとスマホ、タブレットでロゴ画像とヘッダーメニューの並び方を設定することができます


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





それぞれの選択によってどのような表示になるのか見ていくよっ
ヘッダーナビをロゴ横に(右寄せ)


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


ヘッダーナビを下に


ヘッダーナビを上に


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



多いということは、それだけ見やすいってことだよねっ
スマホ画面のヘッダーのレイアウト
続いてスマホ、タブレット(縦向き)では、3種類から選択できます





それぞれの選択によってどのような表示になるのか見ていくよっ
ロゴ:左 / メニュー:右


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


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


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



上記を参考に自分のサイトにあったレイアウトを選ぼうっ
背景の透過について
「トップページでの特別設定」では、ヘッダーの背景を透明にするかどうか選択することができます


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


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


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



一気にトップページのオシャレ度がアップするよっ!
- 画像形式は高画質で透過などができるPNG形式にする
- 背景透過用の画像は、事前に背景を透過・透明にしておく
失敗例





PNG形式で背景を透過の設定にしておかないと、キレイに表示されないよっ
無料で背景を透過できるロゴを作るならCanvaがおすすめ!
ヘッダーの追従について
ページをスクロールした時に、画面上部にヘッダーを追従させるかどうかを設定できます


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


- ブログの印象が残りやすくなる
- 読者目線、ページの移動が楽になる
ロゴが常に視界に入っているので、印象に残りやすいです
さらにメニューも目につきやすいので、ページの移動が楽になります
- 画面が圧迫される
- 記事が読みづらくなる
ヘッダーロゴ画像のサイズでも触れましたが、ロゴサイズが大きい場合、画面のサイズが圧迫されてしまうので記事が読みづらくなってしまいます
ただし高さがあると表示される記事の範囲が狭くなり、記事が読みづらくなってしまうので、追従させるのであれば小さめのサイズにしておきましょう
ロゴサイズが大きい場合は追従はおすすめしません
SWELL公式サイトのヘッダーロゴの設定はこれ!
SWELL公式サイトでは以下のようなヘッダーロゴ設定になっています
ヘッダーロゴサイズ | 1600px × 360px |
PC表示サイズ | 48px |
SP表示サイズ | 32px |


まとめ
以上、SWELLのヘッダーロゴ画像のサイズ、設定方法について解説しました
ヘッダーロゴの設定を変えるだけで、サイトの印象がずいぶん変わります
自分のサイトに合ったヘッダー設定を見つけて素敵なサイトを作りましょう