Cocoon　カスタマイズ　見出しをCCSで簡単カスタマイズ！

Cocoon　カスタマイズ　見出しをCCSで簡単カスタマイズ！
Cocoon 見出し色の設定変更
その他カラーコード

Cocoon　カスタマイズ　見出しをCCSで簡単カスタマイズ！

見出しを簡単にカスタマイズする方法をご紹介します。

下記の見出し場合のCCSコードを以下に示します。

左側のラインがスカイブルー。

背景色はグレー。

.article h2 {
   padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
   color: #494949;/*文字色*/
   background: #f4f4f4;/*背景色*/
   border-left: solid 8px #7db4e6;/*左線*/
 }

上記を外観、カスタマイズにおける追加CCSにコピーペーストします。

（このサイトではコピープロテクトを使用しているため、お手数ですが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;/*左線*/
 }

みなさんもお好みに合わせて修正してみてください。