今見ているページのコード確認&編集デモが見れる【要素の検証】

どうも、Gammy Design Works代表の石上です。

 

自分のブログをカスタマイズする時に、一般的には「ここをこうしたい」とか、

「ここをこうしたらどうだろう?」と頭の中で想像しながら作業をしていると思います。

 

コードを変更したら、ページを開いてリロード…

そしたら思ってたのと違ってて、またコードを開いてやり直し…

 

僕自身がまさにそうだったので、もしあなたも思い当たる節があるなら、

最後まで読んでもらえれば、効率良く作業ができるようになりますよ^^

 

Google Chromeのうれしい機能「要素の検証」

まずはWebブラウザをGoogle Chromeにする必要があります。

もしそれ以外であれば、拡張機能が豊富なので乗り換える事をお勧めします^^

※他にSafariでも同様の機能があります。

 

今回ご紹介する機能はChromeの標準で使えるものなので、拡張機能を追加する必要は無いですw

 

その機能とは「要素の検証」というもので、どんな事が出来るのかというと、

  1. 今見ているページのHTMLのソースを見る事ができる。
  2. 今見ているページのCSSコードを見る事ができる。
  3. コードを書き換えて、そのまま変更後の画面をプレビューできる。
  4. スマートフォンの表示画面が確認できる。

大まかに挙げるとこんな感じで、僕も上記のような感じで使っています^^

 

では、早速開いていきましょう!

 

「要素の検証」画面を開く

1.まずはGoogle Chromeを起動して、どこでも良いのでWebページを開きます。

 

2.そして、HTMLコードやCSSコードがどのように書かれているか知りたい場所の上で、

右クリックをします。

 

3.その中で「要素の検証」という項目をクリック。

スクリーンショット_2015-04-28_18_07_54

 

 

4.すると、画面下にこのようなHTMLのソースと、CSSのソースが表示されます。

スクリーンショット_2015-04-28_18_10_04

 

左側にHTMLのソース、右側にCSSのソースが表示されるのですが、

WordPressの場合は、PHPによって出てきたHTMLのソースになります。

 

 

5.これはCSSの表示部分です。

Webデザイン アメブロカスタマイズ 加古川 Gammy-DesignWorks 2

 

カスタマイズする場合は、CSSをいじる事が多いですよね?

 

この画像では、

  1. CSSのクラス(場所)
  2. CSSファイルの名前
  3. CSSファイルの行数(この場合34行目)

の場所をChromeが読み込んでいるという事になります。

 

CSSの編集とプレビュー

この「要素の検証」の良いところは、サーバー内のファイルを触らないので、

リスクが無いところです。

 

また、編集したソースをコピーすることができるので、

気に入った表示になったらそのままコピペでカスタマイズができます^^

 

1.HTMLのソースにカーソルを載せると、その部分の範囲が反転表示されます。

スクリーンショット_2015-04-28_18_13_20

 

そのままクリックすると、その部分に適用されているCSSのソースが右側に表示されます。

 

スクリーンショット_2015-04-28_18_20_29

 

このように、スポットで選択することもできます^^

 

2.試しに「記事一覧」の部分を変更してみます。

ページの該当部分の上で右クリックして「要素の検証」を選択するとHTMLソース、CSSソース共に表示されます。

スクリーンショット_2015-04-28_18_22_43

 

そのなかのCSSのこの部分(font-size)の数字を変更するには、

「1.5em」と書かれているところを、一度クリックするとテキストボックスになるので、

数値を書き換えます。

 

3.表示されている「記事一覧」の文字が大きくなりました。

Webデザイン アメブロカスタマイズ 加古川 Gammy-DesignWorks

 

 

すこしCSSの知識が必要ですが、こちらを参考にしてあれこれ変更してみると良いでしょう^^

CSSクイックリファレンス

 

スマートフォン表示の確認

この「要素の検証」を使うと、スマートフォンでどのように表示されるか?というのも、

パソコンで確認することができるようになるんですね^^

 

実機とは微妙に違いますが、気にするほどでもないでしょう。

 

1.スマートフォンの形をしたアイコンをクリック。

Webデザイン_Wordpress 加古川 Gammy-DesignWorks

 

 

2.画面が変わり、スマートフォンの表示になる。

Webデザイン_Wordpress 加古川 Gammy-DesignWorks 2

 

ただし、パソコン表示のまま小さくなっているので、再読み込みが必要です。

再読み込みすると、CSSの編集をしたところがリセットされるので注意してくださいね(^_^;)

 

3.スマートフォンの表示になります。

Webデザイン_Wordpress 加古川 Gammy-DesignWorks 3

上部の「iPhone 5」と書かれているところで表示するデバイス(画面サイズ)の選択、

縦持ちと、横持ちでも表示もアイコンをクリックすると変更できます。

 

4.横持ち表示にしたらこんな感じになります。

Webデザイン_Wordpress 加古川 Gammy-DesignWorks_と_要素の検証 2

 

 

5.表示できるデバイスは、iPadなどのタブレットを含めて、これだけ種類があります。

スクリーンショット_2015-05-26_18_00_09

 

Androidは海外のメーカーが多いですね(^_^;)

ちなみに僕は、iPhone5,6をベースにしています。

 

 

まとめ

この機能を使うと、カスタマイズの作業がめちゃくちゃ効率良くなります。

だって、画面を見ながら変更できますからね^^

 

おまけに、CSSの知識も頭に入りやすくなるので、まさに一石二鳥だと思います。

 

WordPressを自分でカスタマイズしてみたい方は、一度試してみてください!

※Safariでも同様の機能があります。

 

PS.

WordPressのサポートコミュニティをやっています^^

WordPressの構築、設定、カスタマイズ…etc なんでもご相談ください!

bunner

この記事を書いた人

石上 貴哉
石上 貴哉Gammy Design Works代表
Webデザイン事業「Gammy Design Works」代表。
主にWordpressの構築や、ヘッダー画像などのWebデザインを行っています。
クライアントの魅力を引き出すデザインを心がけています^^

趣味はパソコン(Mac)読書(心屋仁之助)ギター(洋楽HR/HM、嵐)
車(スバル車)などです。

お気軽にFacebookやtwitterで絡んでくださいね^^

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


Posted in 効率化 and tagged , , .