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