サイト全体の色とヘッダーの設定

ブログのデザインは色々いじりたい。手始めに色を変えてみたいが、どこをどういじったら、どこの色が変わるのかよくわからないので、とりあえず、キーカラーというのを変更。ブログ全体の色調は統一した方が良いように思うので、これはそれなりに便利。

キーカラーでサイト全体に統一感ある色設定

cocoon設定→全体設定→キーカラーで、ヘッダー部分、背景部分、見出しの背景色など、全部まとめて統一感ある感じに設定変更できる。cocoon設定のヘッダーとかでも、それぞれ設定できるけど、まとめていけるのでこっちの方が便利な気がする。
とりあえず、適当な色を選択し、枠外の白地部分をクリックすると、プレビュー画面の色がサクッと変わる。色を選んでカラーパレット上をクリックしても変わらない。
プレビューが変わらない時は、公開ボタン押して再読み込みするとかすると変化が分かる。

どこが変わるか、わかりにくかったので、画像にしてみた。

トップページだと、ピンクの矢印で指してる部分が変わった。
プロフィールの輪郭線とか、トップの画像の上のカテゴリーのラベル色（設定してない）、次のページとかの輪郭線。後は、個別の記事ページの見出しとか、目次の枠とか、まとめて変えた色に近い感じになる。
周りのグレーの部分は、同じ設定画面の下の方、サイト背景色を好きな色に設定。
ヘッダとか背景は画像を使いたい時でも、細々した部分の色をそれっぽく統一できるので便利。

濃い色と薄い色

濃いめの色にすると見出しとかの文字色が白になる。薄目の色にすると黒になるので、真っ黒はやだなーという時は、サイトテキストキーカラーを変更する。

ヘッダーメニューの場所

デザインを簡単に変更できるスキンは便利なのだけど、スキンを色々試していると、ヘッダーメニューの位置が初期値と変わってたりする。
初期値は、ブログタイトルやサイト説明の下で、初期値に戻したい時は、cocoon設定→ヘッダータブのヘッダーレイアウトを、センターロゴ（デフォルト）に設定する。

PC用とモバイル用のヘッダーメニュー

ヘッダーメニューはPC用とモバイル用がある。PCでメニュー設定してる時、PCだけプレビューしてるとモバイルでヘッダーメニューが表示されない事に気づかないので、プレビュー表示をスマホとかにチェンジして確認すると良いと思う。