Webページを一時的に変更して、特定の色、フォント、スタイルでどのように表示されるかを確認したいと思ったことはありませんか？ これは、ブラウザにすでに存在する「」というツールで可能です。 要素を検査する 」。 これは、CSSを操作したいすべてのユーザーにとって夢です。
このチュートリアルでは、アイテム検査の基本と、WordPressサイトでの使用方法について説明します。
アイテム検査ツールとは何ですか？
Google ChromeやMozilla Firefoxなどの最新のブラウザーには、Web開発者がエラーをデバッグできるツールが組み込まれています。 これらのツールは、ページのHTML、CSS、およびJavaScriptを表示し、コードの実行方法を示します。
ツールの使用 " 要素を検査 任意のWebページのHTML、CSS、またはJavaScriptコードを編集して、変更をライブで確認できます（単にコンピュータ上).
の所有者の場合 サイトのWeb、これらのツールは、実際にすべての人に変更を適用することなく、特定のスタイルがどのように見えるかをプレビューするのに役立ちます.
ライターにとって、これらのツールは、スクリーンショットを撮りながら個人識別情報を簡単に変更できるため、実際に要素をぼかす必要がないので素晴らしいです。
サポートエージェントにとって、これは、ギャラリーが読み込まれなかったり、ギャラリーが正しく機能しなくなったりする原因となっている可能性のあるエラーを特定するための優れた方法です。
ツール "は、ユースケースの表面を引っ掻いているだけです。 要素を検査する 本当に強力です。
この記事では、ツール「 要素を検査する Google Chromeから。これは、私たちが選択したブラウザーだからです。 Firefoxには独自の開発ツールがあり、メニューを選択して呼び出すこともできます。 検査要素 '。
「要素の検査」ツールの起動とコードのローカリゼーション
あなたは押すことで、このツールを実行することができます CTRL + Shiftキー+ I キーボードで。 または、Webページの任意の場所をクリックして、[ブラウザの検査]メニュー項目を選択することもできます。
ブラウザウィンドウが2つに分割され、下部のウィンドウにWebページのソースコードが表示されます。
開発者ツールウィンドウはさらにXNUMXつのウィンドウに分かれています。 左側に、ページのHTMLコードが表示されます。 右側のペインに、CSSルールが表示されます。
マウスをHTMLコードのソース上に移動すると、強調表示された領域がWebページ上で強調表示されます。 また、問題のこの要素のCSSルールにも注意してください。
また、ウェブページ上のアイテムにマウスポインターを合わせ、右クリックして[ 要素を検査する "。 クリックしたアイテムがソースコードで強調表示されます。
コード開発者および開発者デバッガー
要素検査ウィンドウのHTMLとCSSは編集可能です。 HTMLソースコードをダブルクリックして、必要に応じてコードを編集できます。
CSSペインでスタイルの属性をダブルクリックして編集することもできます。 ルールを追加するには、上部のスタイルペインでプラスアイコンをクリックします。
CSSまたはHTMLコードに変更を加えると、これらの変更はすぐにブラウザーに反映されます。
ここで行ったすべての変更がどこにも保存されないことに注意してください。 ツール 要素を検査する デバッグツールであり、サーバー上のファイルへの変更を保存しません。 つまり、ページを更新すると、すべての変更が失われます。
実際に変更するには、スタイルを変更する必要があります ワードプレスのテーマ またはテンプレートを使用して、保存する変更を追加します。
編集を始める前に ワードプレスのテーマ ツールを使用して既存 要素を検査する 子テーマを作成して、すべての変更を保存してください。
ワードプレスのエラーを発見する方法
ツール 要素を検査する 「 領事 サイトに存在するすべてのエラーが表示されます。 エラーをデバッグしたり、テーマやプラグインの作者に助けを求めたりする前に、何が悪いのかを確認するためにここを見る価値があります。
たとえば、あなたが顧客だった場合 OptinMonster なぜ彼のオプチンが読み込まれないのか不思議に思うなら、あなたは簡単に「 あなたのページのスラッグは一致していません '。
共有バーが正しく機能していなかった場合は、JavaScriptエラーが原因であることがわかります。
このチュートリアルは以上です。 WordPressのブログ. このチュートリアルをお友達と自由に共有してください。
