ブログ

【Cocoon】見出しのカスタマイズ【CSS】

WordPressの無料テーマ「Cocoon」のカスタマイズです。

今回は見出しのデザインのアレンジ。

スポンサーリンク

見出しのデザインを変える方法

記事中の見出しのデザインを変えるには、スタイルシートCSSコードを記入します。

まずWordpressの管理画面の「外観」から「テーマエディター」を選び、

こちらの「Cocoon Child: スタイルシート (style.css)」の中にコードを書きこんでいきます。

/*必要ならばここにコードを書く*/ と書いてあるので、その下にコピペか打ち込みでコードを記入し、画面下にある更新ボタンを押せば完了です。

初期デザイン

cocoonの初期デザインはこんな感じ。

色はおそらく「cocoon設定」で設定したキーカラーが自動で反映されているようです。最初はグレーだったのですが、そちらで色の設定をしていたのでピンク色になっています。

初期デザインのCSS

これらは親テーマのスタイルシートで設定されています。

コードはこんな感じ。

.article h2 {
font-size: 24px;
padding: 25px;
background-color: #f5f6f7;
border-radius: 2px;
}
.article h3 {
border-left: 7px solid #888;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-size: 22px;
padding: 12px 20px;
}
.article h4 {
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
}
.article h5 {
border-bottom: 2px solid #ddd;
}
.article h6 {
border-bottom: 1px solid #ddd;
}

親テーマのCSSは弄らない方が良いので、これに対応するCSSを子テーマのスタイルシートに書き加えることで好きなデザインに変更していきます。

カスタマイズ後の見出しデザイン

いろいろやってみて、以下のデザインにしてみました。

いろんなサイトで見出しデザインのCSSが紹介されているので、色々と調べて参考にしました。

ひとつずつコードをまとめていきます。

 

文字の上下に点線を入れてリボンっぽくしています。

コードはこちら。

/* 見出しH2 */
.article h2{
background: #d88c9a;
border-bottom: dashed 2px #fef4f4;
border-top: dashed 2px #fef4f4;
box-shadow: 0px 0px 0px 5px #d88c9a;
padding: 5px 10px;
border-radius: 0px;
}

 

左側にライン+背景色です。

コードはこちら。

/* 見出しH3 */
.article h3{
background: #fef4f4;
border-top:none;
border-bottom:none;
border-right:none;
border-left: solid 5px #d88c9a;
padding: 10px;
}

 

左側にラインのみです。

コードはこちら。

/* 見出しH4 */
background: transparent;
border-top:none;
border-bottom:none;
border-left: solid 5px #d88c9a;
padding: 5px 10px;
}

 

ふき出し風のデザインです。

コードはこちら。

/* 見出しH5 */
.article h5{
background: #fef4f4;
border-bottom:none;
padding: 12px;
position: relative;
}

.article h5:after {
position: absolute;
content: '';
width: 0;
height: 0;
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #fef4f4;
}

 

これは初期設定のままですね。

 

終わりに

初めてのCSSカスタマイズは見出しのデザインでした。初心者でも意外と何とかなります。

まずはコードを調べてコピペしてみて、更に色や数値の部分を弄ってどうなるか見るのをひたすら繰り返しました。デザインをいろいろと変えられるのがとても楽しいです。

色々と試しているうちにそれぞれ何を表しているのかが分かってくるので、慣れてきたら自分で更に組み替えていくのが良いんじゃないかと思います。

 

気分でデザインを変更した場合は随時更新していきます。

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