
見出し(h3)を装飾したい方に
今回は、見出し <h3> のカスタマイズ方法をご紹介いたします。
◆変更前

◆変更後
見出し3
このテーマでは、テーマ設定でサブカラーに設定した色が見出し3に反映されるようになっています。

サブカラーはトップページの背景色として使われているので、薄い色を選ばれる方が多いと思います。

しかしながら、薄い色に設定した場合は見出しのインパクトが弱まってしまいます・・・
実践編
当サイトは、グリーンを基調にしていますので、見出しもそれに合わせています。同じ様な装飾をされたい方は色味だけ変えればOKです。custom.css に下記を記述します。
h3,
.entry-contents h3,
.entry-contents .h3 {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#82ae46', endColorstr = '#688B38');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#82ae46', endColorstr = '#688B38')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #82ae46, #688B38);
background-image: -ms-linear-gradient(top, #82ae46, #688B38);
background-image: -o-linear-gradient(top, #82ae46, #688B38);
background-image: -webkit-gradient(linear, center top, center bottom, from(#82ae46), to(#688B38));
background-image: -webkit-linear-gradient(top, #82ae46, #688B38);
background-image: linear-gradient(top, #82ae46, #688B38);
/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
-webkit-box-shadow: 0px 2px 5px;
box-shadow: 0px 2px 5px #CCC;
background-color:#FFF;
margin-top:40px;
margin-bottom:30px;
position: relative;
font-size: 110%;
color: #FFF;
font-weight:400;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
padding: .7em .75em;
clear: both;
}
h3:after,
.entry-contents h3:after,
.entry-contents .h3:after {
content: "";
position: absolute;
top: 100%;
left: 25px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 10px solid #5F7F33;
}
少し長いですが簡単です。4~16行目までは、背景に 緑のグラデーションを指定しています。下の濃いグリーン(#688B38) → 上のグリーン(#82ae46)という感じです。記述が多いのは色々なブラウザに対応するためです。→ 原色大辞典(色目の参考に)
h3見本
19~23行目で影と余白の設定。24~28行目で中の文字の指定を行っています。背景色のグラデーションやシャドウを簡単に設定できるサイトがありますので、こちらを利用すれば少しの知識で簡単に指定ができます。
→ CSS3 GENERATOR

使い方
ひとまず左のツマミを触って下さい。右側にすぐさま反映されます。気に入った所で GET THE CODE! からコードをコピーできます。 詳しい使い方は Google 先生に聞いてみて下さい^^;この様な方法で装飾することも出来ますし、ネット上にたくさん無料のデザインがありますので、気に入ったものに変更できると思います。
→ 見出し 装飾 css で検索
気に入った装飾を下記にあてはめます。
h3,
.entry-contents h3,
.entry-contents .h3 {
/*この中にコードをペーストすればOK*/
}
装飾の一部だけがおかしい時は・・・
チェック1
baserCMS設置フォルダ/files/theme_configs 内の config.css の下記の部分をコメントアウトして下さい。
config.css 内の h3 を指定してる部分
/* entry-contents */
.entry-contents hr {
border-top-color: #fbfaf5;
}
/* ここから
.entry-contents h3,
.entry-contents .h3 {
background-color: #fbfaf5;
}
ここまでコメントアウト */
.entry-contents h4:before,
.entry-contents .h4:before {
background-color: #82ae46;
}
コメントアウト(CSSが効かない状態に)します。
custom.css より後に config.css が読み込まれるため、CSSの指定が上書きされてしまう為です。
チェック2
style.min.css 内の下記の部分を削除するかコメントアウトします。
他の部分も含めて、:before を display:none; で表示しない記述があります。これがあるため、h3 の before 要素が表示されません。
コメントアウト済みのコード
.entry-share .btn .fa{display:block;font-size:28px}.entry-contents .h1:before,.entry-contents .h2:before,/*.entry-contents .h3:before,*/.entry-contents h1:before,.entry-contents h2:before/*,.entry-contents h3:before*/{display:none}.entry-contents{line-height:1.75}@media (min-width:600px){.entry-contents{font-size:115%}}
表示が変わらない時は・・・
ページを更新する (PCからは F5 を押す)
スーパーリロードする (PCから Ctrl + F5 を同時押し Windows)
キャッシュをクリアする
→ ブラウザのキャッシュをクリアする方法(PC)→ ブラウザのキャッシュをクリアする方法(スマートフォン)
最後に・・・
h3 の見出しは個人的にもよく使います。 メリハリを付けるためにも、一呼吸おくためにも、しっかり余白を取ると読みやすくなると思います(^^)/お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。