WordPressはドラッグ＆ドロップですが…それでも私がHTMLをいじる理由

ウェブサイトが実際にどのように機能するのか疑問に思ったことはありませんか？

それは魔法のように思えるかもしれませんが、あなたが目にするすべてのウェブページの後ろには言語があります。その言語はHTMLと呼ばれます。

HTMLをインターネットの基本的な構成要素と考えてください。

ほんの少しのHTMLの知識でも、WordPressの操作を本当にレベルアップさせることができます。WordPressのウェブサイトをさらに良くするために、それがどのように人々に役立つかを私は直接見てきました。

この記事では、HTMLとは何か、なぜそれが重要なのか、そしてWordPressサイトにカスタムHTMLコードを追加する方法を説明します。

効果的なウェブデザインにとって、それがどれほど簡単で役立つかに驚くかもしれません！

目次

HTMLとは？

HTMLはHyperText Markup Languageの略です。基本的に、HTMLはウェブコンテンツを構造化する言語です。ウェブページの骨格と考えてください。

HTMLは「タグ」と呼ばれるものを使用します。タグは、コンテンツの各部分が何であるかをウェブブラウザに伝えます。

たとえば、タグは、何かがヘッダー、段落、または画像であることをブラウザに伝えることができます。ブラウザはこれらのタグを読み取って、ウェブページがどのように表示されるべきかを決定します。

HTMLはプログラミング言語ではありません。それは、ブラウザが理解できるように情報を整理する方法のようなものです。

WordPressでHTMLを気にするべき理由

WordPressは非常に使いやすいです。コードを知らなくてもウェブサイト全体を構築できます。では、なぜHTMLにこだわるのでしょうか？

さて、HTMLはコンテンツに対するより多くの制御を可能にします。通常のWordPressエディターだけでは十分でない場合があります。

画像に特定の属性を追加したいとします。または、非常にユニークなリストスタイルを作成したいかもしれません。HTMLを使用すると、そのようなことができます。

HTMLはトラブルシューティングにも役立ちます。

WordPressで奇妙なフォーマットの問題が発生したことはありませんか？HTMLを確認すると、問題をすばやく見つけて修正するのに役立ちます。ビジュアルエディターで推測するよりもはるかに高速です。

さらに、HTMLは柔軟性を提供します。高度なカスタマイズを追加したいですか？スタイリング用のカスタムクラスや、より複雑なレイアウトなど。HTMLはそれらの可能性を解き放ちます。

そして、もう一つ大きな点があります。それは将来性です。

WordPressは常に進化しています。しかしHTMLはどうでしょうか？それは常に役立つ基本的なウェブスキルです。

何度も見てきましたが、HTMLを理解することで、ウェブの世界でずっと適応しやすくなります。

HTML入門：基本

HTMLの構成要素について話しましょう。それはタグと呼ばれます。

タグは、ブラウザにコンテンツをどう扱うかを指示する命令です。ほとんどのタグはペアで提供されます。開始タグと終了タグです。

例えば、段落を作成したい場合は、開始タグとして<p>タグを、終了タグとして</p>タグを使用します。

終了タグのスラッシュが見えますか？それが終わりを示す方法です。

よく使う一般的なHTMLタグをいくつか見てみましょう。

見出しはタイトルやサブタイトルに使われます。<h1>、<h2>、<h3>、<h4>、<h5>、<h6>があります。

<h1>が最も重要な見出し（通常はメインタイトル）で、<h6>が最も重要度の低い見出しです。

リンクは、ウェブをウェブたらしめているものです！<a>タグはリンクを作成します。<a>はアンカーの略です。

画像を表示したいですか？<img>タグがあなたの味方です。<img>はイメージの略です。

物事のリストを作成する必要がありますか？HTMLが対応します。主なタイプは2つあります。

• 順序なしリスト（箇条書き）の場合は<ul>を使用します。「ul」は「unordered list」の略です。
• 順序付きリスト（番号付きリスト）の場合は<ol>を使用します。「ol」は「ordered list」の略です。

そして、<ul>と<ol>の両方の中で、リストの各項目には<li>タグを使用します。「li」は「list item」の略です。

タグには属性を含めることもできます。属性はタグに関する追加情報を提供します。

例えば、<a>タグは、どこにリンクするかを伝えるためにhref属性が必要です。次のように：<a href="https://example.com">リンクテキスト</a>。href属性はウェブサイトのアドレスを保持します。

そして<img>タグは、画像ファイルの場所を伝えるためにsrc属性が必要です。また、画像が読み込めない場合やアクセシビリティのために重要な「代替テキスト」用のalt属性も持つべきです。

次のように：<img src="image.jpg" alt="説明的なテキスト">。

ここに、HTMLが実際に機能する非常にシンプルな例を示します。

<h1>Welcome to My Blog</h1>

<p>This is my first paragraph of content. It's going to be awesome!</p>

<a href="https://duplicator.com">Check out Duplicator!</a>

そのコードは、ウェブページにメインの見出し、段落、そしてリンクを作成します。

私が最初にHTMLを学び始めたとき、これらの基本的なタグが私の出発点でした。そして正直に言うと？それらは今でも私がオンラインで行うほとんどすべてのことの基盤です。これらのシンプルなタグは強力です！

HTMLを活用する：実践的な例

では、WordPressで実際にHTMLをどのように使用できるでしょうか？いくつかの例を見てみましょう。

テキストを太字や斜体にしたいですか？HTMLで可能です。

テキストを太字にするには<strong>と</strong>タグを使用します。または<b>と</b>タグを使用します。これらもテキストを太字にします。

このように: <strong>このテキストは太字です</strong>。

イタリック体にするには、<em>または<i>を使用します。このように: <em>このテキストはイタリックです</em>。

これらのタグは、コンテンツ内の単語やフレーズを強調するのに役立ちます。

<a>タグについて説明しました。サイト内の他のページや他のウェブサイトへのリンクに使用できます。

テキスト、画像、さらにはボタンをリンクできます。すべては、適切なhref属性を持つ<a>タグを使用することにかかっています。

WordPressサイトにYouTubeまたはVimeo動画を追加したいですか？ほとんどの動画プラットフォームでは、埋め込みコードが提供されます。これらのコードは通常HTMLであり、多くの場合<iframe>タグを使用します。

YouTube（または動画がホストされている場所）から埋め込みコードをコピーして、WordPressに貼り付けるだけです。WordPressはそれを処理する方法を知っています。

箇条書きリストが必要ですか？<ul>タグを使用します。番号付きリストの場合は、<ol>および<li>タグを使用します。

コンテンツのセクションを区切る線を追加したいですか？<hr>タグは水平線を作成します。テキストを視覚的に分割する簡単な方法です。

これらはほんの一例ですが、WordPressでHTMLがどのように役立つかがわかります。すべては、ウェブサイトのコンテンツに少し構造と追加機能を追加することにかかっています。

WordPressのHTMLを学ぶ方法

それで、「わかりました、HTMLは役立ちそうですが、どうやって学ぶのですか？」と考えているのですね。良い質問です！幸いなことに、素晴らしいリソースがたくさんあります。

今すぐHTMLを学び始めることができる場所をいくつか紹介します。

MDN Web Docsは、ウェブ開発の百科事典のようなものです。Mozilla（Firefoxの開発元）によって作成されており、非常に包括的で信頼性があります。

インタラクティブな学習が好きなら、Codecademyは素晴らしいです。ブラウザで実際にコードを書くコースがあります。

W3schoolsは、ウェブ開発チュートリアルの人気のあるウェブサイトです。HTMLの例とリファレンスがたくさんあります。

WordPressでHTMLがどのように使用されているかを確認したいですか？公式のWordPress開発者ドキュメントを確認してください。少し技術的ですが、より慣れてきたら素晴らしいリソースになります。

どのリソースを選択しても、最も重要なのは練習です。真剣に。HTMLは読むだけでは学べません。コードを書いて何が起こるかを見る必要があります。

実験してください！壊すことを恐れないでください。それが学び方です。

WordPressでHTMLを使用する方法

WordPressでHTMLを使用する方法はたくさんあります。一つずつ見ていきましょう。

1.ブロックエディターでカスタムHTMLブロックを追加する

WordPressでブロックエディター（Gutenberg）を使用している場合、HTML専用の特別なブロックを使用できます。カスタムHTMLブロックと呼ばれます。

使用するには、WordPressのページまたは投稿に新しいブロックを追加するだけです。ブロック検索バーで「HTML」を検索します。カスタムHTMLブロックが表示されます。

それをクリックしてコンテンツに追加します。他のブロックを追加するのと同じです。好きな場所にドラッグアンドドロップすることもできます。

ブロックを追加すると、WordPressのHTMLコードを入力または貼り付けられるボックスが表示されます。そこにHTMLを直接入力してください。

プレビューをクリックすると、実際に公開せずに、HTMLコードがページ上でどのように表示されるかを確認できます。

これはコードを確認するのに非常に便利です。

2.ブロックをHTMLで編集する

WordPressのブロックはすべてHTMLとして編集できることをご存知でしたか？はい、通常の段落ブロックでさえもです。

これは、既存のブロックに簡単なHTML調整を加えたい場合に役立ちます。

まず、編集したいブロックをクリックします。次に、ブロックのツールバーにある3つのドットを探します。それをクリックしてください。

メニューが表示されます。そのメニューで、HTMLとして編集ボタンを押してください。

すると、ブロックが変化します！通常のビジュアルエディターの代わりに、そのブロックのカスタムHTMLコードが表示されます。これでHTMLを直接編集できます。

これはちょっとした調整に最適です。後でスタイリングするために段落に特定のクラスを追加したい場合など。または、HTMLで処理する方が簡単な、ごくわずかな書式設定の問題を修正する必要がある場合などです。

HTMLの編集が終わったら、ブロックツールバーのビジュアルとして編集をクリックして、通常のビジュアルエディタービューに戻ることができます。

3.Gutenbergでコードエディターを使用する

コードに慣れている方のために、WordPressブロックエディターには本格的なコードエディタービューがあります。これは、投稿またはページのHTMLコード全体を表示します。

コードエディターに切り替えるには、Gutenbergエディター画面の右上を見てください。そこにも3つのドットがあります – エディター全体のメインオプションメニューです。そのドットをクリックしてください。

そのメニューで、コードエディターというオプションが表示されます。それをクリックしてください。

ページ全体のタグと構造がコードで表示されます。

このWordPress HTMLエディターは、コードで直接作業することを好む上級ユーザー向けです。コーディングが好きで、ページの全体的なHTML構造を見たい場合は、コードエディターが最適です。

ただし注意してください！HTMLに間違いを犯すと、ページのレイアウトが崩れる可能性があります。コードエディターを広範囲に使用する場合は、HTMLを理解することが重要です。

通常のビジュアルエディターに戻したい場合は、右上メニューに戻ってビジュアルエディターをクリックしてください。

4.クラシックエディターでHTMLを追加する

クラシックWordPressエディターには、ビジュアルとテキストの2つのタブがあります。テキストタブは、コードを入力できる場所です。

テキストをクリックすると、投稿のHTMLコード全体が表示されます。ここでHTMLコードを直接記述または貼り付けることができます。

HTMLを追加または編集した後、ビジュアルタブに戻ってどのように表示されるかを確認できます。HTMLのレンダリングされたバージョンが表示されます。

5.WordPressコードスニペットプラグインを使用する

WordPressサイトにHTML、CSS、またはJavaScriptの小さな断片を追加したい場合があります。カスタムトラッキングコードを追加したり、サイトの特定の領域に特別なスタイルを適用したりしたい場合などです。

これを行うためにテーマファイルを編集することもできますが、リスクが伴います。また、テーマが更新されると、変更が上書きされる可能性があります。

そこでコードスニペットプラグインが登場します。これらのプラグインを使用すると、WordPressダッシュボードから直接コードスニペットを追加できます。

コードを整理し、テーマファイルから分離しておくことができます。これは、特にコードの専門家でない場合、はるかに安全で管理しやすくなります。

コードスニペットを追加する前に、必ずウェブサイトのバックアップを取ることをお勧めします。コードに問題が発生した場合、サイトを簡単に復元できるようにしておきたいからです。

Duplicatorは、WordPressサイトの完全なバックアップを簡単に作成できるプラグインです。コードを変更する前には、必ずバックアップを取ることをお勧めします。

私のお気に入りのコードスニペットプラグインはWPCode（旧「Insert Headers and Footers」）です。このツールを使用すると、HTML、CSS、JavaScriptをウェブサイトに追加できます。

さらに、コーディングに慣れていない場合でも使用できる、あらかじめ用意されたスニペットがたくさんあります。

コードスニペットプラグインを使用することは、テーマファイルを直接編集するよりもはるかに安全です。カスタムコードを追跡するのも簡単です。

6.WordPressウィジェットでHTMLを追加する

WordPressには、カスタムHTML用の組み込みウィジェットがあります。これを見つけるには、WordPressダッシュボードに移動し、外観をクリックしてからウィジェットをクリックします。

サイドバーやフッターなど、さまざまなウィジェットエリアが表示されます。これらはWordPressテーマによって異なります。

HTMLを追加したいウィジェットエリアに、カスタムHTMLウィジェットを追加します。

そのボックスに直接HTMLを入力または貼り付けます。

ウィジェット内のHTMLを使用して、さまざまなものを追加できます。カスタムテキスト、画像、リンク、埋め込みコードなど、すべて機能します！

HTMLを追加したら、ウィジェット設定の更新ボタンをクリックします。

これで完了です！HTMLはウェブサイトのそのウィジェットエリアに表示されます。

7.WordPressテーマでHTMLを編集する

実際、WordPressテーマファイルに直接アクセスして、そこでHTMLを編集することもできます。これにより、サイトの構造を大幅に制御できますが、大きなリスクも伴います。

注意しないと、テーマファイルを直接編集するとウェブサイトが壊れる可能性があります。コードのちょっとした間違いが、大きな問題を引き起こす可能性があります。

テーマファイルを編集する場合は、常に子テーマを使用することをお勧めします。子テーマは、メインテーマの安全なコピーのようなもので、安全に変更を加えることができます。これにより、メインテーマが更新されても、変更が上書きされることはありません。

さて、警告はこれくらいにして、テーマファイルを編集する方法を説明します。WordPressダッシュボードで、外観をクリックしてからテーマファイルエディター（テーマエディターと呼ばれることもあります）をクリックします。

右側には、テーマファイルのリストが表示されます。これらのファイルは、ウェブサイトの構造とレイアウトを制御します。

HTMLを含む一般的なファイルには次のようなものがあります。

• header.php：このファイルは通常、ウェブサイトの最上部、ヘッダーエリアを制御します。
• footer.php：このファイルは最下部、フッターエリアを制御します。
• sidebar.php：テーマにサイドバーがある場合、このファイルがそれを制御します。
• index.php：これは多くの場合、ウェブサイトのメインページであり、ブログ投稿を表示します。
• single.php：これは、個々のブログ投稿の表示方法を制御します。
• page.php：これは、「会社概要」や「お問い合わせ」などの通常のページの表示方法を制御します。
• テンプレートファイル：テーマには、さまざまな種類のページ用の他のテンプレートファイルが含まれている場合があります。

テーマファイルエディターで直接HTMLを編集できます。ファイルをクリックして開き、変更したいHTMLを見つけて編集します。次に、ファイルを更新をクリックして変更を保存します。

注意：テーマファイルを編集するのは、本当に何をしているか理解している場合のみとし、必ず子テーマを使用し、バックアップを作成してください。

私の経験では、テーマファイルを編集するのは、他の方法では実現できない非常に具体的なカスタマイズのためだけです。それでも、私は非常に慎重です。テーマファイルを操作する際には、子テーマとDuplicatorのバックアップは常に私のワークフローの一部です。

8.FTPを使用してWordPressのHTMLを編集する

FTPはFile Transfer Protocolの略です。これにより、WordPressのテーマファイル（およびその他のファイル）を編集するための最も直接的なアクセスが可能になります。

FTPを使用するには、いくつかのものが必要です。

• FTPクライアント：これはサーバーに接続できるソフトウェアです。一般的なFTPクライアントには、FileZilla、Cyberduck、Transmitがあります。
• FTP認証情報：これらはWebホスティングプロバイダーから提供されます。通常、FTPホスト、ユーザー名、パスワード、ポート番号が含まれます。

FTP認証情報が見つからない場合は、ホスティングアカウントの設定を確認するか、サポートに連絡してください。

これらが揃ったら、FTPクライアントを開き、FTP認証情報を入力してサーバーに接続します。

接続後、2つのサイドが表示されます。片方にはコンピューター上のファイルが、もう片方にはWebサーバー上のファイルが表示されます。

サーバー側のWordPressテーマファイルに移動します。パスは通常、/wp-content/themes/your-theme-name/のようになります。

バックアップが完了し、FTP経由でテーマフォルダにアクセスできたら、テーマのHTMLファイルをコンピューターにダウンロードするか、直接編集できます。

FTPクライアントでファイルを右クリックし、ダウンロードまたは表示/編集を選択するだけです。

次に、コンピューター上のダウンロードしたファイルをコードエディターを使用して編集します。このための優れたコードエディターには、VS Code、Sublime Text、Atom、Notepad++があります。

コードエディターでファイルを開き、HTMLの変更を加えます。

HTMLの追加が完了したら、ファイルを保存します。FTPクライアントでファイルを右クリックし、アップロードを選択します。これにより、サーバー上の元のファイルが編集済みのバージョンで上書きされます。

FTPは強力なツールですが、ある程度の技術的な知識が必要です。また、使用する際には責任を持つことが重要です。アップロードする前に必ず変更を確認し、常にバックアップを用意してください。

よくある質問（FAQ）

最終的な考え

HTMLを少しでも学ぶことで、WordPressで新しい可能性の世界が開けます。より多くのコントロール、より多くの柔軟性、そしてWebサイトが実際にどのように機能するかについての深い理解が得られます。

学び続け、実験することを恐れないでください。コードをいじればいじるほど、より快適になります。

私が言及したリソースを探求し、WordPressにHTMLを追加するさまざまな方法を試して、何が作成できるか見てみましょう！

そして覚えておいてください、大きな変更を加える前に必ずサイトをバックアップしてください！Duplicatorのようなツールはバックアップを簡単にし、後々多くの手間を省くことができます。

せっかくなので、これらの他のWordPressガイドも気に入ると思います。

• WordPressコードエディターについて知っていることを忘れて、代わりにこれを試してください
• WordPress向けの最高のノーコードツール15選
• よりスマートにコーディング、よりハードにしない：すべてのプロのためのWordPress開発者ツール
• WordPress CLIの使い方：コマンドラインをマスターする
• WordPressの学習にはどのくらい時間がかかりますか？