サイト全体のカラー・フォント・デザインを変更する方法

Takuya Takubo

FANQYは、コードを書かなくても管理画面から「色」「フォント」「共通デザイン」を調整できるように設計されています。

ここでは、サイト全体のトーンを調整するための基本的な設定方法を紹介します。

※細かいパーツごとのデザイン設定は、各パーツのFAQをご確認ください

カラーの変更

名前	用途
プライマリカラー	検索フォーム背景やアクセントに使われるメインカラーです
オンプライマリカラー	プライマリカラーの上のアイコンやテキストなどに使われます
バックグラウンドカラー	サイト全体の背景に使われます
オンバックグラウンドカラー	背景の上にのるアイコンやテキストなどに使われます
サーフェスカラー	一部の背景ブロックに使われます
オンサーフェスカラー	サーフェスの上にのるアイコンやテキストなどに使われます
リンクカラー	記事中のリンク色に使われる
ボーダーカラー	罫線に使われます

色は「メインカラー＋グレー系＋アクセント1色」の3〜4色に絞ると、FAQサイトとして落ち着いた印象になります。

プライマリカラーをアクセントカラーに設定して、そのほかは落ち着いた色合いにすることで、みやすいWebサイトになりやすいかと思います。

フォントは日本語で使いやすいものを、Google Fontより10種類、システムフォントより2種類選べるようにしてあります。

以下の設定が可能です。

項目	内容
コンテンツの縦横比	カードや一覧などで共通して使う画像・コンテンツ枠の縦横比です。「16:9/4:3/3:2/正方形」の4種類から選べます。
ヘッダー・トップページの最大横幅	デフォルト1000px。600px〜1600pxの間で設定できます。
ページコンテンツの最大横幅	デフォルト700px。400px〜1200pxの間で設定できます。
SP表示の左右パディング	スマホ表示時の左右余白を調整します。「小/中/大」の3種類から選べます。
角丸	サイト全体のコンテンツの角の丸みを調整します。「直角/角丸/丸い」の3種類から選べます。
画像の解像度	投稿ページやカードなどで表示する画像の解像度を選択します。大きいサイズを選ぶほど、見た目は綺麗になりますが、読み込みスピードは遅くなる可能性があります。 WordPressが標準で用意している「サムネイル/中/中-大/大/フルサイズ」から選べます。
リストアイコン	サイト内の記事一覧リストに表示するアイコンを選びます。「なし」あるいは8種類のアイコンをご用意しています。
リンクテキストの下線	「ホバー時のみ下線を表示/常に下線を表示/下線を表示しない」の3種類から選べます。

以下のアニメーションを選択できるようにしています。

この記事は役に立ちましたか？

はい

いいえ

0人中 0人が役に立ったと言っています

この記事を書いた人

Takuya Takubo

WordPressテーマFANQYを制作しています。「アパレル→Webライター→SaaSのPdM/CS/マーケター」と経験する中で、CSがビジネスのすべてだと確信しました。ECやサービス運営の土台になる「サポート・FAQ」に必要な機能を、高品質かつ低コストで提供できたらと思います。