インスペクト要素の基本：DIYユーザーのためのWordPressカスタマイズ

私たちの多くは、永続的な変更を加えるリスクなしに、ウェブサイトのデザインを理解することに興味があります。インスペクト要素は、この目的のために非常に役立つツールとして機能し、ブラウザで直接一時的な変更を加えることができます。

初心者レベルのユーザーの多くから、HTML/CSSの編集が難しいという意見がありました。私たちは、そのようなユーザーには常にInspectツールを試すことをお勧めしています。

シンプルで使いやすく、調整の結果をすぐに確認できます。私たちは、テキストの簡単な編集からレイアウト全体の作り直しまで、さまざまな変更をプレビューするために常にこれを使用しています。

このガイドでは、WordPressサイトで要素を調査する機能を効果的に使用する手順を説明し、デザインのアイデアを安全かつ効率的に実現するのに役立ちます。

検証ツールとは何ですか？

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

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

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

インスペクトツールを使用すると、HTML、CSS、またはJavaScriptコードを一時的に編集し、画面上でライブの変更を確認できます。マイナーなスタイルの調整から完全なレイアウトのアイデアまで、すべてをプレビューするために使用しました。（記事の後半でその方法を説明します。）

一番良いところは？これらの変更は実際のウェブページに影響しません。ページを再読み込みしたり、ブラウザを閉じたりすると、すべて元に戻ります。これにより、アイデアをテストするための安全で信頼性の高いツールになります。

特にDIYウェブサイトの所有者や開発者にとって、迅速なテストやデバッグの方法として非常に役立つことがわかりました。以下にいくつかの使用例を挙げます:

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

そして、それはほんの始まりにすぎません。これらのツールは非常に用途が広く、ウェブサイトを扱う人々の間で人気があります。

このガイドでは、読者の間で最も人気のあるブラウザであるGoogle Chromeのインスペクトツールに焦点を当てます。ただし、Firefox、Safari、Microsoft Edgeにも、それぞれのインスペクトオプションからアクセスできる同様のツールがあります。

始める準備はできましたか？以下のリンクを使用して記事の任意のセクションにジャンプし、手順に従ってください。

• 検査ツールの起動とコードの特定
• 検証要素でのコードの編集とデバッグ
• サイトのエラーを簡単に見つける
• モバイル（iOSまたはAndroid）でインスペクトツールを使用する方法
• WordPressでインスペクト要素の変更を永続的に適用する方法
• インスペクト要素を使用する際のベストプラクティス
• 要素の検査に関するよくある質問
• 動画チュートリアル
• WordPressのカスタマイズについてさらに詳しく知る

検査ツールの起動とコードの特定

キーボードでCTRL + Shift + I（macOSの場合はCommand + Options + I）を押すと、インスペクトツールを起動できます。

ブラウザメニューで「検証」を選択して、ウェブページ上のどこでもクリックすることもできます。

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

Google Chromeでは、右上隅にある3つの点のメニューをクリックし、次にその他のツール » デベロッパーツールまでスクロールします。

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

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

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

HTMLソースの上にマウスを移動すると、ウェブページ上の該当する領域がハイライト表示されます。

HTMLコード内の要素をクリックすると、CSSルールが変化することにも気づくでしょう。

ウェブページの要素にマウスカーソルを合わせ、右クリックして「検証」ツールを選択することもできます。

要素はソースコードでハイライト表示されます。

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

検証要素ウィンドウのHTMLとCSSの両方を編集できます。HTMLソースコードのどこでもダブルクリックして、好きなようにコードを編集できます。

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

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

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

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

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

既存のWordPressテーマをInspect Elementツールで編集する前に、必ずWordPressのバックアップを作成してください。

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

[Inspect]ツールには[Console]と呼ばれる領域があり、ページ読み込み中に発生したエラーが表示されます。

エラーをデバッグしたり、プラグイン作成者にサポートを依頼したりする際に、エラーや警告がないかを確認するためにここを確認すると常に役立ちます。

コンソールタブを使用すると、いくつかの一般的な問題をトラブルシューティングできます。たとえば、インスペクトコンソールでできることのほんの一部を次に示します。

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

技術的な知識がないユーザーでも、問題の原因の手がかりを見つけるためにこれを見ることができます。

例えば、OptinMonsterの顧客で、オプトインが表示されない理由を疑問に思っている場合、問題「Your page slug does not match.」を簡単に見つけることができます。

Inspect Element Consoleのようなツールを使用すると、サイトで問題が発生した際に役立つ技術的な詳細情報を収集できます。エラーメッセージや不足しているリソースなどの情報を共有することで、プラグインやテーマのサポートチームが問題をより迅速に理解し、解決できるようになります。

モバイル（iOSまたはAndroid）でインスペクトツールを使用する方法

デベロッパーオプションは、ほとんどのモバイルユーザーが使用しないとメーカーが想定しているため、モバイルブラウザではデフォルトでオンになっていません。

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

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

WordPressでインスペクト要素の変更を永続的に適用する方法

Inspect Element を使用している際に、テストした変更を永続化する方法について疑問に思うかもしれません。このセクションでは、WordPress サイトでその方法を説明します。

まず、保持したい変更点を特定し、NotepadやTextEditのようなアプリを使用してテキストファイルにコピーします。その後、以下のいずれかの方法を試すことができます。

1. サイトエディターを使用して WordPress サイトに CSS 変更を追加する

コピーしたら、WordPress ダッシュボードに移動し、外観 » エディター に進んでサイトエディターを起動します。

プレビューウィンドウをクリックして、サイトの編集を開始します。

エディタ内で、上部にある[Style]ボタンをクリックし、次に3点メニューをクリックして[Additional CSS]を選択します。

これにより、「追加CSS」パネルが開かれ、保存したいCSSを簡単に貼り付けることができます。

プレビューウィンドウで変更が即座に適用されるのを確認できる場合があります。「保存」をクリックして変更を公開することを忘れないでください。

2. WPCodeを使用してサイトにカスタムCSSを追加する

サイトにカスタムCSSを追加する簡単な方法が必要な場合は、この方法が最適です。

この方法では、WPCodeを使用します。これは最高のWordPressコードスニペットマネージャーであり、テーマを編集せずにカスタムコード、HTML、CSSをサイトに追加できます。

注意: WPCode の無料バージョンもあります。これは、WPCode の無料バージョンです。ただし、その可能性を最大限に引き出すには、有料プランへのアップグレードをお勧めします。

私たちは自社のサイトでWPCodeを使用しています。なぜなら、コードの管理が容易になるからです。さらに重要なのは、エラーが発生した場合にコードを無効にする組み込みのフェイルセーフ機能があることです。詳細については、当社の完全なWPCodeレビューをご覧ください。

まず、WPCodeプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するチュートリアルを参照してください。

有効化したら、WordPress 管理ダッシュボードから コードスニペット » + 新規追加 に移動するだけです。

次に、コードスニペットライブラリの「カスタムコードを追加 (新しいスニペット)」オプションにカーソルを合わせ、「+ カスタムスニペットを追加」をクリックします。

その後、画面に表示されるオプションのリストから、コードの種類として「CSSスニペット」を選択する必要があります。

次に、ページの上部で、カスタム CSS スニペットのタイトルを追加できます。これは、コードを識別するのに役立つものであれば何でも構いません。

タイトルを入力したら、「コードプレビュー」ボックスにカスタムCSSを書き込むか貼り付けることができます。

カスタムCSSコードを追加したら、「スニペットを保存」ボタンをクリックし、ステータストグルを「アクティブ」に切り替えます。

3. HTMLスニペットをWordPressサイトに追加する

HTMLの変更をサイトに追加するには、テーマの正しいテンプレートファイルに貼り付ける必要があります。

編集するテーマファイルを確認するには、WordPressテーマの編集ファイルを検索する方法に関するガイドを参照してください。

テーマファイルを編集するには、FTP クライアントまたはホスティングアカウントの下にあるファイルマネージャーアプリを使用する必要があります。

または、WPCodeを使用してカスタムHTMLスニペットを追加することもできます。新しいコードスニペットを追加し、スニペットタイプとしてHTMLを選択するだけです。

その後、HTMLスニペットを識別するのに役立つタイトルを提供します。

その下に、カスタムHTMLコードをプレビューボックスに入力します。

WPCodeを使用すると、コードスニペットを挿入したい場所を選択できます。

「挿入」エリアまでスクロールダウンし、「場所」をクリックして利用可能なオプションを表示します。

場所を選択した後、「保存」をクリックしてスニペットのステータスをアクティブに切り替えるのを忘れないでください。

これで、サイトにアクセスして実際に動作を確認できます。

インスペクト要素を使用する際のベストプラクティス

Inspect ツールを使用することは、ウェブデザインの秘密の窓を開くような感覚かもしれません。しかし、それを最大限に活用するために、特に始めたばかりの方に役立つベストプラクティスをいくつかご紹介します。

• 安全に探索を始める: インスペクト要素で行った変更は一時的なものです。したがって、何も永久に壊れる心配なく自由に実験してください。
• さまざまなスタイルとレイアウトを試す: 実際のテーマやスタイルシートに適用する前に、色、フォント、間隔、配置などをテストして、何が良いかを確認してください。
• うまくいったことをメモしておきましょう： 変更が気に入ったら、CSSをコピーしてテキストファイルやメモアプリに貼り付けて、失わないようにしてください。
• ブラウザ間でのテスト: Chrome で見栄えの良いデザインの調整が、Firefox や Safari では見栄えが悪くなる可能性があるため、常に再確認してください。
• 整理整頓: 加えたすべての変更とその理由を記録しておきましょう。これにより、後で何かを元に戻したり、問題をトラブルシューティングしたりする必要がある場合に役立ちます。
• ライブサイトの編集は慎重に行ってください：学習中の場合は、ライブサイトでの意図しない問題を避けるために、ステージングサイトまたはテスト環境で練習することをお勧めします。

要素の検査に関するよくある質問

以下は、Inspectツールに関するユーザーからよく寄せられる質問の一部です。

1. 自分のサイト以外でも、どのウェブサイトでも「検証」ツールを使用できますか？

はい、どのウェブサイトでもインスペクトツールを使用できます。ウェブサイトの背後にあるコードを確認するには、右クリックしてブラウザメニューからインスペクトツールを選択するだけです。他のウェブサイトのコードを研究することは、独自のCSS/HTMLスキルを学び、向上させるための迅速な方法です。

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

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

さらに、右クリック機能はJavaScriptによって無効にされている場合があり、その場合「検証」オプションが非表示になることがあります。そのような場合は、キーボードショートカット Ctrl + Shift + I（Macの場合は Cmd + Option + I）を使用するか、メニュー » その他のツール » 開発者ツールに移動することで、開発者ツールを開くことができます。

3. 変更は異なるブラウザで確認できますか？

はい、インスペクト要素は主要なブラウザで利用でき、Chrome、Firefox、Safari、Edgeでの変更をテストおよび確認できます。

4. インスペクト要素はJavaScriptのデバッグにどのように役立ちますか？

要素を検証には、JavaScriptのエラーや警告を確認できるコンソールタブが含まれています。このツールは、サイトのスクリプトで何がうまくいっていないのかを理解する必要がある場合に非常に役立ちます。ブラウザの思考プロセスに直接アクセスできるようなもので、問題を迅速に特定できます。

5. Inspect Elementは私のウェブサイトのセキュリティに影響を与えますか？

いいえ、要素を検証してもウェブサイトのセキュリティに影響はありません。これはブラウザのツールであり、バックエンドのデータやその整合性を変更することなく、サイトがローカルマシン上でどのように表示または動作するかを一時的に変更するだけです。

動画チュートリアル

WPBeginnerを購読する

WordPressのカスタマイズについてさらに詳しく知る

WordPressサイトで検証ツールをさらに活用する方法を詳しく知りたい場合は、以下のリソースが参考になります。

• WordPressテーマのカスタマイズ方法 – この初心者ガイドでは、WordPressテーマを段階的にカスタマイズする方法を紹介します。
• WordPressにカスタムCSSを簡単に追加する方法 – このチュートリアルでは、WordPressにカスタムCSSを簡単に追加する複数の方法を紹介しています。
• WordPressでCSS配信を最適化する方法 – 個々のCSSファイルが多すぎるとパフォーマンスが低下する可能性があります。このチュートリアルでは、WordPressの速度を向上させるためにCSS配信を最適化する方法を説明します。
• WordPressデフォルト生成CSSチートシート – この便利なガイドでは、WordPressがデフォルトでさまざまな要素に追加する多くのCSSクラスを紹介します。これらのCSSクラスをカスタムCSSコードで使用して、これらの要素の外観を変更できます。

この記事が、Inspect Element の基本と WordPress サイトでの使い方を学ぶのに役立ったことを願っています。テーマ開発スキルをスピードアップするための デフォルトの WordPress 生成 CSS チートシート、またはプロ向けの 究極の WordPress ツールキットも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。