スキル ページのソースコードを変更する– 上級インターネット ユーザーにとって役立つスキル。 HTMLコードを置き換えることで、開いているWebページを思い通りに変更できます。 この記事では、 ページコードを変更する方法 V Google Chrome。 ただし、他のブラウザでもすべて同じように行われるため、問題はありません。

ページの HTML コードは何ですか?

ブラウザで開くすべてのページには、HTML マークアップ言語の独自のコードがあります。 このコードはタグとテキストを表します。 タグは、サイトのその部分を表示する方法をブラウザに指示する一意のラベルです。 テキストはページのコンテンツであり、ユーザーに表示されるものです。 また、CSS スタイルをページに接続することもできます。 外観ページ要素。 に サイトのソースコードを変更する HTML と CSS について詳しく知る必要はありません。すぐに自分の目で確かめられるでしょう。

Web ページを変更する理由

サイト上のデータを置き換えたり、メッセージのテキストを変更したり、偽のスクリーンショットを撮ったりすることができます。 すべての変更はあなたにのみ表示され、ページをリロードすると表示されなくなることに注意してください。 また、変更されたデータは実際のものではなくなります。 たとえば、10 ドルを持っていない場合、それを 100 ドルに変更すると、それ以上お金はなくなります。 これはブラウザによるページの表示にすぎません。 例：

後：

たとえば、同じサイトで、記事「オープニング」の前回のお知らせを変更します。 ホームページ Google Chromeで。 変更したい要素 (たとえば、お知らせのタイトル) を右クリックし、[コードの表示] を選択します。

開いたウィンドウで「要素」タブに移動し、ページの HTML コードを確認します。 その中で、興味のあるテキストを見つける必要があります。 (赤下線)

古いテキストを削除して、新しいテキストを書きます。

以上、お知らせのタイトルが変更になりました。 次に、お知らせ自体、タグ、カテゴリを変更します。

imgタグのsrc属性を変更することで、別の画像を挿入することができます。

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

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

この番号はリンク コードでは機能しませんでした。 誰もがまったく異なる道を指していました。 簡単で正確なツールはないかと考えたのですが、 Web サイト上で必要な 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 のビデオを見ることをお勧めします。

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

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

説明書

HTMLを開く最も簡単な方法は次のとおりです。 コード組み込みのブラウザ機能の使用に関連しています。 それぞれに表示オプションがあります コードページ。 はい、ブラウザ上で インターネットエクスプローラー見る コードメニューで開く必要があります: 「表示」 - 「HTML の表示」 コード».

一緒に働いている人たちにとっては、 Opera ブラウザ、表示するには コード「表示」-「ソースコード」を開くか、Ctrl + F3 キーの組み合わせを押してください。 ユーザー モジラ Firefoxページを右クリックし、コンテキスト メニューから [ページのソース コード] を選択すると、HTML コードを表示できます。

Google Chrome を使用しているユーザーは、表示されているページを右クリックして [表示] を選択すると表示されるコンテキスト メニューも使用する必要があります。 コードページ。」

保存するには オープンソース Opera で、 をクリックします ページを開くウィンドウの左上部分にあるhtmlの「保存」ボタンを使用します。 Mozilla Firefox の場合は、「ファイル」-「名前を付けてページを保存」を選択します。 HTMLコードはIEでも同様に保存されます。 Google Chromeでは、オープンソースコードを右クリックし、コンテキストメニューから「名前を付けて保存」を選択します。

保存したコードを操作する必要がある場合は、次を使用します。 特別番組。 マスターするために HTML言語 CuteHTML 構文強調表示機能を備えたエディターは非常にシンプルで使いやすいです。 その助けを借りて、非常に複雑なページを作成できます。

HTML を専門的に操作して複雑な Web サイトを作成するには、Dreamweaver を使用します。 これは、非常に複雑なプロジェクトでも迅速に作成できるビジュアルな Web サイト ビルダーです。 このプログラムを使用すると、既製の Web サイト テンプレートを使用できるため、インターネット リソースの作成が大幅に高速化され、簡素化されます。

多くの 無料のテンプレート、それに基づいて非常に美しいウェブサイトを作成することができ、インターネット上に公開されています。 好みのテンプレートをダウンロードし、Dreamweaver で開き、必要に応じて変更するだけです。 既製のテンプレートは http://www.internet-technologies.ru/templates/ からダウンロードできます。

インターネット Web ページには、次へのリンクが含まれている場合があります。 Word文書。 リンクをクリックすると、ブラウザとブラウザの両方にリンクが表示される場合があります。 テキストエディタ。 一番良い開け方は何ですか テキストファイル?

ワードエディタ持っていない 自己設定ドキュメントがブラウザからのものかどうかについて。 すべての設定は Windows で直接構成されます。

次のいずれかを実行して、[ファイル タイプ] ダイアログ ボックスを開きます。

長押しします Windowsキー(OS ロゴが含まれており、キーボードの下部、Ctrl キーと Alt キーの間にあります)。
- デスクトップで、「マイ コンピュータ」アイコンをダブルクリックします。

表示されたメニューから、[ツール] > [フォルダー オプション] を選択し、[ファイル タイプ] タブに移動します。 Windows が次の情報を収集するまで、数分間待つ必要があります。 さまざまな種類ファイル。

リストが表示されたら、リスト内に DOC 拡張子が見つかるはずです。 それをクリックして強調表示し、「詳細」ボタンをクリックします。 [ファイル タイプ プロパティの編集] ダイアログ ボックスが表示されます。 編集では、ブラウザーで Word 文書を表示するための 2 つのオプションが提供されます。

テキストエディタでドキュメントを開く

これがデフォルトの設定です。 維持する場合は、いくつかの設定を行うだけで済みます。 ドキュメントを開くか保存するかを選択できるようにするには、「ダウンロード後に開くことを確認する」の横のボックスをチェックする必要があります。 「このファイルの種類を開くときに常に確認する」チェックボックスをオフにすると、上記のチェックボックスをオンにすることができなくなりますのでご注意ください。

Internet Explorer でドキュメントを開く

[ファイル タイプ プロパティの変更] ダイアログ ボックスで、[同じウィンドウで参照] タブの横にあるボックスをオンにします。 この設定は、Word 文書がデフォルトで Internet Explorer で開かれることを意味します。 ブラウザは対応するプラグインを使用します。そのツールバーは Word と Internet Explorer のメイン メニューを組み合わせたものです。 ワード プロセッサと同じように文書を編集したり書式設定したりできますが、一部のオプションは使用できない場合があります。

この設定を削除するのは難しくありません。 [ファイル タイプのプロパティの変更] ダイアログ ボックスを開いて、[同じウィンドウで参照] のチェックを外すだけです。 この後、デフォルトで文書が Word に読み込まれます。

他のブラウザでドキュメントを開く

特別なプラグインをインストールした後でのみ、他のブラウザでドキュメントを開くことができます。 たとえば、View Docs は Opera 用に開発されており、Firefox でも機能します。 Googleドキュメントビューアなど。 コンピュータへのダウンロードやインストールを必要としないオンライン ツールも多数あります。

長い間、「ページのソースを表示」オプションは私にとって役に立たず、興味もありませんでした。 さよなら HTMLの学習 Codecademy や自分の Web サイトのレイアウトは、私の新しい趣味には発展しませんでした。 ここで疑問が生じました。実際のケースをどこで見つけて、「貯金箱」として興味深いソリューションを借りられるのでしょうか? 答えは、あらゆる独創的なものと同様、予想外に簡単でした。Google Chrome でページのソース コードを見てください。 私のささやかな発見を皆さんにシェアします。

ページのソースコードとは何ですか

私と同じように、HTML プログラミングの最初の一歩を踏み出したばかりの場合は、ページのソース コードが何であるかを調べることをお勧めします。

ソース コードは HTML ページ コードとも呼ばれ、ハイパー テキスト マークアップ言語 (HTML) のテキストです。 これには、実際のページのコンテンツ (テキスト、表) とタグが含まれます。 後者は、コンテンツの表示方法、使用する書式設定の種類、ハイパーリンクまたはメディア ファイルを挿入する場所など、ブラウザに対する指示として機能します。 私たち初心者プログラマーにとって、ソース コードは最高のトレーニングの場です。興味深いサイトを見つけてスパイし、保存し、成功したフラグメントを使用します。 どうやって？

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

お気に入りのページを見つけてください。 たとえば、サイトのメニューのデザインに興味がありました。 Google Chrome ブラウザでソース コードを開くには 3 つの方法があります。

1. アイコンをクリックします メニューブラウザの右上隅にある「 追加のツール」 特に「ソースコードを表示」オプションがあります。 正直、ほとんど使いません この方法：無駄な動きが多い。 さらにシンプルにすることもできます。
2. キーの組み合わせを押します Ctrl+U– 新しいウィンドウが開き、ソース コードが表示されます。
3. コンテキスト メニューのファンの場合: ページを右クリックし、[ページ コードの表示] オプションを選択します。

ブラウザでページの HTML コードを表示するタスクに対応しました。 最も興味深いステージに移りましょう。

ソースコードを編集して保存する方法

Web サイトの作成方法を学ぶには、他の人の HTML コードを読むだけでは十分ではありません。 それを試し、実験し、変更を加え、結果を確認する必要があります。 成功したサンプルをいくつかコンパイルすることから始めることもできます。 ソースコードを編集して保存するにはどうすればよいですか?

オプション 1.「手動」

ページのソースコードを開いた後、以下を呼び出します。 コンテキストメニュー「名前を付けて保存」オプションを選択し、ファイルを次の場所に保存します。 ハードドライブ。 メモ帳またはメモ帳でファイルを編集し、変更を保存してブラウザーで開きます。 変更の結果 (成功または失敗) がブラウザ ウィンドウに反映されます。

オプション 2. プロ向け

毎日ソースコードを「いじる」と「保存→開く→変更→保存→確認」という作業が面倒になってきます。 私自身は、Google Chrome のプラグインである Firebug Lite をインストールするという形で解決策を見つけました。 ブラウザ ウィンドウを離れることなく、ソース コードを編集して保存できます。

SendPulse サービスは、サブスクリプション ベースを作成し、Web サイトへの一時的な訪問者を通常の訪問者に変えるためのマーケティング ツールです。 SendPulse は、顧客を引き付け、維持するための最も重要な機能を 1 つのプラットフォームに組み合わせています。
●メールマガジン、
● ウェブプッシュ、
● SMS メール、
● SMTP、
● Viber のニュースレター、
● Facebook メッセンジャーにメッセージを送信します。

メールマガジン

プッシュ通知の送信

SMTP

Facebook メッセンジャー ボット

SMSの送信

アフィリエイトプログラム