ブロガー向けの内容です。
なんだか最近新しい記事を書くよりも過去記事の修正が多いような気がします。
100記事以上書いてるようなブログ運営者はアクセスが多い記事を見直してみると回遊率や成約率が上がる可能性が高いのでおすすめですよ。
さて、そんなふうに過去記事を見直したりフォントサイズを変更したりしているとなんだか見出しのデザインがマッチしていない記事が多いなぁと思うようになってきたのでCSSを変更してみました。
以前の見出しデザイン
以前は文章を読む時にストレスが無く読み進められるようになるべくシンプルなデザインにしてました。
それこそ「フォントサイズを変えて太字にするだけ」という超シンプルなもの。
※前回の見出し変更についてはこちら⇒ブログの見出しデザイン|カラフルでシンプルなカスタマイズ例
変更した時は良いじゃんと思っていたんですがだんだん自分の書く記事の内容とマッチしてない印象になってきてしまいました。
まとめ記事だと見出しがわかりにくい
以前のシンプルな見出しは文章を読み進めていくタイプの記事を書くなら読みやすくて良いんですが拡張機能まとめとかiPhoneアプリまとめとか別々のものをまとめる記事だと区切りが分かりにくいという問題がありました。
この下の画像を見るとよくわかりますけど大きな画像に見出しが負けちゃってますよね。
※上記画像の記事はこちら。照らしあわせてみると違いがよくわかります。
大きな画像とか使ってると見出しよりも画像が目立っちゃうんですよね。
しかもまとめ記事のほうが平均的にアクセス数も多いのでそっちに合わせて見出しのデザインを変更してみました。
新しい見出しデザイン
んで新しく作った見出しのデザインがこちら。
↓これがh2見出し。
↓そしてこっちがh3見出し。
近くに大きな画像があっても負けることなく見出しが目立つようになりました。
読み進めるタイプの記事だと見出しが主張しすぎて邪魔になるかもしれませんが自分のブログだとどちらかというと情報をまとめている記事のほうが多いのでこっちにしてみました。
新しい見出しのCSS
設定したCSSはこちら。パクリスペクトする場合はどうぞ。
ただしWordPress無料テーマのSimplicityをベースに子テーマに追記しているのでテーマが違う場合はもう少し変更しないといけません。
また、Simplicityの完全レスポンシブではなくパソコンとスマホ別々にCSSを適用しているので基本のCSSとスマホのCSSが別々にあります。
Simplicityのバージョンは1.9.3なので2系以降のバージョンだとスマホ用のImportantは必要ないかも。
基本CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.article h2 { line-height: 160%; border: none; font-weight: bold; font-size: 26px; color: #fff; background: #43779D; padding: 10px 44px; margin: 70px -44px 25px -44px; } .article h3 { line-height: 160%; font-weight: bold; font-size: 20px; color: #333; padding: 7px 10px 3px 30px; margin: 60px -44px 20px; border-left: 13px solid #43779D; border-bottom: 4px solid #DDD; background: #eee; } |
スマホ用CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.article h2 { font-size:18px; line-height: 150%; margin: 40px 0 20px !important; padding: 10px; } .article h3 { font-size: 16px; color: #333; padding: 7px 5px 3px 10px; line-height: 140%; border-left: 9px solid #43779D; margin: 40px 0 15px !important; } |
スマホ用はわずかな微調整なので無くてもいいっちゃいいですが。
写真と見出し以外は見られない
友人に何かを探す想定でGoogle検索してもらい自分のブログだとは伝えずに見てもらったりもしたんですが、
写真と見出し以外まったく見られませんね。
深い悩み系じゃなくて雑記ブログのライフハック系だとふらっと立ち寄られることが多いのでほんとにマウススクロールのスピードが速いです。本文なんか1ミリたりとも読んでません。
しかも他のページにも移動しまくりでひと通り見たあとで最初見たブログに帰ってきたりして非常に興味深い動きをしてました。
ブロガーは本文を読まれないと思うくらいで丁度良いと思いますよ。
<関連>
⇒ブログ見出しデザインその2