SWELLのヘッダーロゴ画像を設定する方法、ロゴサイズのおすすめも紹介します。
![](https://hinakira.com/wp-content/uploads/2022/08/machiko-1-150x150.png)
SWELLでロゴを設定する方法を教えて下さい。
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
ヘッダーのロゴ画像ですね!OKです。
- ロゴ画像のおすすめサイズ
- SWELLでロゴ画像を設定する方法
- ロゴ位置の設定
![Blog](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10.png)
![Blog](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10.png)
この記事を書いた人
ブログ最高月25万円。SNS最高日給12万円。Twitter(X)フォロワー16,000人。ブログとSNSとSEOとAIがすき。MENSA会員。15この有料テーマを使い、テーマ制作もしてみた自称テーマおたく。
![Blog](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10.png)
![Blog](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10.png)
この記事を書いた人
ブログ最高月25万円。SNS最高日給12万円。Twitter(X)フォロワー16,000人。ブログとSNSとSEOとAIがすき。MENSA会員。15この有料テーマを使い、テーマ制作もしてみた自称テーマおたく。
この記事を読めば、ヘッダーロゴの画像の悩みはスッキリ!?
ぜひ見ていって下さい。
![](https://hinakira.com/wp-content/uploads/2022/01/Manual-for-using-SWELL-使い方.jpg)
![](https://hinakira.com/wp-content/uploads/2022/01/Manual-for-using-SWELL-使い方.jpg)
SWELLのヘッダーロゴ画像
![SWELLロゴ画像](https://hinakira.com/wp-content/uploads/2022/10/SWELLロゴ画像-1-1024x473.png)
![SWELLロゴ画像](https://hinakira.com/wp-content/uploads/2022/10/SWELLロゴ画像-1-1024x473.png)
SWELLでは、上記の場所が初期のヘッダーロゴ位置となります。
当サイトでは、「ぶろぐ学部」というサイト名をロゴ画像として設定。
ロゴなしでも「ぶろぐ学部」というサイト名は表示できるのですが、ロゴ画像を使うと好きな見た目にできるのが良いところです。
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
気に入った見た目にできると、より愛着もわきますね。
SWELLヘッダーで使うロゴのおすすめサイズ
ロゴサイズ | 横:縦の比率 | |
---|---|---|
SWELL公式のロゴサイズ | 1600×360 | 4.4:1 |
当サイトのロゴサイズ | 250×50 | 5:1 |
では、SWELLで設定するのにオススメのロゴサイズについて解説します。
まずは、SWELL公式サイトで使われているロゴのサイズは、「1600×360」という画像サイズ。
で、当サイトで使っているロゴ画像のサイズはというと、「250×50」です。
サイズが小さい理由は、画像が大きいと読み込みに時間がかかってサイトスピードが落ちる為。
結論、おすすめのサイズは、横「250~1600」、縦「50~360」あたりでしょう。
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
画像が粗くならない程度に小さくするのがオススメ。
ちなみに、横と縦のサイズ比率ですが、当サイトは「5:1」、SWELL公式は「4.4:1」です。参考までに。
SWELLヘッダーで使うロゴ画像を作るオススメの方法
SWELLヘッダーで使うロゴ画像を作るには、Canvaという画像ツールがおすすめです。
![CANVAロゴ](https://hinakira.com/wp-content/uploads/2022/10/CANVAロゴ-1-1024x454.png)
![CANVAロゴ](https://hinakira.com/wp-content/uploads/2022/10/CANVAロゴ-1-1024x454.png)
ロゴ画像のテンプレートも豊富なので、参考にしながらオシャレなロゴ作成も可能。
![Canvaロゴ画像テンプレート](https://hinakira.com/wp-content/uploads/2022/10/Canvaロゴ画像テンプレート-1.png)
![Canvaロゴ画像テンプレート](https://hinakira.com/wp-content/uploads/2022/10/Canvaロゴ画像テンプレート-1.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
当サイトのロゴ画像も、Canvaで作りました。
SWELLヘッダーでロゴ画像を設定する方法
使うロゴ画像を用意できたら、実際にSWELLヘッダーでロゴを設定する方法をみていきましょう。
手順は、以下の通りです。
![外観カスタマイズ](https://hinakira.com/wp-content/uploads/2022/10/外観カスタマイズ-2-1024x623.png)
![外観カスタマイズ](https://hinakira.com/wp-content/uploads/2022/10/外観カスタマイズ-2-1024x623.png)
![「ヘッダー」をクリック](https://hinakira.com/wp-content/uploads/2022/10/「ヘッダー」をクリック-1-1024x625.png)
![「ヘッダー」をクリック](https://hinakira.com/wp-content/uploads/2022/10/「ヘッダー」をクリック-1-1024x625.png)
![画像をアップロード](https://hinakira.com/wp-content/uploads/2022/10/画像をアップロード-1-1024x607.png)
![画像をアップロード](https://hinakira.com/wp-content/uploads/2022/10/画像をアップロード-1-1024x607.png)
![画像サイズを設定する](https://hinakira.com/wp-content/uploads/2022/10/画像サイズを設定する-1-1024x600.png)
![画像サイズを設定する](https://hinakira.com/wp-content/uploads/2022/10/画像サイズを設定する-1-1024x600.png)
当サイトの設定は以下の通りです。
画像サイズ(PC) | 45 |
画像サイズ(PC追従) | 35 |
画像サイズ(SP)※スマホ | 50 |
![「公開」をクリックして設定完了](https://hinakira.com/wp-content/uploads/2022/10/「公開」をクリックして設定完了-1-1024x593.png)
![「公開」をクリックして設定完了](https://hinakira.com/wp-content/uploads/2022/10/「公開」をクリックして設定完了-1-1024x593.png)
SWELLヘッダーのロゴ位置は2パターン
SWELLヘッダーのロゴ位置は2パターンあります。
初期位置の「左側」と「中央」です。
左側のロゴ位置
![左側のロゴ位置](https://hinakira.com/wp-content/uploads/2022/10/左側のロゴ位置-1-1024x541.jpg)
![左側のロゴ位置](https://hinakira.com/wp-content/uploads/2022/10/左側のロゴ位置-1-1024x541.jpg)
中央のロゴ位置
![中央のロゴ位置](https://hinakira.com/wp-content/uploads/2022/10/中央のロゴ位置-1-1024x540.png)
![中央のロゴ位置](https://hinakira.com/wp-content/uploads/2022/10/中央のロゴ位置-1-1024x540.png)
ロゴ位置は、「ヘッダーのレイアウト」から設定します。
![「ヘッダーのレイアウト」から設定](https://hinakira.com/wp-content/uploads/2022/10/「ヘッダーのレイアウト」から設定-1-1024x608.png)
![「ヘッダーのレイアウト」から設定](https://hinakira.com/wp-content/uploads/2022/10/「ヘッダーのレイアウト」から設定-1-1024x608.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
好みのロゴ位置で設定しましょう。
まとめ|SWELLヘッダーロゴを設定して、魅力的なヘッダーに!
SWELLヘッダーロゴは必須ではありませんが、設定することでオシャレな見た目にできたり、印象に残るヘッダーにすることができます。
しかも、どのページにアクセスしてもロゴは必ず表示されるので、重要度も高いといえるでしょう。
さらには、気に入ったロゴを使うことで、自分自身のモチベーションも高まったり、サイトへの愛着がわいたりします。
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
せっかくなので、使っていきましょう!
コメント