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;/*左線*/
}みなさんもお好みに合わせて修正してみてください。
その他カラーコード
カラーコードは下記を参考に願います。
