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

2月 16, 2019

 

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

 

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

 

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

[st_af name=”ad-kijinaka”]

 

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

 

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

 

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

おじさん
一度にやるのは大変です

 

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

 

12色から選べます

 

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

 

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

 

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

 

[st-midasibox title=”ポイント” fontawesome=”fa-check-circle faa-ring animated” bordercolor=”#FFC107″ color=”” bgcolor=”#FFFDE7″ borderwidth=”” borderradius=”5″ titleweight=”bold”]

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

[/st-midasibox]

 

[st-card id=1028 label=”” name=”Wingのロゴ画像・アイコン・ファビコンの設定方法” bgcolor=”” color=”” readmore=”on”]

 

サイト全体の確認

 

カラーやデザインを変更することによって、実際に自分のサイトがどうなるのかは「投稿」→「投稿一覧」→「基本文の見やすさチェック用ダミーページ」で、「プレビュー」で確認できます。

 

 

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

 

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

 

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

 

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

 

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

Bliskの表示例

 

 

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

 

・赤(エレガント)

 

・青(ビジネス)

 

・緑(ナチュラル)

 

・オレンジ(元気)

 

・ピンク(可愛い)

 

・グレー(ダーク)

 

・赤(やさしい)

 

・青(やさしい)

 

・緑(やさしい)

 

・オレンジ(やさしい)

 

・ピンク(やさしい)

 

・グレー(やさしい)

 

[st_af name=”ad1″]

 

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

 

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

 

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

 

 

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

 

・フラット(シンプル)

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

わたしのサイトは、

・メイン:グリーン#c5d96f

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

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

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

 

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

 

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

おじさん
このことはWordPressのテーマ「サンゴ」で学びました
「サンゴ」は色の設定が少ないですよね
うさぎ

[st_af name=”ad2″]

 

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

 

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

 

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

 

 

 

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

 

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

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

 

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

 

ここの背景色を自分が決めた色に変えていきます。

 

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

 

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

 

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

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

 

まとめ

 

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

 

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

 

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

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

 

[st_af name=”affinger800″]

[st_af name=”affinger5_rink”]