テンプレートおよびプラグイン ファイル内のコードの目的のセクションをすばやく見つける方法。

最初は、これはまったく必要なツールではないと考える人もいるかもしれませんが、サイトの HTML コード全体を表示すると、コード内の必要な要素 (リンク、タグ、メタ タグ、属性、その他の要素など) を見つけるのに最適です。 。

ホットキーの組み合わせ +検索ウィンドウを開くと、Chrome ブラウザでは右上に表示されます。

図 3. サイトコードによる検索

検索フォームにリクエストを入力すると、画面が最初に見つかった要素に移動します。矢印を使用して要素間を移動し、必要な要素を選択できます。

図 4. HTML サイト コードによる検索

手順 2: Google Chrome ブラウザーでサイトの HTML コードと CSS コードを表示および編集する方法

ここで最も重要な部分では、ブラウザーで Web サイトの HTML および CSS コードを編集する方法を説明します。 次に、変更をブラウザに転送します。

このような 便利な道具ブラウザでいつでも利用できるので、サイトの編集を容易にする他のコマンドを試してください。

私のブログの読者の皆さん、こんにちは。 ウェブサイトで美しい機能を見つけて、作成者がどのようにしてそのような興味深い効果を実現したのか疑問に思うことがあります。

答えは非常に簡単であることがわかります。 ある程度のスキルがあれば、これらの機能を多数集めて、独自の Web サイトを短時間で作成することができます。

今日は、ページのコード、特定の要素を開く方法と、このスキルを有益に使用する方法について説明します。

コードの基本的な知識

私のサイトは初心者を対象としているので、最初にサイトとコード全般について簡単に説明したいと思います。

画像を描いてそれを小さな部分に切り分けるには、ブラウザがすべての要素を 1 つの全体に再構築するようにコードを記述します。 すべてが非常に複雑に見えますか？ そんなことはありませんし、それを嘆いても意味がありません。

こうして質の高いWebサイトが作られるのです。 望むならこの問題に参加し、望まないなら研究してください。誰もあなたに強制することはできません。

一つだけ言っておきます...その様子を見ることほど楽しいことはありません 不明瞭な言葉あなたが書いたものは、リンクが機能し、ボタンが動き、画像​​が動き、テキストがクロールするなど、単一の全体に変換され、生命を吹き込まれます。 ヴィクター・フランケンシュタインの気持ちが分かる気がする。

秘密の言語を理解し始め、実際にはすべてが最初に思っていたよりもはるかに単純であることがわかると、あなたは信じずにはいられなくなります。 自分の力そして脳の能力。 これはとてもクールです。

ウェブサイトはどのように作られるのでしょうか? 理想的には、まず。 彼はただ絵を描いているだけだ。 たとえば、下の図に示すように。 今のところ、それは単なるイメージ、写真です。 リンクは機能せず、クリックしてもどこにも移動せず、検索も実行されません。

この図面によると。 以下のスクリーンショットを見てください。 これはばかばかしく、非常に複雑なシンボルのセットだと思うかもしれません。 実際、すべてはそれほど複雑ではなく、特定のアルゴリズムがあります。

タグは約 150 しかなく、それぞれが次のことを担当します。 具体的な行動: リンク、ハイフネーション、太字、色、タイトルなど。 意欲があり、時間を気にしなければ、それらを理解することはそれほど難しいことではありません。

これらの属性の知識のおかげで、ほとんどすべての問題を解決できます。 しかし、開発者はそれぞれ、目標を達成するための独自の方法を見つけます。

経験豊富なクリエイターは結果を達成する方法をすぐに理解しますが、他のクリエイターは記事や競合他社のソースコードから答えを探して考えなければなりません。 サードパーティのサイトから必要な部分を取り出して、自分用に編集するだけです。 これにより作業工程が大幅に短縮されます。

もう少し後で、具体的な例を示します。

コードを表示する

そこで、まず他人の HTML を調べる必要がある場合の対処方法を説明します。 次に、他のすべての質問をさらに詳しく見ていきます。

一番いい方法

最初に説明する方法は初心者には少し複雑ですが、入門として読んでください。 ページを開いてマウスの右ボタンをクリックします。 「名前を付けて保存...」を選択します。

Web ページ全体を保存します。 スクリーンショットにあるように、事前にすべてをダウンロードしました。 ここには 2 つのフォルダーがあります。

必要なものはすべてここにあります。 あらゆる要素。 これを理解していれば、必要なものはすぐに手に入れることができます。 しかし、そのような作業はますます不可能になりつつあります。 ダウンロードはありません。 ページのコピーが禁止されている場合はどうすればよいですか?

これはGoogle Chromeです

すでにお気づきかもしれませんが、私が最も頻繁に使用するのは、 グーグルクロームこのブラウザで他の人のコードを学ぶのは、梨の殻をむくのと同じくらい簡単です。 原則として他のものと同様です。 このスキームは似ているだけでなく、同一になります。 コードを知りたいページを開き、任意の場所を右クリックします。 表示されたウィンドウで「ページコードを表示」をクリックします。

新しいウィンドウでコードのシートが開きますが、初心者にとっては非常に理解しにくいです。 しかし、事前に心配する必要はありません。

1 つの要素のコードのみを知りたい場合は、その要素の上にマウスを置いて右クリックします。 別の Chrome 機能「要素コードの表示」を選択します。

たとえば、ロゴが画像やプログラミング言語を使用してどのように作成されたかに興味があるかもしれません。 結局のところ、正方形を描くことができます CSSヘルプ。 多くの専門家は、コード内にできるだけ多くの情報を書き留めることを推奨しています。 人気のあるサイトではどのように機能するのでしょうか?

それで現れたのは 必要な情報。 上がhtml、下がCSSです。 これらは 2 つの言語です。 1 つ目はテキスト コンポーネントを担当し、2 つ目はデザインを担当します。 CSS がなかった場合は、毎回色とフォント サイズを指定する必要があります。 各ページごとに非常に長いです。 しかし、HTML がなかったら、テキストも存在しません。 ざっくりと説明しましたが、大まかに言うとこんな感じです。

ちなみに、ここでどのように機能するかに興味がある場合は、下の写真へのリンクをご覧ください。 これがあなたの答えです。

モジラ Firefox

マスチックで作業したい場合は、すべてがまったく同じになります。 ページを開いてマウスの右ボタンをクリックします。 コード全体を表示したい場合は、「ページのソース コード」を参照してください。

要素の上にマウスを置くと、そのコードを開くことができます。

ここではデータが画面の下部に表示されていますが、それ以外はすべてまったく同じです。

Yandexブラウザ

Yandex ブラウザでは、すべては前の 2 つのオプションとまったく同じです。ページを開いて右クリックし、ページ コードを確認します。

コードを正確に確認したい場合は、要素の上にカーソルを置きます。

ここではすべてが Chrome とまったく同じように表示されます。

オペラ

そして最後はオペラ。

ところで、マウスを使用する必要がないことに気づいたかもしれません。 コードを開くための簡単なキーボード ショートカットがあり、それはすべてのブラウザで同じです。 CTRL+U.

要素の場合: Ctrl+Shift+C。

結果は次のようになります。

これは初心者にとっては興味深いでしょう

では、すべてがどのように機能するかを見てみましょう。 あるサイトを見つけて、ある要素がとても気に入ったとします。 たとえば、これ。 要素コードを開く方法はすでに知っています。

さあ、コピーしてみましょう。

私はそれを使用しています。このコードを新しいコードに貼り付けます htmlファイル, bodyタグ（英語ではbody）に入れます。

それでは、ブラウザーでどのように表示されるかを見てみましょう。

準備ができて。 テキストを端に揃えて緑がかった色にするには、CSS をこのドキュメントに接続し、このコードをコピーしたサイトから別のコードをコピーする必要があります。

今はやりません。 これには、私もあなたの時間もさらに時間がかかります。 今後の出版物ですべての詳細を説明すると思います。 ニュースレターを購読すると、記事が掲載されたときに誰よりも早くお知らせを受け取ることができます。

それには耐えられないが、今すぐ HTML と CSS についてもっと学びたい場合は、従来通り、無料のトレーニング コースをお勧めします。

HTMLをマスターできる33のレッスンは次のとおりです - « 無料コース HTMLによる」 .

そしてここ 完全な情報 CSSについて - 「CSS無料講座（動画レッスン45本）」 .

これで、もう少し詳しくわかりました。 あなたの努力が成功することを祈っています。 またね！

一部のサイズ、カラー 重要な要素 blog - ブログまたは投稿のタイトル、その他のタグなど。 必要なコードを手動で検索し、テスト ドメインで実験し、これに基づいて後で記事を書きました。

そして最近、リンクの色を変更する必要がありました。 この問題に関する大量の文献を調べた結果、私は次のことに気づきました。 単純なこと: 誰もが自分のテンプレートから例を示しますが、私たちは皆異なるテンプレートを持っており、例のコードが少なくとも少しは似ていれば良いのです。泣き言を言わずに、ランダムに検索して見つけます。

この番号はリンク コードでは機能しませんでした。 誰もがまったく異なる道を指していました。 何か簡単なものはないかと考えたのですが、 精密機器, 見つけ方 必要なコードどのサイトでも html を使用できます。多くのブロガーは、たとえ経験があっても、テンプレートに小さな変更を加えるのが困難です。 誰もがウェブサイトを作成することに独自の興味や目標を持っているため、これは何も悪いことではありません。

テンプレートに小さな変更を加えたい場合は、たとえば、 見出し、記事とセクションのタイトル、フォントとリンクの色とサイズを変更します。通常は学ぶだけで十分です 単純な原理、この記事で説明します。 しかし、それもあります 複雑なケース、html と css についてさらに深く学ぶか、専門家の助けが必要です。

ある日、知人から、テンプレートのカテゴリ パネルの色を変更する場所を探してほしいと頼まれました。 トピックをテスト サブドメインにアップロードしました。 この要素の設定は style.css ではなく別のファイルに保存されていたため、人はそれを見つけることができませんでした。

サイトの HTML コードと CSS コードを見つけて変更する方法

長い記事が苦手な方はこちらをどうぞ 記事の最後に Notepad++ を使用して Web サイトの HTML コードを表示し、フォントの色の変更方法の例を使用してテンプレートのデザインを変更する方法を説明するビデオ チュートリアル。 ビデオでは、ブログを扱う際のその他の微妙な点について説明しています。 本文の内容をより明確に理解できる方のために、以下をご覧ください。 詳細な分析スクリーンショット付きのテーマ。
httpv://youtu.be/uIlVvwCt2ho

用語と概念

記事のタイトルを「 CSSコードの見つけ方「」ですが、基本的にこの質問に対する答えは HTML にあるため、「間違った」名前を使用することにしました。 CSS と HTML は、同じシステムの 2 つの部分であっても、まったく異なるものです。 インターネットにはたくさんあります 技術記事、ここでは次のことを理解するだけで十分です。

• HTML— サイトの構造 (何が続くか、どのような順序で行われるかなど) を担当します。 これがサイト作成の基礎となります。 家に例えると、間取り、部屋の配置です。
• CSS— デザイン（フォント、サイズ、色など）を担当します。 これは家の一般的なスタイルと個々の部屋のスタイルです。どのような壁紙、ランプ、カーテン、家具があるかなどです。 したがって、次のように述べた文書は、 CSSコード「スタイルシート」と呼ばれるもの

たとえば、サイト タイトルの色、テキストのフォント サイズ、サイドバーのヘッダーの色などを変更する方法が知りたい場合は、CSS スタイル シートでこれらすべてを探す必要があります。 コードを自分で変更するために、最初に理解する価値があるのはこれだけです。

私は複雑なものをシンプルにするのが好きです。 昔、初めて車を買ったときのことを思い出します。車はとても古く、配線は腐っていて、ヒューズが頻繁に切れて、そのたびにガソリンスタンドまで牽引していました。 どれだけのお金が無駄になったか想像してみてください 自己交換、結局のところ、1ペニーの費用がかかります。

ある日、私はマスターが実際に何をしているのかを見ました。 ヒューズの仕組みがまだ分かりません。 ただし、どこを変更すればよいかは知っています）。 モーターを自分で修理するつもりはありませんし、ヒューズの交換も難しくありません。 ウェブサイトも同様です。

プログラマーになりたくないのであれば、プログラミングについて深く理解する必要はありません。 何が何の目的で、どこで検索し、どのように変更するかを理解するのは十分に明確です。 自分で変えられるところは変えて、それ以外は専門家に任せたほうがいいでしょう。 についての記事には、 便利なリンクこのテーマについて。

すべての分野で専門家になる必要がありますか?

SEO ブログでは、初心者は HTML を深く理解する必要があるのか​​、それともすべてを独自のものにするために Web サイト自体の書き方を学ぶ必要があるのか​​についてよく議論されます。そしてここでは、誰に近いかがわかります。 私はもう少し興味があるので、今ウラジミールからもっと勉強しています。 今年11月、ウラジミールさんは自身のブログを開設した。 彼のブログは最もシンプルな方法で作成されており、 無料のテンプレート、彼はそれを自分に合うように少しだけ変更しました。

開設から 10 日後、このブログはすべての Runet サイトのランキングで 104 位になり、1 日あたりのトラフィックは約 1.5 千人になりました。 10日以内に。 それで、どういうことですか？ ウラジミールは HTML に精通しており、独自のテンプレートを注文して購入することができます。 だからあなたはそれを理解する必要があります その秘密はテンプレートにあるのではなく、情報の有用性にあります。

HTMLコードはどこに隠されているのでしょうか？

余談で申し訳ありませんが、コードに戻りましょう)。 ブログのタイトルのフォントの色を変更したいとします。 私のテストサイトの例を見てみましょう。

1. サイトを開くには Googleブラウザクロム (まだ使用していない場合は、インストールしてください。Web サイトでの作業に適した設計になっており、多くのツールが組み込まれています)。
2. 変更する要素の上にマウス カーソルを移動します。 。 で この場合- ブログの名前に。 それを右クリックし、表示されるウィンドウで「VIEW ELEMENT CODE」を選択します。

重要: これをページコードの表示と混同しないでください。 ここではページ全体は必要ありません。別の要素だけが必要です。

それをクリックすると、ブラウザの下部にコード表示ウィンドウが表示されます。

変更しているコード行は赤色で強調表示されています。

ただし、青で強調表示された領域には、探しているものが含まれています。 ここで、フォント、色、サイズ、強調表示などを担当する正確な (近似ではない) コード行を見つけることができます。 このようにして、任意のテンプレートの任意の要素のコードを見つけることができます。

青で強調表示されているブロック内で目的の行を見つけます。 右側にスライダーがあり、スクロールして必要な行を見つけることができます。

どこで物を探すかについての一般原則:

フォント名 - FONT FAMILY 行内

フォント サイズ - FONT SIZE 行

フォントの色 - COLOR 行内

以下に、要素の名前、サイズ、フォントの色が変更される 3 つの主要な行を示します。 スタイル CSS 行の右側には、ドキュメント内の行の位置が示されています。 他の要素を変更する必要がある場合 (たとえば、メニュー バーの色やリンクの色を変更できる行の位置を確認する必要がある場合)、すべてがまったく同じように行われます。

注意：

コピーする行は図では赤で強調表示されています。

これにより、後でスタイル シート内で見つけることができます。

4. 行をコピーします。 この例ではサイト名の色を変更したいので、2 番目の図の赤い四角で強調表示されている行をコピーします。 私のテンプレートでは、サイトのタイトルの色を変更します。

#header h1 a、#header h1 a:visited (

ファイル「スタイルシート（style.css）」内で必要な行を見つけます。 これは管理パネルですでに行われています。 自信も完全な理解もありませんが、を除外するためにすべての実験をテスト サブドメインで実行することを強く求めます。

したがって、管理パネルに移動します: コンソール - 外観 - エディター。 右側のサイドバーで STYLE TABLE (STYLE.CSS) ファイルを見つけて開きます。

検索バーを開きます CTRLキー+ F: 空の行ウィンドウが上部ウィンドウに表示されます。 ステップ 4 でコピーした行をそこに貼り付けます。

そして、この行がスタイル シートでどのように強調表示されるかがわかります (図のオレンジ色)。

要素に変更を加えます。 この場合、フォントの色を変更しているので、COLOR 行で別の値、つまり希望する色を置き換えます。 この例では、色は黒で、その意味は次のとおりです。

どの Web カラー パレット サービスでも色を選択できます。検索エンジンに「Web カラー パレット」と入力し、希望する色を選択します。 色を選択し、そのデジタル値をコピーし、慎重に古いものと置き換えます。 その後、[ファイルの更新] をクリックして、何が起こったかを確認します。

過去 1 時間変更が表示されない場合は、再度ページにアクセスしてください。今回はすべてが表示されるはずです。

説明するには長い時間がかかりますが、実際には、特に最初のスキルが現れるときはすべてがすぐに完了します。

特定の要素を変更する方法の詳細:

今日はこれで終わりです。これ以上コードについては説明しません。 これで、あなた自身が HTML コード (むしろ CSS コード) の任意の要素を簡単に見つけて変更できるようになることを願っています。簡略化していることを専門家の皆様にお許しいただければ幸いです。 分からない場合でも、このページにアクセスしてください。 くだらないことで時間を無駄にしないでください。

あらゆるエンジン (wordpress、joomla など) のあらゆるテーマ/テンプレートで単語や要素を検索して見つけ、必要なものに置き換える方法についての Artem Abramovich のビデオを見ることをお勧めします。

気に入ったらシェアしてください:

次のことについても興味があるかもしれません:

インターネット ユーザーはそれぞれ、自分が利用するお気に入りのサイトを持っています。 長い間。 そして、それがどのように作成され、それが何で構成されているかを見ようと思わなかったのは怠け者だけでした。 Web サイトを作成するにはさまざまな方法があるため、これらすべての質問に答えることは不可能ですが、Web サイトを構成するコマンドとコードを確認することは可能であり、誰でも公開されています。

もう 1 つの疑問は、プログラミングに関与していない人がコードを構成する記号を理解できるかどうかです。 ただし、以下に示す例から、 Googleユーザー Chromeなら見れるようになるよ 個々の要素サイト。

GoogleブラウザでHTMLページのソースコードを表示する方法

Chrome でページ コードを表示できるようにするには、興味のあるサイトにアクセスして次の手順を実行する必要があります。

これら 2 つの項目は、ユーザー、プログラマ、またはハッカーにとっての機能と情報が異なります。

ページコードと単なる「コードの表示」コマンドの違いは何ですか?

これらの各機能を分析して、別の記事を書くことができます。 プログラマにとって、この違いは重要であり、Google Chrome ブラウザでどのような場合に「コードの表示」を使用する必要があり、どのような場合に「ページ コードの表示」を使用する必要があるかを理解しています。

ただし、平均的なユーザー向けに説明すると、これらの機能は次の目的に分類できます。

1. 「ページコードの表示」は、ページのメインの組み合わせを表示する場合にのみ必要です。 基本的に、これはサイトの構造です（ 追加モデルとして CSSファイルサイト作成者のフォルダーに残っていたその他の追加情報）。 この構造創作には適さない 自分のページ「コピー＆ペースト」によって作成できますが、これにより、Google Chrome ブラウザーのサイトがこのような外観デザインになるように、プログラマーが正確に何を行ったのか、どのような順序で行われたのかを確認できます。
2. 「コードの表示」では、詳細な構造が表示され、ページ上の影響を受けるすべての領域が強調表示されます。 特定のリスト コードの上にマウスを移動すると、そのコードが属するサイト上の要素が強調表示されます。
3. ページ コードを表示すると、別のブラウザで開きますが、編集することはできません。 つまり、サイトコードのコピーと読み取りにのみ適しています。 しかし、これも同様に便利な機能です。
4. 「コードの表示」は変更可能で、任意の要素を都合の良い方法で編集できます。 もちろん、これらすべての変更はページが更新されるまで「有効」になりますが、これらの設定を確認して、なぜこの値またはその値が必要なのか、変更するとどうなるのかを理解するのが楽しい場合もあります。 そのような行為によって自分自身やサイトに損害を与えるとは考えないでください。これらの変更は Google Chrome のコードにのみ影響し、オンラインには影響しません。

要素コードをどう見るかという問題を検討中です

このような質問に答えるとしたら、それ自体を示唆する唯一の選択肢は例です。 なぜなら、1つの記事でこのトピックを理解できる人（Web開発者）になるのは非常に難しいですが、質問を解決するために例を示すことははるかに簡単だからです。

要素コードの機能は非常に幅広いため、Google Chrome ブラウザの Web サイト上の単語の 1 つを取り上げます。 私たちのサイトにどのようなキーワード (コードでは「キーワード」と表記します) が使用されているかを検討したいと思いました。 これを行うには、次のアルゴリズムを実行します。

Google Chrome ブラウザでこの機能を使用するその他の方法

一般に、要素のコードをどのように見るか、そしてなぜそれが必要なのかという質問に答え続けて、その機能をリストする必要があります。 つまり、Google Chrome ブラウザで任意のサイトの要素のコードを表示できる機能のおかげで、次のことが可能になります。

• head (「サイト ヘッダー」) から始まり end (プログラムの最後のコマンド) で終わるサイトの構造を確認してください。
• サイトのすべての機能を表示します。つまり、他のサイトへのリンク、 追加モジュール外部サイトからの情報や、さまざまな情報を収集するための組み込みカウンターの存在。
• サイトからのコピーが禁止されているかどうかを確認します。
• コードは、サイトの他のページへのすべてのリンクと、そのデザインとクリック後のその後のアクションを記録します。

これは決して有限のリストではありません。 しかし、それがなければ、 特別な知識– コードを「読む」 Googleページ Chromeではほぼ不可能と取得されたデータ 一般ユーザー実質的には必要ありません。

「要素コードの表示」項目が機能しない

各サイトには次のような特徴があるとすぐに言うべきです。 オープンアクセス要素コードに。 つまり、最も人気があり高価なサイトであっても、そのコードを閲覧することができます。 したがって、Google Chrome ブラウザーの項目がアクティブでない場合、またはエラーが生成される場合は、次の理由が考えられます。

• ユーザープロファイルが破損しています。
• コンピューター上のマルウェアの存在。
• ロック 特定の拡張子生産性を向上させるためです（これは実際に起こる可能性があります）。

破損したユーザープロファイルを修正する

作成するには 新しいプロフィール、古いものをコンピュータから削除する必要があります。 これを行うには、次のことを行います。

1. Google Chromeを閉じて、内蔵のChromeを起動します。 Windowsブラウザ冒険者。
2. アドレス バーにコマンド %LOCALAPPDATA%\Google\Chrome\User Data\ を入力します。
3. ディレクトリが開いたら、「Default」フォルダーを探し、その名前に「Backup」を追加して、「Backup Default」のようにします。
4. Chrome ブラウザを再起動すると、新しいプロファイルが作成されます。

マルウェアまたはその残骸を削除します

新しいプロファイルでページ要素コードにアクセスできず、それでもエラーが表示される場合は、次のことを行う必要があります。

1. コマンドラインを開きます Windows文字列(「実行」)そこに「cmd」コマンドを入力します。
2. 次のコマンドを行に入力します: RD /S /Q “%WinDir%\System32\GroupPolicyUsers”。
3. アクションを確認したら、RD /S /Q “%WinDir%\System32\GroupPolicy” と入力します。
4. ここで「gpupdate /force」(引用符なし) とします。

すべてが正しく行われた場合は、再起動後 グーグルコンピュータ Chrome は要素のコードを開き、ブラウザは正常に動作します。

インターネット上の無数のサイトを見てみると、私たちが本当に気に入ったサイトに出会うことができます。 すぐに多くの疑問が生じます。 サイトは自作のコードまたは何らかの CMS を使用して作成されましたか? 彼のものは何ですか CSS スタイル? そのメタタグとは何ですか? 等々。

Web サイトのページのコードに関する情報を抽出するために使用できるツールは数多くあります。 しかし、私たちは常にマウスの右ボタンを手元に持っています。 私のサイトを例として、これを使用します。

ページコードを表示するにはどうすればよいですか?

見る ソースサイトページでは、Web ページの任意の領域 (画像とリンクを除く) の上にマウスを置く必要があります。 この後、マウスの右ボタンをクリックします。 いくつかのオプションを含むウィンドウが目の前に開きます（ さまざまなブラウザ若干異なる場合があります）。 たとえば、Google Chrome ブラウザでは、次のコマンドがあります。

• 戻る;
• フォワード;
• リブート;
• 名前を付けて保存;
• シール;
• ロシア語に翻訳します。
• ページコードを表示する;
• コードを表示します。

をクリックする必要があります ページコードを表示する, するとサイトページのhtmlコードが目の前に開きます。

ページコードの表示: 注意すべき点は何ですか?

したがって、HTML ページのコードは番号付きの行のリストであり、各行にはこのサイトの作成方法に関する情報が含まれています。 この膨大な数の兆候を理解し、 特殊文字、コードの異なるセクションを区別する必要があります。

たとえば、head タグ内のコード行には、 サーチエンジンそしてウェブマスター。 サイト上には表示されません。 ここでその方法がわかります キーワードこのページは、タイトルと説明の書き方に基づいて宣伝されています。 ここにもリンクがあり、クリックすると家族について知ることができます。 グーグルフォントサイトで使用されています。

サイトが作られた場合 CMS ワードプレスまたは Joomla の場合、ここにも表示されます。 たとえば、この領域には次の情報が表示されます。 ワードプレスのテーマまたは Joomla テンプレートサイト。 青で強調表示されているリンクの内容を読むと確認できます。 1 つのリンクには Web サイトのテンプレートが表示されます。

例えば：

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

ページの CSS フォント スタイルが表示されます。 この場合、フォントが使用されます。 これは、font-family: 'Source Sans Pro' で確認できます。

このサイトは Yoast SEO プラグインを使用して最適化されています。 これは、コードの次のコメント化されたセクションからわかります。

このサイトは Yoast SEO プラグイン v3.4.2 - https://yoast.com/wordpress/plugins/seo/ で最適化されています。

body タグ内に含まれるすべての情報がブラウザによってモニター画面に表示されます。 ここではページの HTML コードが表示され、一番下に Yandex Metrics スクリプト コードがあります。 これは、次のテキストを含むコメント化されたタグで囲まれています。

/Yandex.Metrikaカウンター

要約しましょう

かなり表面的なコード分析を行ったところ、 ホームページこのサイトを参照すると、このページが作成されたツールについて結論を出すことができます。 私たちはそれについて次のように見ました。

• CMS ワードプレス;
• Google フォント Source Sans Pro。
• WordPress テーマ – シドニー;
• Yoast プラグイン;
• Yandex メトリクス カウンター。

さて、分析の原則 htmlコードサイトのページは非常にわかりやすいです。 調査中のページをブラウザで開いておく必要はまったくありません。 ctrl+a、ctrl+c、ctrl+v のキーの組み合わせを使用して、ページ コードをコンピュータに保存できます。 任意の場所に貼り付けます テキストエディタ(Notepad++ の方が良いです) で保存します。 html拡張子。 したがって、いつでもそれをより深く研究し、自分にとってより有益な情報を見つけることができます。