＜Cocoon＞サイトキーカラーの調整。記事の表示幅（カラム幅）を狭く調整

ワードプレスのテーマとしてCocoonを利用しています。そのカスタマイズの備忘録です。

色彩、色合いの調整

Fuwari 褐色（かちいろ）スキンに設定

渋くて落ち着きのあるスキンとしてFuwari和色の褐色（かちいろ）を使うことにしました。

各スキンでデザインがどうなるかは「Cocoon設定－スキン」で一つ一つイメージをチェックできますが、Cocoon公式サイトに飛び、サイドバーの「スキン動作デモ」でチェックすると楽です。

サイトキーカラー設定で見出しタグh2の色合いを変更

雰囲気は良いけれどもh2タグとh3タグの区別が付きづらいところを修正したくなりました。

アレコレ試して、「Cocoon設定－全体」でサイトキーカラーの変更し、背景を桑の実色、テキストを白色に変更しました。h2タグ以外も色が変わってしまいましたが、サイトキーカラーを変更しているのだからあちこち影響するのはやむなしで、ヘッダーフッター含めて見た目ばっちりなので結果オーライです。

追加CSSの設定で見出しタグh3のデザインを変更

h3は追加CSSで背景を白色にして二重線で修飾することで落ち着きました。試行錯誤して以下で落ち着きましたが関連記事やコメントの見出しには反映されておらず、そこはもうあきらめました。

/*h3に左太線と二重下線*/
.main .entry-content h3{
    background: #ffffff;
    border-left: solid 5px #55295b;
    border-bottom: double 5px #55295b;
}

追加CSSの設定により見出しをおしゃれにする方法は下のWebが詳しいです。

投稿記事の表示幅（カラム幅）の調整

投稿記事の横幅が広すぎて読みづらいので幅を狭くしました。これも簡単にできました。

その後、やっぱり800pxに戻しました。680pxだと一行が短く感じたので。