こんにちは！や～べ～です。
梅雨に入ったとはいえ、雨があまり降らず、関東なんかではダムの貯水率が下がってきて取水制限が掛かるとか掛からないとか。。。
個人的には雨の日よりも晴れてる日の方が好きなので良いんですが、水不足になってしまうと困りますよね～。
今年は節水することになるのかなぁ。。。
前置きはこのくらいにして、
今回は、WordPressサイトの中身が丸分かり！HTML・CSSコーディング作業に超便利な「クロームデベロッパーツール(Chrome developer tools)」の使い方、ということで記事を書いていきたいと思います。
このGoogleクロームの「デベロッパーツール」を使うと、Webの知識がほとんどなくても簡単にWordPressサイトの構造を覗いたり、コードを操作して疑似的な編集をすることができます。（表示されている画面そのまま全てを、HTML・CSSコードを見ることができます！）
※ブラウザ上での編集のみ可能です。サイトの更新はサーバーにアクセスしなければ出来ません。
表示されているコンテンツのテキストや画像をクリックするだけで、対応するHTMLやCSSがハイライトされ、容易に操作することができます。
WordPressサイトのコード部分は、基本的にアルファベットの羅列なので、見たい部分のコードを探すのにかなり苦労します。
「デベロッパーツール」を使えば、表示されているコンテンツをクリックするだけで、該当するコードに辿りつけるので、サイトの不具合を見つけて修正するといった作業の効率が格段に上がると思います。
また、有名サイトのコードを参考にして、自分のサイト構築に役立てることもできると思います。
では、簡単な操作方法を説明していきたいと思います。
1.クロームデベロッパーツール(Chrome developer tools)の使い方「起動」
まずは、GoogleクロームでWebサイトを開きましょう！
今回は、当サイト「みなラボ」を例に話を進めます。
Webサイトを開いたら、右上のメニューボタン→プルダウンメニューの「その他のツール」と進むと、一番下に「デベロッパーツール」とあるので、そこをクリックします。
これでだけで「デベロッパーツール」を使い始めることができます！
すごく簡単ですね。
「デベロッパーツール」を起動すると、ウインドウが三つに分かれます。
デフォルトでは左に通常のWebサイトのコンテンツが表示され、右上にHTML、右下にCSSが表示されます。
ウインドウの幅などは、仕切られているスライドバー付近をドラッグすれば、自由に変更できるので、使い易いようにアレンジして使って下さい。
今回は中央のバーを少し左にドラッグして、コンテンツの部分を少し狭くし、コンテンツ部分とコード部分が半分くらいになるようにして使用していきます。
2.クロームデベロッパーツール(Chrome developer tools)の使い方「HTML操作」
簡単にHTMLを操作するには、まずHTMLウインドウの左上にある矢印（赤丸で囲った部分）をクリックします。
すると、コンテンツの部分からHTMLをハイライトできるモードなります。
（一度コンテンツを選択し、操作を終了すると、通常モードになるので、再度ハイライトさせる時には、もう一度この赤丸部分をクリックする必要があります。）
この状態で、左のウインドウの見たい場所（今回は「こんな使い方が・・・」のテキスト）にマウスを持って行くと、右上のHTMLウインドウの対応するコードが灰色にハイライトされます。
そのままの状態でクリックすると、灰色にハイライトされた部分が青でハイライトされ、編集可能になります。
ここで青色にハイライトされた部分をダブルクリックするとテキストを変更できるようになります。
ためしに「書き換えてみます！」と入力します。
エンターで変更が適用され、左のコンテンツの表示が変更されていることが確認できます。
同様に、コンテンツの画像を選択すると、格納されているパスやサイズなどを即座に確認することができます。
さらにWebサイトのデザインなどを操作したいときは、CSSのプロパティを操作すると、色や形などの変更を試すことができます。
CSSは少し上級なので、試してみたい方は↓のサイトを参考に行ってみて下さい。
デベロッパーツールについてさらに詳しく解説されています！！
参考サイト：ハイファイブクリエイト
まとめ
WordPressサイトの中身が丸分かり！HTML・CSSコーディング作業に超便利な「クロームデベロッパーツール(Chrome developer tools)」の使い方、ということで記事を書かせて頂きましたが、いかがでしたでしょうか？
クリックで感覚的に、Webサイトのコードをあれこれ操作できるので、ほんとに簡単で便利だと思います。
よくGoogleのサーチコンソールなどに不具合が表示されることがあると思うのですが、そういった時の原因を探る作業にも使えると思います。
クロームをインストールしさえすれば、すぐに使える機能だと思いますので、みなさんもぜひ使ってみてはいかがでしょうか？
おすすめのレンタルサーバー
『XSERVER』
みなラボもこの『XSERVER』を使っています！＾＾
プランによっては最安月額900円（税別）で、200GBのサーバー容量を確保できます！
継続更新は、クレジット引き落としで自動更新出来て楽チン！
サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心！
サーバーをコントロールするの為のインタフェースとなる「サ－バーパネル」の操作性も抜群！
サーバーデータの復元も、過去7日以内ならば、「サ－バーパネル」から簡単に操作可能！
もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪
ランキング
↓ランキング参加してます！よろしければ、クリックで応援して下さいっ！
にほんブログ村
↓こちらもお願いしますっ！
人気ブログランキングへ
