hiro-yamahiro-yama

こんにちわ、hiro-yamaです。

副業でアフィリエイトを実践し、家族と幸せに暮らすライフスタイルを送っています。

hiro-yamaのプロフィール

どうも、山田です。
 
 
今回は、「賢威で見出し(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;
}

デザインは個性を出すところでもあるので、色々と試してみてくださいね。
 
 

お名前

メールアドレス(必須)



Powered by メール配信システム オレンジメール