SWELLのカラー・フォント設定方法【ブログのデザインを整える手順】

SWELLを導入したら、次にやるべきことがブログのカラーとフォントの設定です。

デフォルトのままでも十分きれいなデザインですが、カラーとフォントを自分のブログのコンセプトに合わせて設定することで、読者に一貫したブランドイメージを伝えられます。

この記事では、SWELLのカラーとフォントの設定方法を解説します。

カラー・フォント設定を行う場所

SWELLのカラーとフォントの設定は「カスタマイズ」画面から行います。

WordPress管理画面の「外観」→「カスタマイズ」を開きましょう。

リアルタイムでプレビューを確認しながら設定を変更できるため、完成イメージを見ながら調整できます。

カラーの設定方法

メインカラーを設定する

カスタマイズ画面の「カラー」を開きます。

「メインカラー」はブログ全体のテーマカラーです。

見出しの下線・ボタン・リンクカラーなど、各パーツに自動で反映されます。

ブログのコンセプトに合ったカラーを選びましょう。

カラーコードを直接入力することもできます。

このブログ（egolab）では緑をメインカラーに設定しています。

「研究・実験・成長」というコンセプトに緑が合っていると感じたからです。

テキストカラーを設定する

本文のテキストカラーを設定します。

基本的にはデフォルトの黒系（#333333など）のままで問題ありません。

背景が白のブログであれば、テキストカラーは黒に近い色にすることで読みやすさが上がります。

リンクカラーを設定する

記事内のリンクテキストのカラーを設定します。

メインカラーと同じか、それに近い色にするとデザインの統一感が出ます。

ヘッダー・フッターのカラーを設定する

カスタマイズ画面の「ヘッダー」「フッター」からそれぞれの背景色・テキスト色を設定できます。

ヘッダーはブログの顔になる部分です。メインカラーを使うか、白・黒などのシンプルな色にするかでブログの印象が大きく変わります。

フォントの設定方法

サイト全体のフォントを設定する

カスタマイズ画面の「フォント」を開きます。

SWELLではサイト全体で使うフォントをここから設定できます。

日本語フォントと英語フォントをそれぞれ選択できます。

日本語フォントの主な選択肢

フォント	特徴	向いているブログ
Noto Sans JP	シンプルで読みやすい	情報系・ビジネス系
Noto Serif JP	上品な明朝体	読み物系・文学系
M PLUS Rounded 1c	柔らかくて親しみやすい	ライフスタイル系・女性向け
BIZ UDPGothic	視認性が高くシャープ	テック系・ビジネス系

フォントによってブログの雰囲気が大きく変わります。

ブログのコンセプトに合ったフォントを選びましょう。

文字サイズを設定する

本文の基本となる文字サイズを設定できます。

デフォルトは16pxが多いですが、読みやすさを考えると16〜18px程度が適切です。

スマホでの読みやすさも考慮して設定しましょう。

行間・文字間隔を設定する

行間（line-height）と文字間隔（letter-spacing）も調整できます。

日本語の文章は行間を少し広めに設定すると読みやすくなります。

見出しのデザインを設定する

カスタマイズ画面の「見出しデザイン」を開くと、h2・h3・h4それぞれの見出しのデザインを設定できます。

SWELLには複数の見出しデザインが用意されており、クリックするだけで切り替えられます。

ボタンのデザインを設定する

記事内で使うボタン（CTAボタンなど）のデザインもカスタマイズ画面から設定できます。

ボタンの色はメインカラーに合わせるのが基本です。

読者の目に留まりやすく、クリックしたくなるデザインにしましょう。

設定後に確認すること

カラーとフォントの設定が完了したら、以下の点を確認しておきましょう。

PC・スマホ両方で確認する カスタマイズ画面のプレビューモードをスマホに切り替えて、スマホでの見た目も確認しましょう。PCとスマホでは表示が異なることがあります。

実際の記事ページで確認する プレビューだけでなく、実際に公開されている記事ページを確認しましょう。文字の読みやすさや色のバランスを読者目線でチェックします。

ブラウザのシークレットモードで確認する キャッシュの影響を受けない状態で確認できます。設定が正しく反映されているかを確認するのに便利です。

よくある質問

Q. カラーコードがわからない場合はどうすればいいですか？ Googleで「カラーコード」と検索するとカラーピッカーが表示されます。そこで好みの色を選ぶとカラーコードを確認できます。また「ブランドカラー おすすめ」などで検索すると参考になるカラーパレットが多数見つかります。

Q. フォントを変えると既存の記事にも反映されますか？ はい、サイト全体のフォント設定を変えると既存の記事にも自動で反映されます。

Q. 設定を元に戻したい場合はどうすればいいですか？ カスタマイズ画面の左上にある「×」をクリックすると変更を破棄して元の状態に戻せます。「公開」をクリックする前であれば、変更は保存されません。

まとめ

SWELLのカラーとフォントの設定方法をまとめます。

カラーとフォントを整えることで、ブログ全体に統一感が生まれて読者に良い印象を与えられます。

ブログのコンセプトに合ったデザインを選んで、自分だけのブログを作り上げていきましょう。

SWELLの他の設定については、SWELLの初期設定完全ガイドも合わせて確認してみてください。