WordPressサイトの中身が丸分かり!HTML・CSSコーディング作業に超便利なクロームデベロッパーツールの使い方

いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ
↓「ブログランキング」と「ブログ村」の2つのランキングに参加しています!クリックで応援していただけると、もの凄く励みになります!↓(∩´∀`)∩ ※右クリック「新しいタブで開く」が非常に便利です♪

 
ブログランキング・にほんブログ村へ

※↑それぞれのクリックで「みなラボ」へ1票&「みなラボ」のランキング状況を確認いただけます! 


こんにちは!や~べ~です。

梅雨に入ったとはいえ、雨があまり降らず、関東なんかではダムの貯水率が下がってきて取水制限が掛かるとか掛からないとか。。。

個人的には雨の日よりも晴れてる日の方が好きなので良いんですが、水不足になってしまうと困りますよね~。

今年は節水することになるのかなぁ。。。

 
前置きはこのくらいにして、

今回は、WordPressサイトの中身が丸分かり!HTML・CSSコーディング作業に超便利な「クロームデベロッパーツール(Chrome developer tools)」の使い方、ということで記事を書いていきたいと思います。

このGoogleクロームの「デベロッパーツール」を使うと、Webの知識がほとんどなくても簡単にWordPressサイトの構造を覗いたり、コードを操作して疑似的な編集をすることができます。(表示されている画面そのまま全てを、HTML・CSSコードを見ることができます!)

※ブラウザ上での編集のみ可能です。サイトの更新はサーバーにアクセスしなければ出来ません。

表示されているコンテンツのテキストや画像をクリックするだけで、対応するHTMLやCSSがハイライトされ、容易に操作することができます。

WordPressサイトのコード部分は、基本的にアルファベットの羅列なので、見たい部分のコードを探すのにかなり苦労します。

「デベロッパーツール」を使えば、表示されているコンテンツをクリックするだけで、該当するコードに辿りつけるので、サイトの不具合を見つけて修正するといった作業の効率が格段に上がると思います。

また、有名サイトのコードを参考にして、自分のサイト構築に役立てることもできると思います。

 
では、簡単な操作方法を説明していきたいと思います。

 

スポンサーリンク

1.クロームデベロッパーツール(Chrome developer tools)の使い方「起動」

まずは、GoogleクロームでWebサイトを開きましょう!

今回は、当サイト「みなラボ」を例に話を進めます。

 
Webサイトを開いたら、右上のメニューボタン→プルダウンメニューの「その他のツール」と進むと、一番下に「デベロッパーツール」とあるので、そこをクリックします。

dev1-c

 
これでだけで「デベロッパーツール」を使い始めることができます!

すごく簡単ですね。

 
「デベロッパーツール」を起動すると、ウインドウが三つに分かれます。

デフォルトでは左に通常のWebサイトのコンテンツが表示され、右上にHTML、右下にCSSが表示されます。

ウインドウの幅などは、仕切られているスライドバー付近をドラッグすれば、自由に変更できるので、使い易いようにアレンジして使って下さい。

dev2-k

dev3

 
今回は中央のバーを少し左にドラッグして、コンテンツの部分を少し狭くし、コンテンツ部分とコード部分が半分くらいになるようにして使用していきます。

 

スポンサーリンク

2.クロームデベロッパーツール(Chrome developer tools)の使い方「HTML操作」

 
簡単にHTMLを操作するには、まずHTMLウインドウの左上にある矢印(赤丸で囲った部分)をクリックします。

dev4-k

 
すると、コンテンツの部分からHTMLをハイライトできるモードなります。

(一度コンテンツを選択し、操作を終了すると、通常モードになるので、再度ハイライトさせる時には、もう一度この赤丸部分をクリックする必要があります。)

 
この状態で、左のウインドウの見たい場所(今回は「こんな使い方が・・・」のテキスト)にマウスを持って行くと、右上のHTMLウインドウの対応するコードが灰色にハイライトされます。

dev5-k

 
そのままの状態でクリックすると、灰色にハイライトされた部分が青でハイライトされ、編集可能になります。

dev6

 
ここで青色にハイライトされた部分をダブルクリックするとテキストを変更できるようになります。

dev7

 
ためしに「書き換えてみます!」と入力します。

dev8

 
エンターで変更が適用され、左のコンテンツの表示が変更されていることが確認できます。

dev9-k

 
同様に、コンテンツの画像を選択すると、格納されているパスやサイズなどを即座に確認することができます。

dev10-k

 
さらにWebサイトのデザインなどを操作したいときは、CSSのプロパティを操作すると、色や形などの変更を試すことができます。

CSSは少し上級なので、試してみたい方は↓のサイトを参考に行ってみて下さい。

デベロッパーツールについてさらに詳しく解説されています!!

参考サイト:ハイファイブクリエイト

 

スポンサーリンク

まとめ

WordPressサイトの中身が丸分かり!HTML・CSSコーディング作業に超便利な「クロームデベロッパーツール(Chrome developer tools)」の使い方、ということで記事を書かせて頂きましたが、いかがでしたでしょうか?

クリックで感覚的に、Webサイトのコードをあれこれ操作できるので、ほんとに簡単で便利だと思います。

よくGoogleのサーチコンソールなどに不具合が表示されることがあると思うのですが、そういった時の原因を探る作業にも使えると思います。

クロームをインストールしさえすれば、すぐに使える機能だと思いますので、みなさんもぜひ使ってみてはいかがでしょうか?

 

スポンサーリンク

おすすめのレンタルサーバー

 
『XSERVER』

みなラボもこの『XSERVER』を使っています!^^
プランによっては最安月額900円(税別)で、200GBのサーバー容量を確保できます!

継続更新は、クレジット引き落としで自動更新出来て楽チン!

サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心!

サーバーをコントロールするの為のインタフェースとなる「サ-バーパネル」の操作性も抜群!

サーバーデータの復元も、過去7日以内ならば、「サ-バーパネル」から簡単に操作可能!

もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪

 


 

ランキング

 
↓ランキング参加してます!よろしければ、クリックで応援して下さいっ!

にほんブログ村

 
↓こちらもお願いしますっ!

人気ブログランキングへ
 

『WordPressブログの作り方』※初心者必見!(>∀<)ノ☆
①どんなブログにするのか考える。
 ⇒さあ始めよう!なせば成る「0から始めるwordpressサイトづくり」
②レンタルサーバーを借りる。
③ドメインを取得する。
④ネームサーバーDNS設定をする。
 ⇒ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法
⑤WordPressをインストールする。
 ⇒エックスサーバーへワードプレスを簡単にインストールする方法
⑥テーマをインストールする。
 ⇒僕が「AFFINGER5」を激推しする「3つの理由」
 ⇒【かんたん解説】AFFINGER5(アフィンガー5)テーマを購入する方法&手順
 ⇒「AFFINGER5」をWordPressへインストールする手順
⑦アイコン、ヘッダーなどを作る。
 ⇒フリーソフトのみでアイコン作成する方法まとめ
 ⇒WPサイト用オリジナルヘッダーデザイン作ってみた
⑧お好みにサイトデザインする。
⑨サーチコンソール、アナリティクスへ登録する。
⑩アドセンスや各アフィリエイトへ登録する。
⑪記事を書く。
⑫試行錯誤しながら、ブログ運営を続けていけば、徐々に収益を上げることができると思います!(>∀<)ノ☆
 
こちらの記事もオススメ!(>∀<)ノ☆
子供が喜ぶ!ラズパイの面白い使い方まとめ6選~インパクト大の手作りクリスマスツリー・装飾・飾り付け・小物などを実現させるおしゃれな海外事例~
僕が「AFFINGER5」を激推しする「3つの理由」~WordPressブログ収益化への近道のために~
たぶん新型コロナウイルスに感染したであろう僕が完治するまでの症状を記録した闘病日記
Androidスマホで楽天モバイルの申し込みができない時の解決方法
急げ!【300万名限定】楽天モバイルが月額料金プラン『1年間無料』キャンペーン実施中!
『2021年更新版』Windows10も可! Movie Maker「ムービーメーカー」をダウンロードする方法
嫁の遺伝子検査結果をコソッと紹介(笑)GeneLife(ジーンライフ)の肥満遺伝子検査DIET(ダイエット)を試してみた結果。。。
【2021年版】メルカリ匿名配送「らくらくメルカリ便」「ゆうゆうメルカリ便」の使い方、送料・サイズ・重量一覧&出品手数料について
 

スポンサーリンク

こちらの記事もよく読まれています。↓(※広告含む)

 

 

最後までお読みいただいて、ありがとうございます。

もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです!どうぞ、よろしくお願いいたします!m(_ _)m

※↓「LINEいいね」ボタンを押して、この記事をタイムラインでシェアして頂けると、非常に喜びます!(∩´∀`)∩↓

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

最新情報をお届けします

Twitterで『みなラボ』をフォローしよう!

Feedly、RSS、Push7はこちら!!

follow us in feedly

Line@はこちら!!

「WordPressサイトの中身が丸分かり!HTML・CSSコーディング作業に超便利なクロームデベロッパーツールの使い方」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です