Cocoon 見出しをCCSで簡単カスタマイズ!
見出しを簡単にカスタマイズする方法をご紹介します。
下記の見出し場合のCCSコードを以下に示します。

左側のラインがスカイブルー。
背景色はグレー。
.article h2 { padding: 0.4em 0.5em;/*文字の上下 左右の余白*/ color: #494949;/*文字色*/ background: #f4f4f4;/*背景色*/ border-left: solid 8px #7db4e6;/*左線*/ }
上記を外観、カスタマイズにおける追加CCSにコピーペーストします。



Cocoon 見出し色の設定変更
各コードについて説明します。
colorで文字色を修正できます。このコードでは白になっています。
.article h2 { padding: 0.4em 0.5em;/*文字の上下 左右の余白*/ color: #494949;/*文字色*/ background: #f4f4f4;/*背景色*/ border-left: solid 8px #7db4e6;/*左線*/ }
backgroundで背景色を修正できます。このコードではグレーになっています。
.article h2 { padding: 0.4em 0.5em;/*文字の上下 左右の余白*/ color: #494949;/*文字色*/ background: #f4f4f4;/*背景色*/ border-left: solid 8px #7db4e6;/*左線*/ }
border-leftで左のラインの幅と色を修正できます。 このコードではスカイブルーになっています。
pxの前の数字を大きくすると、ラインが太くなります。
.article h2 { padding: 0.4em 0.5em;/*文字の上下 左右の余白*/ color: #494949;/*文字色*/ background: #f4f4f4;/*背景色*/ border-left: solid 8px #7db4e6;/*左線*/ }
例えば、下記のように背景を白に変更し、左のラインの太さを太くするコードは下記のようになります。

.article h2 { padding: 0.4em 0.5em;/*文字の上下 左右の余白*/ color: #494949;/*文字色*/ background: #fff;/*背景色*/ border-left: solid 30px #7db4e6;/*左線*/ }
みなさんもお好みに合わせて修正してみてください。
その他カラーコード
カラーコードは下記を参考に願います。
