SWELLのヘッダーロゴ画像のおすすめサイズと設定方法

2026年10月25日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

SWELLのヘッダーにロゴを入れたものの、「大きすぎる」「ぼやけて見える」と悩んでいませんか。私も最初に小さな画像をそのまま使ったところ、スマホで見るとロゴの文字がにじんでしまい、慌てて作り直したことがあります。

この記事では、SWELLのヘッダーロゴ画像のおすすめサイズと設定方法を、使うツールや設定画面の名前まで具体的に解説します。実際の失敗談も交えるので、読みながら進めれば、パソコンでもスマホでもくっきり見えるロゴに仕上げられます。

※ブログの作業環境を見直したい方へ：筆者が記事作成に使っているMacBook Air M5は、軽くて持ち運びやすく、デザインの調整や記事作りを快適にこなせるノートPCです。

➡️ AmazonでMacBook Air M5の最新価格を見る

価格は変動するため、最新の情報はAmazonの商品ページでご確認ください。

ニャフィ

ロゴ画像って、どのくらいのサイズで作ればいいのかにゃ？

たいがブログ

サイズの目安がわからないと、迷ってしまいますよね。

ニャフィ

スマホで見たときに、ぼやけたりしないか心配だにゃ…

たいがブログ

くっきり見せるコツも含めて、手順を解説しますね。

▼あわせて読みたい：画像を使ってもサイトを軽く保てるサーバー選びについては、こちらの記事で詳しく紹介しています。

SWELLのヘッダーロゴ画像の基本

ヘッダーロゴは、すべてのページの一番上に表示されるブログの看板です。SWELLでは、ロゴ画像を登録して表示サイズを調整するだけで、コードを書かずに整えられます。

筆者がロゴでつまずいた原因は、画像そのものの大きさと、画面での表示サイズを混同していたことでした。この2つの違いを理解するだけで、ロゴのトラブルはほとんど防げます。

ロゴはブログの第一印象を決める

ロゴは読者が最初に目にする部分なので、ブログの信頼感に直結します。文字だけのタイトルよりも、整ったロゴがあるほうがプロらしい印象を与えられます。

画像のサイズと表示サイズは別もの

アップロードする画像の大きさと、ヘッダーに実際に表示される大きさは別に考えます。SWELLでは表示サイズを設定で調整できるので、画像は少し大きめに作っておくのが安心です。

ロゴ画像のおすすめサイズと設定方法

ロゴ画像は、横長の形で、表示サイズより大きめに作るのが基本です。作った画像は、カスタマイザーから登録して表示サイズを調整していきます。

筆者はCocoonを使っていたころ、画像そのものを縮小して大きさを合わせていました。SWELLではパソコンとスマホで表示サイズを別々に設定できるので、画像を何度も作り直す手間がなくなりました。

横長で背景が透明なPNG画像にする

ロゴは横長の形にすると、ヘッダーに収まりやすくなります。保存形式は背景が透明なPNGにしておくと、ヘッダーの色を変えてもきれいに表示されます。

表示サイズの2倍くらいの大きさで作る

スマホなどの高精細な画面では、小さい画像がぼやけて見えます。表示したい高さの2倍くらいの大きさで作っておくと、どの端末でもくっきり表示されます。

STEP

Canvaでロゴ画像を作る

無料のデザインツール「Canva」で、横長のロゴを作ります。ダウンロードするときにPNG形式を選び、背景を透明にする設定にしましょう（背景の透過は有料プランの機能です）。

STEP

カスタマイザーでロゴを登録する

「外観」→「カスタマイズ」→「サイト基本情報」を開き、ロゴの欄に作った画像をアップロードします。登録すると、プレビューのヘッダーにロゴが表示されます。

STEP

パソコンとスマホの表示サイズを調整する

「ヘッダー」→「ヘッダーロゴ」で、パソコンとスマホそれぞれのロゴの表示サイズを調整します。プレビューを見ながら、ヘッダーに収まる大きさを探しましょう。

STEP

スマホで見え方を確認して公開する

実際のスマホでもロゴを確認し、問題なければ「公開」を押します。筆者は背景が白いままの画像を使い、色付きのヘッダーでロゴの周りが白く浮いたので注意しましょう。

ロゴをもっと見やすくするコツ

ロゴを設定したら、サイト全体での見え方も整えておくと、ブログの完成度がぐっと上がります。ここでは、実際に運営しながら効果を感じたコツを紹介します。

筆者はノートPCの画面だけで調整していたため、大きな外部モニターで見るとロゴが小さく感じることに後から気づきました。今は外部モニターとスマホの両方で確認してから、表示サイズを決めるようにしています。

サイトアイコンもロゴとそろえる

ブラウザのタブに表示されるサイトアイコンも、ロゴと同じデザインにそろえましょう。「サイト基本情報」から、512×512px以上の正方形の画像を登録するのが目安です。

画像を圧縮して軽くしておく

ロゴはすべてのページで読み込まれるので、画像が重いとサイト全体が遅くなります。無料のWebツール「TinyPNG」を使えば、PNG画像を見た目を保ったまま軽くできます。

ロゴ設定のチェックポイント

表示サイズの2倍くらいの大きさで作っている
背景が透明なPNG画像になっている
パソコンとスマホで表示サイズを調整している
サイトアイコンもロゴとそろえている

▼あわせて読みたい：ロゴやデザインの見え方を大きな画面で確認できる、筆者愛用の作業用モニターはこちらで紹介しています。

よくある質問

ロゴ画像は具体的に何pxで作ればいいですか？: たとえば高さ40pxで表示したいなら、高さ80px程度で作るのが目安です。横幅はロゴの形に合わせて、横長になるように調整しましょう。
ロゴとサイトタイトルの文字を両方表示できますか？: ロゴを設定すると、ヘッダーにはロゴ画像が表示されます。ブログ名を見せたい場合は、ロゴ画像の中にブログ名の文字を入れておきましょう。
SVG形式のロゴは使えますか？: WordPressは初期設定のままではSVGファイルをアップロードできません。初心者のうちは、扱いやすいPNG形式で作るのがおすすめです。
スマホのときだけロゴを小さくできますか？: できます。「ヘッダー」→「ヘッダーロゴ」で、パソコンとスマホの表示サイズを別々に設定できます。スマホは少し小さめにすると収まりがよくなります。