【cocoon】の見出しH2~H6の見た目を変更する方法【カラフルデザイン CSS コピペでOK】

スポンサーリンク

スポンサーリンク

見出しH2~H6の見た目を変えましょう。

見出しは重要な要素でもありますが、デフォルトでは、とてもさみしくないですか?

デフォルトの状態

色を付けて見やすくカスタマイズしましょう。

カスタマイズ後のデザイン

こちらと同じデザインでよければ、ページ下部にCSSを記述してますので、
コピペで利用していただいても結構です。

デフォルトCSSをリセット

デフォルト状態のCSSでは、デザイン変更が思うようにいきませんので、
いったんリセットコードを記述して、デフォルトCSSを解除します。

以下のCSSをダッシュボードから外観→テーマエディターにコピペして下さい。

/* 見出しをリセット */
.article h2 {
padding: 0;
background: none;
}
.article h3 {
border: none;
padding: 0;
}
.article h4 {
border: none;
padding: 0;
}
.article h5 {
border: none;
padding: 0;
}
.article h6 {
border: none;
padding: 0;
}

新たにCSSを記述する

上の「見出しリセット」を記述した下に新たなデザインのCSSを追記します。

/* 見出しH2~H6の変更 */
.article h2 {
color: #333; /*文字の色を変更*/
padding: .8em 1em;
margin-top: 80px;
background: #ffffe0; /*内側の色を変更*/
border-top: 4px solid #ff7f50; /*線の色を変更*/
border-bottom: 4px solid #ff7f50; /*線の色を変更*/
}
.article h3 {
color: #333; /*文字の色を変更*/
padding: .5em 0;
margin-top: 40px;
border-top: 3px solid #ff7f50; /*線の色を変更*/
border-bottom: 3px solid #ff7f50; /*線の色を変更*/
}
.article h4 {
color: #333; /*文字の色を変更*/
padding: .2em 1em;
margin-top: 40px;
border-left: 6px solid #ff7f50; /*線の色を変更*/
}
.article h5 {
color: #333; /*文字の色を変更*/
margin-top: 40px;
border-bottom: solid 2px #ff7f50; /*線の色を変更*/
}
.article h6 {
color: #333; /*文字の色を変更*/
margin-top: 40px;
border-bottom: solid 1px #ff7f50; /*線の色を変更*/
}

お好きな色に変更してください。

/*〇〇の色を変更*/ の箇所をお好きな色に変更して、
ご自身のサイトカラーと合わせてみてはいかがでしょうか。

WordPressブログ運営
スポンサーリンク
シェアして頂けるとすごく嬉しいです^^
フォロー数が増えるとモチベーション上がります!よろしくお願いいたしますm(_ _ )m
スポンサーリンク
はいたか HAITAKA Blog

コメント

タイトルとURLをコピーしました