[speech_bubble type="fb" subtype="L1" icon="2.jpg" name=""]さぁ、そろそろホームページを自分好みのカラーにしたいんだけど? [/speech_bubble]
[speech_bubble type="fb" subtype="L1" icon="1.jpg" name=""]それではテーマカスタマイザーという機能を紹介します。その前に少し、色についても知識があると良いですね。 [/speech_bubble]
カスタマイザー機能を使用して様々なカラーを変更できます。まずは管理画面にてカスタマイザーが「ON」になっているか確認してください。
デフォルトカラーについて
何もカラーを設定していない状態だとデフォルトカラーで表示されます。
注意事項(必ずお読みください)
- カスタマイザーのカラーの値の出力を分けたため、上手く値が反映されずカスタマイザープレビューと実際のカラーが異なる場合がございます。その場合はカスタマイザーページのブラウザを更新して下さい。それでも反映されない場合は一度、他のカラーを選択して改めてカラーを設定保存して下さい。
- グラデーションは「背景色」「背景色上部」の両方を指定する必要があります(旧ブラウザ非対応)
- 背景画像の位置は上下左右ともに指定してください。
カスタマイザーによるカラー変更適応
①「外観」より②「カスタマイズ」を選択します
上図がカスタマイザーの基本画面です。
カラーを簡単に設定する「全体カラー設定」
当テーマではカスタマイザーでカラーを細かく指定するのが面倒だという場合の為に「基本3色」を決定する事で自動的に規定のカラーが変更されるようになっています。
(1)全体的に反映
設定した3色を強制反映します。一部カラーは解除しない限り反映されません。
反映箇所のカスタマイザーには「*」マークが付いています。
(2)メニューのみに反映
設定した3色をメニューのみに強制反映します。
(3)初期値として設定
設定した3色を既定カラーの「初期値」として設定します。
「初期値」とはカラーの値をクリアした時に設定される値です。
リセット
設定を解除します。
カスタマイザーで出来る事
その他、カスタマイザーではカラーのみでなく
- ロゴ画像の設定
- 背景画像の登録
- ヘッダー画像の登録
- レイアウトの変更
などは様々な事ができます。
詳細は個別の説明を確認して下さい。
※日本語ドメインの場合、カスタマイザー内でのページ遷移が上手く機能しませんのでページ毎にカスタマイザーを設定して下さい
背景レイヤーの図
カラーについて知っておきたい事
カラーは基本的にほとんどがグラデーションで指定します。下部には濃いめのカラーを、上部には同じ色のトーンを抑えた色(やや薄くした色)を指定すると見栄えが良くなります。
【参考サイト】
上サイトのフォームに基本にしたいカラーコードを入力して検索すると様々なパターンが自動で表示されます。
①が基準の色なので②あたりの薄い色を入れるときれいに仕上がります。
基準色のカラーがわからない場合は以下のサイトがおすすめです
http://www.materialui.co/colors
希望の色をクリックするだけでカラーコード(#ではじまる7文字の英字)がコピー出来ます。
※一部の旧ブラウザではグラデーションは反映されずに「背景色下」の1色となります。