どうも、山田です。
今回は、「賢威で見出し（hタグ）デザインを変更する方法」についてです。
見出しはとても大きな印象を与える
ブログを作る上で、見出しは非常に重要な役割を担います。
タイトルの次に見るといっても過言ではありません。
見出しにどんな内容が書かれているかで、そのまま読み進めるか、離脱するかが決まってきます。
そして、もちろん見出しのコピーも大事ですが、デザインも一つの印象を決める要素になります。
今回は、見出し（hタグ）のデザインを変更する方法を紹介していきます。
デザイン変更はCSSを変えるだけ
今回は、賢威のテンプレートの例を挙げます。
外観→テーマの編集→base.cssに進みます。
見出しの項目が1109行目あたりにあるので、ここに進みます。
H1はタイトルに相当するので、記事中の見出しでいうと、h2以降のタグになります。
ここでは、1147行に相当します。
.main-body h2{
position: relative;
margin: 0 0 1.5em;
padding: 0.8em;
background: #bd4646;
color: #fff;
font-size: 1.143em;
font-weight: bold;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
見出しデザイン変更例
ここでは、様々なデザイン例を紹介します。
例えば、囲みが欲しいとなったら、下記の角丸などもあります。
.main-body h2{
margin: 0 0 1.5em;
padding: 0.8em;
border: 2px solid #800000;
font-size: 1.143em;
font-weight: bold;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
角を四角にしたければ、こちら。
.main-body h2{
margin: 0 0 1.5em;
padding: 0.8em;
font-size: 1.143em;
font-weight: bold;
border: 2px solid #800000;
box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
-ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
僕は、吹き出しを使っています。
.main-body h2{
position: relative;
margin: 0 0 1.5em;
padding: 0.8em;
background: #bd4646;
color: #fff;
font-size: 1.143em;
font-weight: bold;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}.main-body h2:after{
position: absolute;
bottom: -15px;
left: 10%;
z-index: 90;
margin-left: -15px;
border-top: 15px solid #bd4646;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 0;
content: "";
}
上下二重線なんかもあります。
.main-body h2{
margin: 0 0 1.5em;
padding: 0.8em;
border-top: 4px double #800000;
border-bottom: 4px double #800000;
font-size: 1.143em;
font-weight: bold;
}
デザインは個性を出すところでもあるので、色々と試してみてくださいね。
