ー おすすめの記事 ー
SWELL購入から使い始めるまでの全レビュー！
迷ったけれど、やっぱり選んで良かった
SWELL導入前に知りたいデメリット！
後悔しないための注意点まとめ
【初心者向け】SWELLヘッダーロゴの設定方法とオシャレに見せるコツ！
当ページのリンクには広告が含まれています。
SWELLテーマを使ったブログで、ヘッダーロゴの設定方法と、オシャレに見せるコツについて解説します。
ジューン私が数あるテーマからSWELLを選んだ理由のひとつは、ヘッダー部分の設定が簡単にできるからです。
ヘッダーロゴの細かい設定ができるのは、まさしく神レベルです！
SWELLでは、直感的に操作するだけで、思い描いたようなヘッダーロゴのデザインが実現できます。
ここをオシャレに見せるだけで、みてくれる人の第一印象がガラリと変わるので、ぜひ、最後まで読んでくださいね！
目次
SWELLって？
SWELLとは2019年3月にリリースされた、WordPressの有料テーマです。
SWELL公式サイト 2024年10月時点
SWELLはなんと、国内人気 No.1！
「WP-Search」の【2024調査】WordPressテーマの人気シェアランキング【有料/無料、日本/海外】によると、WordPressテーマの国内シェア率 1位 がSWELL でした！
ジューン「SWELLで作られているサイト、最近よくみるわ〜」という方も多いのではないでしょうか。
＼ 本当に使いやすいテーマなら／
ヘッダーロゴとは？
ヘッダーロゴは、ブログの一番上の目立つ位置に表示される、サイトの顔とも言うべき画像です。
ロゴやサイトのタイトルなどをヘッダーに配置することで、サイトのアイデンティティを確立し、訪問者に強い印象を与えることができます。
※画面キャプチャで、私が作成中のサイトはこちら 「トラマサ」→ https://tyn-c.com/toramasa
SWELLヘッダーロゴの推奨サイズ、画像ファイルの形式は？
ヘッダーロゴの推奨サイズは、1600×360pxです。SWELLの公式サイトがこのサイズ。
ただ、デザインしにくい場合には1600×400程度でもOKです！
画像はPNGかJPGをおすすめします。
| 後ろを透明にしたい | PNGがオススメ |
| 画像をできるだけ軽くしたい | JPGがオススメ |
例えば、参考サイトで作ったロゴはPNG形式です。
画像の上に載せることもあるので、後ろを透明にしておきました。
PNGなので、メインビジュアルの上に載せるデザインにしても、後ろが透明になって浮き上がる形に。
↓背景の上にヘッダーロゴが載っている。
↓メインビジュアルの上にヘッダーロゴが載っている。
ジューンデザインの使い勝手を考えると、ヘッダーロゴはPNGがオススメです。
SWELLヘッダーロゴの基本設定
【カスタマイズ】画面に戻り【ヘッダー】を選択します。
その中で「ヘッダー背景色」にテーマカラーで決めた色を設定。
さらに、「ヘッダーロゴの設定」で準備したロゴを設定します。
画面が切り替わり、デザインが表示されるので「公開」をクリックしてください。
その後、「公開」ボタンをクリックしてください。
SWELLだからできる！ヘッダーロゴの絶妙な配置調整
SWELLでは、ヘッダーロゴの位置調整機能が、たーっくさんあります！
紹介しきれないくらいなので、私が「これはすごい！」という機能３つをご紹介しますね。
ヘッダーロゴの画像サイズ
画像サイズを、PC、PC追従ヘッダー内、SP(スマホ）の３つに合わせて設定できます。
細かくせていできるので、それぞれの表示を確認しましょう。
レイアウト・デザイン設定
ヘッダーのレイアウトを「右寄せ」「中央」「左寄せ」の３つから選べます。
これもスマホとPCだとイメージが違うので、できると嬉しいです！
トップページでの特別設定
トップページでは、ヘッダーの背景を透明にして、メインビジュアルに重ねることができます。
それぞれ比較するとこんな感じです。
ジューンSWELLでは、CSSで編集する必要は全くなし！
狙ったイメージで直感的にデザインできる、まさに神テーマです！！！
オシャレに見せる！ロゴデザインのコツ
さて、設定方法がわかったらロゴ作りです。
ジューン私がロゴデザインをオシャレに見せるために考えているポイントを、２つ紹介しますね！
背景の色との相性を考える
まずは背景色との相性から考えます。例えば、補色や反対色をうまく使うことで、ロゴが背景から浮きたつように見せることができます。
これにより、パッと見たときにロゴが目に入りやすくなり、視覚的なインパクトを与えることができます。
以下のサイトが参考になるので、ご覧になってください。
さくさく決める 配色サイト
一括で補色や反対色をみつけ、サイトの色を検討できるサイトです。
フォント選び
サイト全体のイメージに合うフォントを選ぶことで、ロゴとサイト全体の調和がとれ、統一感のあるデザインになります。
ロゴのフォント選びがサイト全体の印象を左右するため、イメージにぴったりのものを見つけることがポイントです。
いくつか色のバリエーション・パターンを作っておくと使いやすい
ロゴはヘッダーだけでなく他のさまざまな場面でも使えます。
せっかくなので３色ほど作っておき、背景の色と合わせて使うと良いですよ。
参考サイトでは、黒・黄色・赤の３パターンを作成しました。
サイトのアクセントにも使えるので、バリエーションがあると便利です。
ヘッダーロゴデザインのおすすめツール
ロゴを簡単に作成できる無料デザインツールをご紹介しま。
私が使っているデザインツールは２つです。
Adobe Express
PhotoshopやIllustratorを扱っているAdobeのオンラインデザインツールです。
初心者には簡単に見栄えのするものを作れるのでおすすめです。
無料版でも、フォントの種類が多いのでロゴをつくるときに選べて楽しいです。
Canva（きゃんば）
こちらもオンラインデザインツール、しかも無料で使えます。
イラストが豊富！ どちらかというと可愛らしいデザインやイラストが多くて、ワクワクしながらデザインができます。
どちらも使いやすいので、まずはユーザー登録して使ってみてください。
まとめ
今回の記事では、SWELLテーマを使ったヘッダーロゴの設定方法やオシャレに見せるコツについて詳しくお伝えしました。
ヘッダーロゴは、ブログの第一印象を左右する大切な要素。
設定方法やデザインのポイントを押さえることで、訪問者にとって魅力的なサイトを作ることができます。
ぜひ、この記事を参考に、自分らしいヘッダーロゴを作り上げてみてくださいね。
ジューンあなたのブログがさらに素敵になることを願っています！
