ratio_3_2 のカスタマイズ方法

見出し h3 をオリジナルの装飾にカスタマイズする方法【baserCMS ratio_3_2】

見出し h3 をオリジナルの装飾にカスタマイズする方法【baserCMS ratio_3_2】

見出し(h3)を装飾したい方に


今回は、見出し <h3> のカスタマイズ方法をご紹介いたします。

◆変更前
h3 見出し


◆変更後

見出し3


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

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

しかしながら、薄い色に設定した場合は見出しのインパクトが弱まってしまいます・・・
スポンサードリンク

実践編

当サイトは、グリーンを基調にしていますので、見出しもそれに合わせています。同じ様な装飾をされたい方は色味だけ変えれば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
css3generator.png

使い方

ひとまず左のツマミを触って下さい。右側にすぐさま反映されます。気に入った所で GET THE CODE! からコードをコピーできます。 詳しい使い方は Google 先生に聞いてみて下さい^^;


この様な方法で装飾することも出来ますし、ネット上にたくさん無料のデザインがありますので、気に入ったものに変更できると思います。
→ 見出し 装飾 css で検索
 
気に入った装飾を下記にあてはめます。
h3,
.entry-contents h3,
.entry-contents .h3 {
/*この中にコードをペーストすればOK*/

}
 

装飾の一部だけがおかしい時は・・・

チェック1

baserCMS設置フォルダ/files/theme_configs 内の config.css の下記の部分をコメントアウトして下さい。
midashiconfig.png

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 内の下記の部分を削除するかコメントアウトします。
h3css.png
他の部分も含めて、: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 の見出しは個人的にもよく使います。 メリハリを付けるためにも、一呼吸おくためにも、しっかり余白を取ると読みやすくなると思います(^^)/

お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。
 
ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

にほんブログ村 デザインブログ Webデザインへブログランキング

月別アーカイブ一覧

新着情報

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

2017-06-25

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

2017-06-19

baserCMSの管理画面がSSL化に対応していない!管理画面も完全SSL化させる方法→ 前回、やっとSSL化したのですが、管理画面がSSL...

baserCMS

CakePHP(tm) : Rapid Development Framework