SWELLのロゴ画像のサイズはいくつが正解？【公式は1600×360px】

どうも、ダルメです。

当ブログはワードプレステーマ「SWELL」を使用しています。

そんなSWELLですが、せっかくならヘッダーロゴもきれいに仕上げたいですよね。

今回はこんな疑問に答えていきます。

この記事では「SWELLのロゴ」について詳しく解説していきます。また、ヘッダーの細かな設定も解説しています。

ロゴの設定方法

ロゴ設定画面までの移動は以下の手順で行います。

【カスタマイズ】⇒【ヘッダー】⇒【ヘッダーロゴの設定】

ロゴのサイズは1600×360pxがオススメ

SWELLのロゴサイズは1600×360pxがオススメです。

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

SWELL公式サイトを見てみる

実際に公式サイトの画像サイズを見ると1600×360pxとなっています。

画像のサイズが小さすぎるとロゴがぼやけてしまうことがあるので縦のサイズを1600pxに合わせておきましょう。

当ブログもSWELL公式と同じ1600×360pxでロゴ作成しています。

ヘッダーの各種設定

ロゴを作成したら、ヘッダーの設定を行います。

SWELLではヘッダーで３つのロゴ設定ができます。

ヘッダーにはその他設定もありますが、今回ロゴに関係ないものは割愛しました。

ヘッダーのレイアウト設定

ヘッダーのレイアウトは４種類あります。

レイアウトの見た目

レイアウトは画像で見てみるとこんな感じになります。

レイアウトを変更するとヘッダーメニューが上下左右に移動します。

個人的には見やすさが良い①、④がオススメです。

自分のブログで確認してあったレイアウトを選びましょう。

背景の透過設定

背景の透過設定をONにすると背景とロゴが同化します。

背景に画像やパターンを設定している場合はロゴを背景に溶け込ませることが可能です。

こちらはSWELL公式サイトのロゴ画像です。ホーム画面だけロゴを透過させています。

ロゴを透過させると企業のサイトのようにロゴを美しく見せることができます。

ロゴ画像を以下の設定にすると背景を透過できます。

PNGで設定しないと背景が透過できないです。

ヘッダーの追従設定

ヘッダー追従をONにするといつでも上部にロゴが表示されます。

上記のヘッダーのロゴ画像が常に上に表示されるようになります。

これには以下のメリットがあります。

ロゴが常に見える位置にあるので印象に残りやすいです。さらにメニューも目につきやすいのでページ移動が楽になります。

ロゴが大きい場合は画面のサイズが圧迫されるので記事が見づらくなります。

まとめ：ヘッダーロゴを設定しよう

ヘッダーロゴはブログの顔です。

第一印象を良く見せるためにもロゴ作成には気を配りましょう。

当ブログではSWELLを使用していますが、ロゴの設定は以下のとおりです。

自分に合った設定を見つけて美しいロゴを作りましょう。