Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

インスペクトエレメントの基本DIYユーザーのためのWordPressカスタマイザー

私たちが初めてInspect Elementツールを発見したとき、ウェブの内部構造への秘密の扉を開けたような気がしました。ブラウザ上でウェブサイトのデザインを直接試すことができたのです。

Inspect Elementを使うと、ページのHTMLやCSSを一時的に編集できます。テキストを調整したり、色を調整したり、複雑なコードに飛び込むことなくレイアウトの変更をテストしたりするのにとても便利です。

私たちがすぐに高く評価したのは、これらの編集が永久保存されないことだ。つまり、元のサイトが無傷のまま残っているため、安心して遊べるということだ。

このガイドでは、WordPressサイトでのInspect Elementの基本的な使い方をご紹介します。このスキルは、デザインを微調整したり、外出先でスタイリングの問題を修正したりする際に役立ち、作業時間を短縮できます。

Using the inspect tool for DIY web developers

インスペクトツールとは?

私たちは、ウェブサイトのトラブルシューティングや変更を試すために、数え切れないほどブラウザ開発者ツールに頼ってきました。Google Chrome、Firefox、Safari、Microsoft Edgeなどの最新のウェブブラウザには、ウェブ開発者がエラーを簡単にデバッグできるように設計されたビルトインツールが装備されています。

これらのツールは、ページのHTML、CSSJavaScriptコードを表示し、ブラウザがそれをどのように処理するかを表示する。私たちにとっては、実際のウェブサイトに影響を与えることなく、チートコードを試しているようなものだ。

どのページでも、右クリックしてメニューから「Inspect」を選択することで、これらの開発者ツールにアクセスできます。これは、デザインの調整をテストしたり、問題をデバッグしたりするときに、私たちがよく使う操作のひとつです。

Opening Inspect developer tools in Google Chrome

インスペクトツールを使えば、HTML、CSS、JavaScriptのコードを一時的に編集し、その変更を画面上で確認することができます。私たちは、ちょっとしたスタイルの調整からレイアウトのアイデアまで、あらゆるものをプレビューするためにこのツールを使ってきました。(この記事の後半でその方法を紹介します)。

一番の利点は?これらの変更は実際のウェブページには影響しない。ページを再読み込みするか、ブラウザを閉じれば、すべてが正常に戻ります。このため、アイデアをテストするための安全で信頼性の高いツールとなっている。

私たちは、テストやデバッグの迅速な方法を必要とするDIYウェブサイトの所有者や開発者に特に役立つことを発見しました。いくつかの使用例をご紹介します:

  • 新しいCSSスタイルを適用して、サイト上でどのように見えるかをすぐに確認できます。
  • テクニカルライターは、スクリーンショットのHTMLを編集したり、機密情報を隠したり、表示されるテキストをカスタマイズしたりできます。
  • 開発者は、WordPressの一般的なエラーを特定したり、JavaScriptの問題をデバッグしたり、404エラーを解決したりするためによく使用します。

そして、それはほんの表面をなぞったに過ぎない。これらのツールは驚くほど多機能で、ウェブサイトを扱うすべての人に愛用されている。

このガイドでは、Google ChromeのInspectツールに焦点を当てます。ただし、Firefox、Safari、Microsoft Edgeにも同様のツールがあり、Inspectオプションからアクセスできます。

準備はいいですか?以下のリンクから、記事のどのセクションへもジャンプできます:

インスペクトツールの起動とコードの検索

キーボードのCTRL + Shift + I(MacOSの場合はCommand + オプション + I)を押すと、検査ツールを起動できます。

ウェブページのどこかをクリックし、ブラウザーメニューから「Inspect」を選択することもできる。

Opening Inspect developer tools in Google Chrome

ブラウザーのメインメニューからもこのツールにアクセスできる。

Google Chromeの右上にある3つの点のメニューをクリックし、More tools(その他のツール) ” Developer tools(開発者ツール)までスクロールダウンします。

Launch developer tools

ブラウザーウィンドウが2つに分割されます。

一方には、表示していたページが表示されます。もう一方には、HTMLコードとCSSルールが表示されます。

Choose dock position

インスペクトのドックの位置は様々ですが、三点メニューをクリックして「ドック側」の位置を選択することで変更できます。上の画像にクリックするアイコンがあります。

HTMLソースの上にマウスを移動すると、ウェブページ上の影響を受けるエリアがハイライトされます。

また、HTMLコード内の要素をクリックすると、CSSルールが変更されることに気づくだろう。

Selected HTML highlighted in preview

また、ウェブページ上の要素にマウスポインタを合わせて右クリックし、「検査」ツールを選択することもできます。

その要素はソースコードでハイライトされる。

Inspect要素でのコードの編集とデバッグ

inspect要素ウィンドウのHTMLとCSSはどちらも編集可能です。HTMLのソースコードのどこかをダブルクリックして、好きなようにコードを編集することができます。

Edit HTML using Inspect tool

また、CSSペイン内の属性やスタイルをダブルクリックして編集することもできます。

カスタムスタイルルールを追加するには、CSSペインの上部にある+アイコンをクリックするだけです。

Editing CSS in the inspect tool

CSSやHTMLに変更を加えると、その変更は即座にブラウザーに反映される。

これらの変更はブラウザーの一時メモリに保存され、サイトには影響しません。

重要な注意: ここで行った変更は、どこにも保存されません。Inspect要素はデバッグツールであり、サーバー上のファイルに変更を書き戻すことはありません。ページを更新すると、変更内容はすべて消えてしまいます。

変更するには、テーマにカスタマイザーを追加するか、関連するテンプレートを編集して保存したい変更を追加する必要があります。

Inspect Elementツールを使って既存のWordPressテーマの編集を始める前に、WordPressのバックアップを作成しておいてください。

サイトのエラーを簡単に見つける

InspectツールにはConsoleというエリアがあり、ページロード中に発生したエラーが表示される。

エラーをデバッグしたり、プラグイン投稿者にサポートを依頼したりする際には、エラーや警告がないかどうかをここで確認するのが便利です。

Inspect errors in Console

コンソール]タブを使用すると、いくつかの一般的な問題をトラブルシューティングできます。例えば、これらはinspectコンソールでできるほんの一部です:

  • 追加した画像が表示されない原因を探る
  • プラグインやテーマが正しく動作しない理由
  • 競合の原因となっているプラグインまたはブラウザー拡張機能

技術的なバックグラウンドを持たないユーザーでも、それを見て問題の原因を探る手がかりを見つけることができる。

例えば、もしあなたがOptinMonsterの顧客で、なぜオプトインが読み込まれないのか不思議に思っているなら、”Your page slug does not match. “という問題を簡単に見つけることができます。

Inspect Element ConsoleやSupportAllyのようなツールは、より良いカスタマーサポートを受けるために役立ちます。テクニカルサポートチームは、問題に対する詳細なフィードバックを率先して提供するカスタマイザーを高く評価しています。

モバイル(iOSまたはAndroid)でインスペクトツールを使用するには?

開発者向けオプションは、モバイルブラウザのデフォルトではオンになっていない。ほとんどのモバイルユーザーは使わないだろうとメーカーが想定しているからだ。

モバイルの問題をトラブルシューティングし、検査ツールを使用する最も簡単な方法。デスクトップのブラウザーでモバイルエミュレーション機能を使用することです。

Using inspect tool in mobile mode

次に、端末を上部または画面サイズから選択できます。Chromeがその画面サイズをエミュレートします。

インスペクト・エレメントに関するよくある質問

以下は、インスペクトツールの使用に関して、ユーザーからよく寄せられる質問です。

1.インスペクトツールはどのサイトでも使えますか?

はい、どのサイトでも検査ツールを使うことができます。右クリックしてブラウザーメニューからインスペクトツールを選択するだけで、どんなサイトでもコードを見ることができます。他のサイトのコードを研究することは、あなた自身のCSS/HTMLスキルを学び、向上させる手っ取り早い方法です。

2.ブラウザーでインスペクトツールが見つからないのですが?

Google Chromeでは、特に複数の拡張機能が右クリックメニューに独自のオプションを追加した場合に、右クリックメニューの「検査」オプションが非表示になることがあります。

しかし、ブラウザ画面の右上にある3つの点のメニューをクリックし、その他のツール ” 開発者ツールを選択すれば、いつでもインスペクトツールを開くことができます。また、キーボードのCTRL + Shift + I(MacではCommand + オプション + I)キーを使っても開くことができます。

動画チュートリアル

Subscribe to WPBeginner

ボーナス・リソース

DIYでWordPress初心者のサイトに変更を加えられるのはエキサイティングだ。

長年にわたり、サイト構築の経験ゼロの初心者がその道のプロになるのを数え切れないほど見てきました。

インスペクト・ツールを使ってWordPressサイトでできることをさらに詳しく調べたい場合は、以下のリソースを参考にしてください:

この記事で、Inspect要素の基本やWordPressサイトでの使い方をご理解いただけたでしょうか。また、テーマ開発スキルをスピードアップするためのデフォルトのWordPressジェネレータCSSチートシートやプロ向けの究極のWordPressツールキットもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

20件のコメント返信を残す

  1. Mrteesurez

    This is helpful, I don’t know one can actually edit the code and see changes in real time.
    My question:
    1) Can I use the inspection tool to see the PHP or anynbackend code ??
    2) Is there anyway I can use the inspection tool on mobile ??

    • WPBeginner Support

      You would not use the inspection tool to see PHP it is normally used to check HTML, CSS, and JavaScript. For mobile it is not available by default but there are apps to add the ability to mobile.

      管理者

  2. Jiří Vaněk

    Thanks for this guide. Now is much more easier for me to find CSS class in code for making any changes. The CSS code can make AI for me, becouse Im not good at coding, and rest Im able to find in isnpect tools. That is all what I need.

  3. hossam ismail

    hey!
    I can’t change my heading font size in mobile version.
    For example,
    Heading font size in desktop is 24px
    but it is also 24px in mobile ??
    this issue especially with heading, how can i fix this?

    • WPBeginner Support

      If you reach out to your theme’s support they should be able to let you know how they have set up the mobile CSS

      管理者

  4. Esmeraldo Lleshi

    How can I make the html that i edited to stay permanently?

    • WPBeginner Support

      It would depend on what was edited, if is CSS then you would add the CSS under Appeaance>Customize>Additional CSS. If it is more of an HTML change then you would want to check with your theme’s support as WordPress themes are built with templates, for a bit more on that you would want to take a look at our glossary page here: https://www.wpbeginner.com/glossary/template/

      管理者

  5. Milan

    Once I make changes, how I can save update/edited page? Whenever I close it it revert to previous version.

    • WPBeginner Support

      Inspect element is for testing the changes, if you’re editing the CSS you would want to copy the CSS you added and paste it under Appearance>Custmize>Additional CSS :)

      管理者

  6. Kristina

    My dilemma is that once I inspect an element, I’d like to know what PAGE in my theme this element appears on. So there’s an e lement that appears as part of my theme, throughout my site, and when I inspect element, i can see the code, but can’t determine what portion of the theme has it, so that I can change it in the child theme, permanently. I tried editing one page, directly from the inspect element pane, but as soon as I exited and returned, my change was gone and it was “back to normal.”

    Anyway to inspect to element and determine where I can find it in my theme files?

    Thank you.

    • WPBeginner Support

      Hi Kristina,

      You can try to guessing the template file based on where the code appears in the page layout. For example, if it is in header section then you may look for it in the header.php file. You can also download all your theme files via FTP and then use a tool that allows you to search for text in multiple files at once. One such app is Notepad++ (for Windows), open the app and the go to Search > Search in Files.

      管理者

  7. stephanie

    This is such great content, thanks a lot for sharing.

    Little problem for me, nothing happens when i click ‘inspect element’ in my chrome browser. Any help or suggestions?

    • WPBeginner Support

      Hi Stephanie,

      If you are using any browser extensions, then uninstall all of them. If the problem persists, then try reinstalling Google Chrome.

      管理者

  8. avinash

    Sir,
    Actually i am new in wordpress can you tell where from i can edit the Html elememt and where i
    can found the element.style in wordpress theme.

  9. Isaac Anim

    This is a very great post you have here. But I need to draw your attention to something.

    I don’t know if you have noticed but this particular article has being stolen. It looks like the culprit only goes around the web stealing content. As I write this comment, he has copied about 5 of my articles.

    The website is even not in Google Search. I was just checking how my website looks in Yandex search results and I happen to find this thief.

    Here is the link to the stolen article

  10. Ethan

    I am curious, why isn’t your website mobile friendly?

    • Saviour Sanders

      I’ve been wondering about the same thing.

  11. Sila Mahamud

    Customizing WordPress for DIY Users and you have also highlighted What is Inspect Element or Developer Tools? You also given us the video tutorial the basic of inspect elements. To be honest that is great content wherever you share with us. Thanks a lot for sharing this content with us.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。