見出しを新しくした理由
Stingerの見出し(hxタグ）もシンプルで悪くはなかったが
もうちょっと、目立つような、俺好みの物に変更してみた
今回変更してみた感想は、思ったより簡単
それでいて、見栄えもだいぶ良くなったし
もっと早く変えても良かったかもしれない
変更の方法
見出しの変更は
外観→テーマの編集→スタイルシート（style.css）
スクロールバー内からh2~h4あたりでページ内検索をして、引っかかるものがだいたいそれらしい
Stigerだと、隠し見出しがあるらしく、検索をかけると複数引っかかってちょっと混乱した
h2だと、何もついてないただの「h2」の部分を
h3だと、「.kizi h3」を
h4だと「.post h4」以下のところを書き換えて上げればよいらしい
デフォルトテーマの「Twenty Fourteen」だと
デフォルトらしく、簡素にh1~h5としか書かれていなかったな
新しくした見出しのデザインとcss
新しい見出しは下記の通り
今後、また変えるかもしれないので画像を貼っておくかな
大きい見出しほど、目立つように配慮してみた
H1はブログだと、記事タイトルに自動で割り振られてる（ページソースでも確認）
H1を複数を使うのは、SEO的に、悪いという人がいる
別に、最近だとそんなことないよ！という人もいるが、H1をたくさんつかうことで、良くなることも無いだろうし
個人的には、H1を複数使うのはスマートではないと思うので、H2以下だけ使うようにすれば、別にいいだろう
H5~も設定は可能だが、今までの経験上、H3まであれば必要十分な気がする
とりあえず、H4まで設定したが、H5以下はいらんだろうな
cssはこんな感じ
h2 {
font-size: 30px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 45px;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #8A0808;
line-height: 30px;
padding: 15px;
width: 100%;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 40px;
margin-left: 0px;
background: #FE2E2E;
color: #ffffff;
}.kizi h3 {
font-size: 20px;
margin-bottom: 30px;
margin-top: 10px;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 45px;
color: #000000;
line-height: 30px;
background-image: url(images/cah3-bk.png);
background-repeat: no-repeat;
background-position: left center;
margin-left: 0px;
border-left: 10px solid #FA5858;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FA5858;
}.post h4 {
border-bottom: 2px solid #FA5858;
font-size: 16px;
font-weight: bold;
padding: 10px;
margin-bottom: 20px;
background-color: #f3f3f3;
line-height: 28px;
}
WordPressテーマ STINGERのフォントサイズや見出しをオリジナルに変更する方法
このあたりを参考にさせていただき、自分流にアレンジさせていただきました
ありがとうございます
見出しのサンプルなら寝ログさんのサイトでたくさんまとめられていた
少しの労力でサイトをかっこよく！見出しのCSSデザインに役立つジェネレーター＆サンプル集30個まとめ
ここから、気に入ったのをコピペするのもよし
見出しを失敗した体験談
今まで、何故かH3～から見出しを使う習慣が身についていた
たぶん、StingerのH3タグが秀逸だからだろうな
しかし、H1（記事タイトル）からH3に飛ぶのは、あまりSEO的によろしくないとのことだ
ホントは、ちゃんと、順序良くを見出しタグを使わなければならないらしい
今後、気をつけれなければ
コメント