AFFINGER5でサイト全体の色を簡単に設定する方法|カスタマイズ
AFFINGER5でサイト全体の色を簡単に設定する方法|カスタマイズ
AFFINGER5には色の設定項目が大量にあり、かなり細かいところまで設定することができます。

今回は主な基本パーツの色を、初心者でも簡単に設定する方法を解説します。

サイト全体のカラーパターン・デザインパターンの設定方法

WordPress管理画面左のサイドメニューから『AFFINGER5 管理デザイン』という順にクリック。

『AFFINGER5 管理→デザイン』という順にクリック

『AFFINGER5 管理→デザイン』という順にクリック

「サイト全体の設定」ページが開きます。

カラーパターンの設定

カラーパターンの部分でサイトの全体的な色を選ぶことができます。

サイトの全体的な色を選ぶ

サイトの全体的な色を選ぶ

ここで、お好きな色を選択してください。
今回は試しにカラーパターンを「赤(エレガント)」にしてみます。

デザインパターンの設定

グラデーションやストライプなどといったデザインもサイト全体に反映させることができます。

デザインパターンを選ぶ

デザインパターンを選ぶ

ここもカラーパターンと同様にお好きなデザインを選択してください。
今回は試しに「キューティー(ストライプ)」にしてみようと思います。

『カスタマイザー用CSSを<style>で出力』はチェックしなくて大丈夫です。

最後に『save』ボタンをクリックすれば設定が反映されます。

『save』をクリック

『save』をクリック

もし気に入った色やデザインがなく、色を初期状態に戻したいなと思ったら『リセット』を選択して『save』ボタンを押しましょう。

そうすると初期状態の設定に戻ります。

設定の確認

投稿した記事やタイトル部分が、全体的な色は赤、デザインはストライプ模様になりました。

設定の確認

設定の確認

細かく色を設定する

WordPressの管理画面左サイドメニューから『外観カスタマイズ』という順にクリックして進みます。

『外観→カスタマイズ』という順にクリック

『外観→カスタマイズ』という順にクリック

過去に自分が投稿した記事が表示されるので、その中のどれか一つをクリックしてください。

過去に自分が投稿した記事をクリック

過去に自分が投稿した記事をクリック

画面左側部分の「色を選択」で色を変えていくのですが、キーカラー、メインカラー、サブカラー、テキストの4つの項目があります。

それぞれで色の変わる部分が違います。

キーカラー

グラデーションの濃い部分などを選べます。サイト内で一番濃い色を設定するのがおすすめです。

メインカラー

グラデーションの薄い部分などを選べます。キーカラーよりは少し薄い色を設定するのがおすすめです。

サブカラー

サイドバーの背景カラーなど薄い色を選べます。とても薄い色を設定するのがおすすめです。

テキスト

メニューのテキスト等の色を選べます。

色の設定方法

各項目の『色を選択』をクリックしましょう。

『色を選択』をクリックする

『色を選択』をクリックする

これでより細かい色を選択することができます。

選択した色が反映されない場合

細かい色設定が反映されない場合は「簡単色設定を使用する」で『(1)全体的に反映』を選択します。

『(1)全体的に反映』を選択

『(1)全体的に反映』を選択

これで、設定した色が反映されます。

まとめ

今回は、AFFINGER5でサイトの主な基本パーツの色を簡単に設定する方法を解説しました。

AFFINGER5を購入したばかりの人は、あまりの設定項目の多さに戸惑ってしまうかもしれませんが、今回の記事を参考に最初はざっくりサイト全体の色を決め、テーマの使い方に慣れてきたら、個別に細かく色設定してみてください。

  • AFFINGER5公式紹介サイトはこちら ➜AFFINGER5

スポンサーリンク

スポンサーリンク

おすすめの記事