WordPressはもちろん、はてなブログなどの無料ブログでもできるだけ綺麗に、そして読みやすいデザインを目指したいもの。
あなたの使っているＰＣやスマホでなら綺麗に表示できているけれど、他の人のＰＣやスマホできれいに表示できているかと言われればそうではありません。
実際に色々な人のブログを見ましたが、実際にレイアウトが崩れている人がちらほらいました。
一生懸命書いた内容が読まれることなく、ただ「デザインが崩れていて読みにくいor読めない」という理由だけでせっかくの読者を逃がしているかもしれません。
また、これまで多く紹介してきたHTML&CSSの記事についても、デザインが整わなくて良く分からないという場合に頻繁に使います。以下は前回の記事です。
今回はそんな人のために、よりよいデザインを目指すためにデベロッパーツールの使い方について紹介します。
1.Chromeデベロッパーツールの基本的な使い方
デベロッパーツールってそもそもなんだよ！という方のために、実際に使ってみることをお勧めします！
まず、Chromeでデベロッパーツールを起動させてみましょう。
（Chromeでなくても一部ブラウザでならできます）
適当なWeb画面で、右クリック→検証をクリック
すると以下のような難しそうな画面になります。
この画面で、検証をクリックしたサイトのHTMLとCSSを見ることができます。
それを駆使することで、「なぜデザインが崩れたのか」「こんな色にしたらどんな見た目になるだろうか」「PCではなくスマホではどう見えているだろうか」等が分かります。
デベロッパーツールを使用してCSSを詳しく見る
特定要素のCSSを見るためには、以下のように使います。
右上にある矢印アイコンをクリックすることで、Web上の要素を詳しく見ていくことができます。
今回選択したのはpタグ（文字）。右下がCSSになっているので、そこをいじることで、文字を赤色にしてみました。
CSSの最後の部分の「；」の右側をクリックすることで新しくCSSを追加できます。
このようにして、様々なブログパーツの色を自分のサイトに合うように考えることが可能です。
そのためピッタリのCSSが分かるまで、作業中にリロードしないように注意が必要です。
CSSが反映されないときの表示
CSSを見ていくと、画像のようになっているCSSの場所があります。
オレンジ色の矢印の部分は、なんらかの理由でそのCSSが適用されていないということ。
棒線がひかれていて、無効化されています。
その要素に反映されているCSSが複数あり、優先順位の高いものに邪魔されている場合がほとんどです。
水色の矢印の部分は、単純にエラー。これも反映されていません。
例として挙げた画像はスペルミスが原因でエラーになっています。
このようにスペルミスや、思わぬ部分でのCSSの重なりで思った通りのデザインになっていない場合がありますので、見直しましょう。
2.デベロッパーツールでHTMLを編集する
CSSだけでなく、HTMLも編集可能です。
CSSの編集方法で説明したやり方で要素を選択し、右クリック。
その後、Edit as HTMLをクリックすることでHTMLも自由に書き換えることができます。
単純に文字（ブラウザに表示中の内容）を書き換えてみるだけでなく、CSSでどうにもならない場合にはHTML構造の変更を考えてみることも必要です。
個人的には、文字が何文字も増えてもデザインが崩れないか？を見るときによく使います。
3.デベロッパーツールを使用してレイアウトを確認
最後に、デベロッパーツールを使用したレスポンシブデザイン対応の確認方法です。
以下の画像の順番にクリックしていくことで、画面の幅を自由に変更することができます。
①の部分をクリックすると、デバイス別のサイトが表示されます。
②の部分をクリックすると、幅が変わります。画像では、Mobile Lのサイズですね。
私の持っているスマホは、XPeriaXなのですが、意外にもMobile Mより小さいサイズでしたので、できるだけ小さいところ（幅300pxくらい）まで見ていくようにしましょう。
赤の○の部分を左右にドラッグすることで、横幅を自由に変更することができます。
すべての横幅に対し、デザインがどうなっているか確認することができますので、必ずやるようにしましょう。
最低でも、トップページと、どこか1記事(タイトルや見出しの文字数が多いものが崩れやすい)は確認するようにしましょう。
レイアウトの崩れに気を付けるには？
レイアウトの崩れにはなかなか気づかないものです。
対策として、きちんと確認して自分で修正する以外にも、有料テーマを使用するというものもあります。
もちろん、無料テーマをCSSをいじることなくそのまま使用するのもアリですが、正直あまり好きではありません。
実際に色々なブログを見ましたが、有料テーマを使用されている方は確実にレイアウトが整っているだけでなく、見やすいブログでした。
私は有料テーマを使っていませんので、しっかり確認はしたけどもしもレイアウトの崩れがあったらどうしよう、という状態ではあります。
そこは自分自身の技術力次第ですが、膨大な時間をかける必要があるのでオススメできません。
追記：有料テーマSANGOに変更しました！
4.デベロッパーツールを駆使してデザインに気を使おう
デザインに気を遣うだけで、今までしっかりと読まれることのなかった記事が読まれることは間違いないです。
具体的にいえば、ユーザの回遊率がアップします。
それに従ってＰＶも伸びていくはずです。
でも、一体どこから見直していけばいいの～！？って人は、以下の記事を参考にしつつ、良いデザインにカスタマイズしてみてください。
以外にも自分のブログは見ないもの。たまには気をかけて、見直してみるのもいかがでしょうか。
