賢威で見出し(hタグ)のデザインを変更する方法
サイト作成にあたって、記事タイトルであるhタグ(見出し)はSEO的にも非常に重要
ですので、しっかり設定することは基本なのですが、賢威テンプレートではこの
hタグが非常にシンプルで何かh3もh4タグもあまり変化がなくインパクトに欠けると
思われる人は多いのではないのでしょうか。
さらに他に賢威を使っている人と同じように見えてしまって差別化を図れないと
感じる人もいると思います。
本記事はhタグ(見出し)のデザイン変更方法について解説しています。
目次
hタグ(見出し)のデザイン変更で印象は大きく変わる
WordPress(ワードプレス)サイトでhタグ(見出し)のデザインをカスタマイズすると
それだけでかなりサイトの印象が変わります。
hタグ(見出し)1つで手の込んだサイトに見えたり、これが見出しなんだと分かりやすく
記事自体が読みやすくなるということがあります。
h2タグは記事タイトルなので当然一番目立たなければいけません。
h3タグは中項目のような位置付けですが、賢威だと特にこのh3タグとh4タグの
見分けがあまりないものが多いのが現状です。
もっと中項目であるh3タグと小項目の位置付けのh4タグを視覚的にはっきり
見分けをつけれればそれ程サイト訪問者にとっても見やすくなったり、
綺麗なサイトだという印象を与えることができる可能性が高くなります。
これから順番にWordPress(ワードプレス)で使う賢威テンプレートでの
h2、h3、h4タグをカスタマイズする方法を解説していきます。
h2タグデザイン変更方法
テーマ編集のdesign.cssを開く
hタグのカスタマイズは基本的に左側ダッシュボードの外観の中にある
テーマ編集を開けば右側にあるdesign.cssからほとんどのカスタマイズが可能です。
まずはこちらをクリックしてください。
メインコンテンツ(本文)のH2タグ部分を探す
テーマ編集からdesign.cssを開けばソースがたくさん出てきます。
この中にメインコンテンツ(本文)という部分があります。
そのすぐ下に上記画像の赤枠で囲った部分のようにH2タグという部分が
出てきますのでこちらを変更していきます。
私のサイトに丁度マッチするデザインがありましたので、こちらを入力してみます。
元々の賢威のh2タグのデザインソース
#main-contents h2{
margin: 0 0 1.5em;
padding: 0.9em;
border-top: 3px solid #660000;
background: url(./images/title/bg-conts-h2.gif) left top repeat-x #eaeaea;
font-size: 1.286em;
font-weight: bold;
}#main-contents h2 a:link,
#main-contents h2 a:visited{ color: #333; }#main-contents h2 a:hover,
#main-contents h2 a:active{ color: #f60; }#main-contents h2.img-title{
margin: 0 0 1.5em;
padding: 0;
border: 0;
background: none;
}
元々のh2ソースを下記のソースに変えてみます。
当サイトの変更後h2タグのデザインソース
h2{
position: relative;
color: #fff;
background: #B92A2C;
font-size: 1.143em;
font-weight: bold;
margin: 0 -1.8em 1.5em -1.8em;
padding: 0.8em;
box-shadow: 0 1px 3px #777;
-moz-box-shadow: 0 1px 3px #777;
-webkit-box-shadow: 0 1px 3px #777;
-o-box-shadow: 0 1px 3px #777;
-ms-box-shadow: 0 1px 3px #777;
}h2:after,
h2:before{
content: “”;
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #333;
}h2:before{
right: 0;
border-left: 5px solid #333;
}h2:after{
left: 0;
border-right: 5px solid #333;
}
design.cssのh2タグのデザインソース変更箇所
design.cssの中の上記画像の赤枠で囲った部分を変更するとh2タグの変更が可能
となります。
では変更前と変更後を見比べてみましょう。
h2タグデザイン-変更前と変更後のイメージの確認
h3タグデザインの変更方法
要領はh2タグの変更と同じです。
変更箇所は同じくダッシュボードの外観→テーマ編集→design.cssから変更可能
となっています。
先程変更したdesign.css内メインコンテンツ(本文)の中にh2タグがありましたね。
そのすぐ下がh3タグとなっています。
ちなみにその下にh4、h5タグと続いていますのでまずはh3タグ部分にいきましょう。
では早速変更してみます。
元々の賢威h3タグのデザインソース
#main-contents h3{
margin: 0 0 1.5em;
padding: 0.8em;
border: 2px solid #414141;
font-size: 1.143em;
font-weight: bold;
}#main-contents h3 a:link,
#main-contents h3 a:visited{ color: #333; }#main-contents h3 a:hover,
#main-contents h3 a:active{ color: #f60; }#main-contents h3.img-title{
margin: 0 0 1.5em;
padding: 0;
border: 0;
background: none;
}
元々のh3ソースを下記のソースに変えてみます。
当サイトの変更後h3タグのデザインソース
h3{
margin: 0 0 1.5em;
padding: 0.8em;
font-size: 1.143em;
font-weight: bold;
border: 2px solid #B92A2C;
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);
}
design.cssのh3タグのデザインソース変更箇所
h2タグの変更と同様に、design.cssの中の上記画像の
赤枠で囲った部分を変更するとh3タグの変更が可能となります。
では変更前と変更後を見比べてみましょう。
h3タグ変更前と変更後のイメージの確認
なお、h4タグとh5タグの変更方法についてはh3タグと同様の方法ですので、
h4タグとh5タグの変更方法については省略します。
変更が必要と思うのであればh4タグ以降も変更を施してみてください。
hタグデザインは自分で作るか拾ってくるのが楽
じゃあそのhタグデザインってどこにあるのかという話なんですが、
ウェブ上には非常に便利なサイトがたくさんあります。
もうすでにこのソースを打ち込めば指定したイメージのhタグになるという
サイトもありますし、自分で細かく作ることができる無料サイトもあります。
hタグデザイン変更の際の注意点
hタグというのは基本的に数字が小さい方が重要度が高いです。
SEO的にもh2タグの効果は高いため、たくさん使いすぎては逆にSEOに
悪影響がおこってしまうのはそのためです。
つまり、hタグデザインの見た目も数字順通りのインパクトのものに変更した方がいいです。
h4タグがすごくド派手なのにh2は大した見た目ではないという感じの作り方を
してしまうと、サイトをぱっと見たときにすごく違和感を覚えるためです。
以上がhタグのデザインを変更する方法でした。