サイトをカスタマイズしたい場合で、テーマの中のファイル、コードを編集しなければならいない場合、『どこをどう編集すればいいのか』がすぐにわかりづらかったりしますよね、、

そんな場合、ローカル環境を構築していなくとも、『Chromeのデベロッパーツール』を使えば、無料で『テスト編集していける』ので強力な味方になってくれたりします。

今回は、実際に『Chrome Developer Tools』を使ってテスト編集してみたのでその備忘録です。

〜〜項目〜〜〜〜〜〜〜〜〜

❤︎1、デベロッパーツールでテスト編集する意味

❤︎2、デベロッパーツールでサイトをテスト編集してみた動画

❤︎3、テスト編集での簡単な使い方

＞3-1、開き方とツール画面表示の調整

＞3-2、HTMLと CSSの確認

＞3-3、カスタマイズする前と見比べるには？

＞3-4、カスタマイズしたい箇所のファイルと位置はどれかを見つける

＞3-5、モバイル表示の編集や確認の仕方

〜〜〜〜〜〜〜〜〜〜〜〜

❤︎1、デベロッパーツールでテスト編集する意味

Chromeのデベロッパーツールは開発やWebデザインやってる方、ワードプレステーマを作ってる方などなどにとっては当たり前に使っているツール、おなじみの便利ツールとして多く活用されてると思います。

んが、そういった既に知識のある方だけでなく、、これからサイトをHTMLやCSSで編集し始めてみたい、でもまだよくわからないという方なんかにも超強力な味方になってくれるツールです。

理由は、

• 編集したい箇所がどのファイルのどの位置なのかを突き止められる
• サイトの実際のファイルで編集するのではなく、ブラウザ上で試しにテスト編集してみることができる（間違っても支障は全くない）
• テスト編集結果をリアルタイムで確認しながら進められる
• いいなと思うサイトのコードがどうなってるのとかを見て吸収できる
• 使っていくうちに知識も少しづつ上がる
• 無料で使える

などなど、まだ知識がそれほどない人にとってもかなりありがたいツールと言えましょううw。

つまり、

• サイトのファイルを直接編集する前にどこをどう書き換えたり追記すればいいかを検証してからできるので、無駄に失敗してやり直す手間も省ける。

ということです。

Chrome、なにこの素晴らしさ！？ありがとう！って感じですよね。。。

❤︎2、デベロッパーツールでサイトをテスト編集してみた動画

ということで、実際にテスト編集してみている様子を動画に記録してみました。

ほとんど知識がまだない方でも実際にやってみているものを見ればなんとなくつかめると思います。

＝＝【動画目次】＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
トータル15分ちょいと長めなので、部分的にチェックしたい個所があれば目次を参照ください。（※何故か途中から再生させるURLが全く効かないので分数で書いておきます。<(_ _)>）

1、Chromeデベロッパーツールの立ち上げ方
▶︎0:32

2、デバロッパーツール画面表示の選択の仕方（左側・右側・下部・別窓表示）
▶︎1:09

3、編集したい個所の選択の仕方と見方
▶︎1:59

4、編集前の状態と見比べるには？
▶︎5:56

5、モバイル表示の編集や確認をするには？
▶︎7:37

6、Stylesパネル内の該当個所を含むファイルを開いて編集個所を探すには？
▶︎9:31

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

下記にテキストと画像でもまとめてみたので、速読流し見チェックしたい方は下記も参照ください。

❤︎3、テスト編集での簡単な使い方

＞3-1、開き方とツール画面表示の調整

※動画では、
1、Chromeデベロッパーツールの立ち上げ方
▶︎0:32
2、デバロッパーツール画面表示の選択の仕方（左側・右側・下部・別窓表示）
▶︎1:09
あたりです。

デベロッパーツールの開き方は、ブラウザのChromeを立ち上げて、
その画面で、

• 右クリック＞検証
  ショートカットキーは、
  Mac『command+option+I』
  Win『F12』

で、画面表示は、

• 右側表示
• 左側表示
• 下部表示
• 別窓表示

などにできるので、自分のやりやすい表示でやれます。

デベロッパーツールの右上の点々のタブをクリックすると、表示の仕方を選択できる↓

私は広々と別窓表示をよく使います。↓

＞3-2、HTMLと CSSの確認

※動画では、
3、編集したい個所の選択の仕方と見方
▶︎1:59 あたりからです。

選択ツールを使って、サイトのカスタマイズしたい箇所をクリックすると、

ElementsパネルでHTML、StyleパネルでCSSをその箇所で表示してくれます。

デベロッパの左上のアイコンをクリックして選択できるモードにする（青くなる）↓

上記の状態で、編集したい箇所をサイトでクリックするとその箇所のHTMLとCSSを確認できる↓

>3-3、カスタマイズする前と見比べるには？

※動画では、
4、編集前の状態と見比べるには？
▶︎5:56
あたり。

カスタマイズしても本当に編集されているわけではなく、ブラウザ上の表示でのことだけです。
そして、カスタマイズ前、元はどうだったか見比べることができます。

編集した箇所の頭のチェックを外すと元の状態を確認でき、ON,OFFで編集前と編集後を見比べて確認することができますステキ！笑↓

＞3-4、カスタマイズしたい箇所のファイルと位置はどれかを見つける

※動画では、
6、Stylesパネル内の該当個所を含むファイルを開いて編集個所を探すには？
▶︎9:31 あたりから

選択ツールで箇所を指定し、Styleパネルで表示された値を編集しても思ったように反映されない場合、その編集箇所ではないってことですよね、、、

具体的な編集場所、記述箇所がよく分からない場合もあると思います。

そういった場合、その箇所を含んだファイルをさらに開いてみて探すとその近辺にあったりします。

選択ツールで選択して表示された箇所を含んだファイルを見るには、

• ❶Styleパネル内のその箇所と思われるエリアの右上のURLをクリック
• ❷Styleパネル内のその箇所と思われる値を『command+クリック』
• ❸デベロッパーパネル上部バーの❸『Sources』をクリック

などで開き、見ることができる。↓

❶、❷の場合、そのファイルが開かれた瞬間、現在の個所が黄色い帯でハイライトされるのでかなり分かりやすい。

❸の場合、カーソルだけなのでやや分かりづらい感じ

開いたら、そのファイルを見ていき、これかな？っていうのがあったら編集して結果をチェックしてみる。

そうやってくうちに全く知識がない状態でもなんとなくわかっていきます笑

例えば背景色なら、バックグラウンドカラーってこれかな？とか全くわからない状態だとしてもそのくらいは想像できますよね。。。

ただ、テーマによって指定の仕方が微妙に違ったりするので、何これ？どれじゃ？ってなったりもしますが、笑　いじりたおしてくうちにわかったり、ググってくうちにたどり着けたりするので時間が許す限り、諦めずに追って行けば良いかなと…

＞3-5、モバイル表示の編集や確認の仕方

※動画では、
5、モバイル表示の編集や確認をするには？
▶︎7:37 あたりから

PC表示のほか、スマホやタブレット表示なども確認したりテスト編集できるんですよステキ！笑

左上のタブをクリック↓

表示させたい端末を選択できる↓

あとはPC表示の場合と同じく、選択ツールを選択した状態で編集したい箇所をクリックして、どの箇所か見て、編集を試していける。

以上現場からお伝えしました。。。

ってことで楽しいクリエイトをば！

しゃらんるあぁあああああああ❤︎

Web関連（WordPressサイト・ブログ関連）

\(`^`)b (￣v￣)ゞ