ブログのスマホデザインを仮変更するときに便利な「Chrome開発ツール(要素の検証)」を紹介

このエントリーをはてなブックマークに追加

今回は「ブログのスマホサイトをいじってみたいけど、いきなり本番でいじってしまうのは怖い」というブロガー向けの記事です。CSSなどをいじりながらリアルタイムで確認する方法を紹介します。

これを知っておくと、ブログのデザイン変更が楽になりますので覚えておきましょう。

スマホでの表示を確認しながらテーマをいじる

LG G Flex
LG G Flex / Janitors

ブログのスマホデザインをいじるときに便利なのが「Chrome開発(デベロッパー)ツール(以下、デベロッパー・ツール)」です。これはGoogle Chromeというブラウザで使える開発に役立つツールです。

WordPressでテーマをいじる際、これを使えば作業がはかどります。

では、これから使い方を以下の手順で説明していきます。

0.【準備段階】どうやってスマホサイトの表示を確認するか
1. デベロッパー・ツールを開く方法
2. デベロッパー・ツールを見やすくする方法(右に寄せる)
3. 【実際にいじる】リアルタイムでCSSを変更する方法

スポンサーリンク

0.【準備段階】どうやってスマホサイトの表示を確認するか

スマホの表示を確認しておくために、Chromeの拡張機能を使いましょう。

参照:タブ単位でユーザーエージェントの切替ができるChrome拡張機能「MobileLayouter」

「MobileLayouter」を使えば、iPhoneなど端末ごとにどう見えているかを確認する事ができます。これを利用してお好みのスマホ表示にしておきましょう。

スマホサイトを確認してテーマをいじる
僕は今回「iPhone5s」を選択しました。これでブラウザ上にてスマホでの表示が確認できます。

スポンサーリンク

1. デベロッパー・ツールを開く方法

では、デベロッパー・ツールを開いてみましょう。
右クリックして「要素の検証」を選択すると、デベロッパー・ツールが開きます。画面下に表示されているものがそれにあたります。
デベロッパー・ツールの便利な使い方
そこで、htmlの要素(h1タグとかdiv, aタグとか)を確認できます。

なお、デベロッパー・ツールはショートカットキーでも開けます。「command + option + i」をタイプすればOKです。

2. デベロッパー・ツールを見やすくする方法(右に寄せる)

普通にツールを開いただけでは、htmlを確認する画面が下にあって開発がしにくいです。
ですので、デベロッパー・ツール画面を右に寄せてしまいましょう。

やり方は簡単です。以下の赤枠で囲った部分を長押ししましょう。

デベロッパー・ツールの便利な使い方

デベロッパー・ツールの便利な使い方

右画面に寄せるためのアイコンが表示されますので、それをクリックします。
すると、画面を右に寄せる事ができます。
デベロッパー・ツールの便利な使い方

幅は赤丸で囲った部分をスライドさせて調整して下さい。
ちなみに、iPhoneの横幅は320pxですので、320pxでやった方がいいです。
デベロッパー・ツールの便利な使い方
これを利用すれば、スマホサイトのデザイン修正ができます。

3. 【実際にいじる】リアルタイムでCSSを変更する方法

では本題であるテーマをいじる方法を。
まず、いじりたい場所で右クリックして「要素の検証」をクリックします。
デベロッパー・ツールの便利な使い方

今回はh4タグのCSSをいじってみる事にします。

すると、以下の画面が表示され、左側にhtmlの要素。右側にh4タグに効いているCSSが表示されます。
デベロッパー・ツールの便利な使い方

いじる前は以下のような状態になっています。

デベロッパー・ツールの便利な使い方
CSSは以下の通り。

デベロッパー・ツールの便利な使い方
では、このCSSをいじって線を赤くしてみましょう。
そのためには、「border-bottom」の「black」の部分を「red」にしてあげます。
デベロッパー・ツールの便利な使い方
すると、このように線が赤色に変わります。

デベロッパー・ツールの便利な使い方
ちなみに、これは実際にCSSが書き換えられているわけではなく、自分が見てるページだけが変更されているだけなので、ご安心を。

こうやってスマホサイトのいじりたい部分に手を加えていけば、細かくスマホサイトデザインを修正していく事ができます。(色は「RGB値」で指定すると細かく設定できますので、そちらを使った方が良いです)

ぜひ試してみて下さい。
なお、ドットインストールの「Chrome Developer Tools入門」も参考になりますので、ぜひ見ておきましょう。

まとめ

今日紹介した方法で、僕は作業効率が格段に上がりました。スマホサイトをいじってみたいけど、ちょっと怖いなと思っているブロガーは実践してみて下さい。

ではまた!

筆者Twitterアカウント

フォローいただければ、最新記事や、ブログで稼ぐ、アクセスを集める方法などをタイムラインにお届けします。

仕事で悩む人から人気の記事

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

いつもシェア感謝です!今回もぜひ

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!