簡単にワードプレスの見出しデザインを装飾したい

ワードプレス

簡単にワードプレスの見出しデザインを装飾したい

ワードプレスの無料テーマは、無料で使えることがメリットですが、いろいろなところがシンプルなデザインになっていたります。

見出しもその一つ。

今回は、見出しのデザインを簡単に装飾する方法を紹介します。

私のコラムサイトで以前使用していたOLSENというテーマで見ていきますね。

＜before＞

赤枠の部分が見出しです。（h3を使用）

＜after＞

シンプルな装飾を選んだので、わかりにくいかもしれませんが、拡大するとこんな感じです。

＊目次＊

追加CSSに入力するだけ

見出しのデザインにプラグインや難しい設定は不要で、コピペして入力するだけです。

外観＞カスタマイズ＞追加CSS

好みのデザインのコードをコピペしてください。

今回、私が選んだ見出しはこちらのコードです。

h3 {
padding: .75em 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

シンプルな見出しを希望している方は、こちらのサイトが参考になります。

上記も使用させていただきました。

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50
https://www.nxworld.net/tips/50-css-heading-styling.html

見出しやタイトルの装飾は、たくさんのサイトが紹介しているので、好みのものを探してみてくださいね。

見出しデザイン装飾例

上記サイトを参考にして、少し変えていくつか見出しを作ってみました。

左ボーダー＆背景色ありの見出し

h3 {
padding: .5em .75em;
background-color: #f6f6f6;
border-left: 6px solid #F3A68C;
}

h3のところは、あなたのブログに合わせてh2やh4に変更してくださいね。

左＆ボーダーラインの見出し

h3 {
position: relative;
padding: .25em 0 .5em .75em;
border-left: 6px solid #F3A68C;
}
h3::after {
position: absolute;
left: 0;
bottom: 0;
content: ”;
width: 100%;
height: 0;
border-bottom: 1px solid #ccc;
}

2色のボーダーラインの見出し

h3 {
position: relative;
padding-bottom: .5em;
border-bottom: 4px solid #ccc;
}
h3::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: ”;
width: 20%;
height: 4px;
background-color: #F3A68C;
}

見出しの装飾が変わるだけでも気分が変わりますよね。

ぜひ試してみてください。

上記の通りに入力したのにカスタマイズがうまく反映されないときは、こちらをご覧ください。