【WordPress】見出しのデザインやフォントでわかりやすいサイトに【CSS】

見出しのフォントや色を変更する

ワードプレスのサイトでは↑の赤い文字のように「見出し」というものがあり、H1からH6までの数字があります。
それぞれデザインを変えることもでき、見出しがあると記事も読みやすくなるため、読みやすいページを作っていくことで読んでくれる人が増え、アクセスアップにも繋げていけます。
またGoogleの検索エンジンも見出しに入れたキーワードも重要としているため、見出しに検索されたいキーワードを入れることによってSEO対策のひとつにもなります。
見出しはフォントの大きさだけでなく色や形も変更できより見やすいデザインを作ることが出来ます。

見出しの効果

H1：記事タイトル、H2：大見出し、H3：中見出し、H4～：小見出し…という風に数字の小さい物から順につけていきます。
順番が入れ替わったり、番号を飛ばしてしまうと評価が下がってしまうため注意しましょう。
また繰り替えし使うことも避けましょう。

見出しの種類

簡単な見出しのデザインをいくつか紹介します。
色や大きさは自由に変えられるので自分のサイトに合った形にしましょう。どの番号の見出しに使っても大丈夫です。

このサイトによくある見出し　h2


角丸四角の囲み　h3


下ライン破線　h4


付箋付き　h5



それぞれ下のh2～h5のコードをCSSに入れることで見出しの装飾やフォントカラーが変更できます！

.h2 {
    margin-top: 35px;
    margin-bottom: 10px;
    color: #ba616a;
    font-weight: 700;
}


h3 {
    font-size: 20px!important;
    color: #ba616a;
    text-align: center;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 0!important;
    padding: 14px;
}


h4 {
    font-size: 25px ;
    color: #ba616a;
    font-weight: 720 ;
    line-height: 1.5 ;
    border-bottom: dashed 2px #aaa ;
    margin-bottom: 5px !important;    margin-top: 20px;
    text-align: center;
}


h5 {
    font-size: 20px;
    border-bottom: dashed 2px #ba616a;
    margin-top: 30px;
    font-weight: bold;
    padding-left: 0.5em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    margin-bottom: 2em;
    border-left: 5px solid #ba616a;
    color: #ba616a;
}

まとめ

今回はサイト内や記事のフォントの色や形の変更に続き見出しの効果や装飾についてまとめてみました。
きちん設定しておけばどのページの見出しにもCSSを当てることが出来ますので統一感も出ます！
より読みやすいサイトを目指してデザインの見直しもしてみましょう！