Affinger5 テーマ

Affinger5/Wingの全体のカラー設定を簡単に終わらせる!【WordPress】

更新日:

 

Affinger5(Wing)はカスタマイズできる項目が多いがゆえに、最初にデザインに凝りだすとなかなか記事を書くところまでいけません。

 

そこで、最初に用意されたカラーで簡単に設定する手順を紹介します。

 

使用しているテーマはAFFINGER5EX(ver20181210)です。もしかしたらAFFINGER5には無い機能もあるかも知れませんので、ご了承ください。

 




 

サイト全体のカラーの簡単カスタマイズ

 

AFFINGER5のカラー設定はメチャクチャ沢山の項目があります。

 

まずは用意されたカラーで簡単に設定しておき、後でカスタマイズしていくのがオススメです。

 

サイト全体のカラーを簡単に変える

 

12色から選べます

 

WordPressにログインすると左側のメニューの下に「Affinger5 管理」があるのでクリックします。

 

カラーパターンとデザインパターンが選べるので、お好きなものを選んで「save」を押してください。

 

下に色やパターンの一覧を表示しています。

 

ポイント

サイトのロゴが決まっている場合は、先にロゴ画像を配置しておくほうが色を決めやすいです。

 

Wingのロゴ画像・アイコン・ファビコンの設定方法

  Affinger5(Wing)のカスタマイズは、「外観」→「カスタマイズ」(カスタマイザー)と、「Affinger5 管理」の2箇所にあるため、ちょくちょく迷子になってしまいます。 &n ...

続きを見る

 

サイト全体の確認

 

実際に自分のサイトがどうなるのかは、「投稿」→「投稿一覧」→「基本文の見やすさチェック用ダミーページ」で、「プレビュー」で確認できます。

 

 

このとき、パソコンだけを見ず、スマホの表示も確認しておくのがグッドです。ユーザーは80%以上がスマホやタブレットで検索しています

 

ユーザー目線に立ち、スマホでどの様に見えているかを知ることは非常に大切なことですね。

 

スマホやタブレットの表示は、実機またはBlisk などのソフトウェアで確認できます。

 

Bliskは、無料版だと1日30分しか使用できませんが、スマホやタブレットの機種まで選んで表示を再現してくれます。

 

パソコンのスペックがある程度高くないと動きが遅いですが、試してみる価値はあると思います。

Bliskの表示例

 

 

サイト全体の設定の色見本

 

・赤(エレガント)

 

・青(ビジネス)

 

・緑(ナチュラル)

 

・オレンジ(元気)

 

・ピンク(可愛い)

 

・グレー(ダーク)

 

・赤(やさしい)

 

・青(やさしい)

 

・緑(やさしい)

 

・オレンジ(やさしい)

 

・ピンク(やさしい)

 

・グレー(やさしい)

 




 

サイト全体の設定のデザインパターン

 

デザインパターンは分かりにくいと思いますが、ヘッド部分見出しに違いがあります。

 

・デフォルト(グラデーション横)

 

 

・ビジネス(グラデーション縦)

 

・フラット(シンプル)

 

・キューティー(ストライプ)

 

・ブログ(初心者おすすめ)

 

カスタマイザーでこだわりカスタマイズ

 

ここまでは用意された色のカスタマイズでした。

 

でも、自分のオリジナルの色を使いたくなってくる人も多いでしょう。

おじさん
自分と同じ茶色でサイトを作りたいー

 

そんなときは、カスタマイザーで細かく色を設定できます。

 

オリジナルカラーを決める

 

まずは、オリジナルカラーの配色を決めます。

 

このサイトは、

・メイン:グリーン#c5d96f

・メインの濃い色:濃いグリーン#66964c

・文字の色:濃い茶色#6a5454

こんな感じに決めています。

 

配色がわからない方は、「自然 配色 カラーコード」、「爽やか カラーコード」等で検索すると、たくさん出てくると思います。

 

コツは色の数を少なくすることです。色の数が多くなるほど組み合わせが難しくなっていきます。

 




 

カスタマイザーで色の編集をする

 

自分のオリジナルカラーがグリーン系なら、冒頭の「サイト全体のカラーの簡単カスタマイズ」でグリーン以外のカラーを設定します。

 

例えば青を選んで色の変更をしていきます。青をグリーンに変えていく流れです

 

 

 

まず、色の変更をしていく前に少しだけ準備をします。

 

カスタマイザーの「全体カラー設定」の「簡単設定を使用する」を確認してください。

一番下にチェックが入っていれば、オリジナルの色に変更していけます。

 

例えばヘッダーは、カスタマイザーの「基本エリア設定」→「ヘッダーエリア」の項目で変更できます。

 

ここの背景色を自分の好きな色に変えていきます。

 

背景色が2つあるのは、グラデーションにするためです。違う色を入れるとグラデーションになります。

 

2つとも同じ色を入れれば、下のようになります。

 

あとは、これを繰り返してサイト全体をオリジナルカラーにしていきます。

おじさん
ちょっと面倒くさいけど、一番楽しい作業でもありますね

 

まとめ

 

今回は、サイト全体の簡単なカラー設定の方法を紹介しました。

 

サイトのイメージは大事ですが、イメージだけでは稼げないのも事実

 

なので、最初は簡単に設定しておいて、後でじっくり色を変更していくのがオススメです!

おじさん
デザインは凝りだすとキリがないですからね

 

関連記事
Affinger5/Wingのカスタマイズの一覧

  おじさん Affinger5って色を変えたいとか思っても、どこで設定したらいいのか分かんなくなるんですよね 設定項目が多いぶん、ちょっと迷子になりやすいかもですね うさぎ おじさん そこ ...

続きを見る

-Affinger5, テーマ
-

Copyright© BlogFarming , 2019 All Rights Reserved Powered by AFFINGER5.