WordPressでテキストをハイライトする方法（初心者向けガイド）

教科書で重要な箇所をマークするために黄色い蛍光ペンを使ったことを覚えていますか？WordPressでのデジタル版は、ウェブサイトで重要な情報を目立たせるのに同様に役立ちます。

しかし、多くの初心者は、このフォーマットをコンテンツに追加するのがいかに簡単であるかに気づいていません。

WPBeginnerを運営する中で、テキストのハイライトのような簡単なテクニックが、読者がコンテンツにどのように関わるかに最も大きな違いをもたらすことに気づきました。

戦略的に使用すると、ハイライトされたテキストは訪問者を最も重要なポイントに誘導し、メッセージの定着率を向上させることができます。

このガイドでは、WordPressでテキストをハイライトするいくつかの簡単な方法を紹介します。

WordPressでテキストをハイライトする理由とタイミング

テキストのハイライトは、コンテンツの重要な情報を強調する簡単な方法です。ユーザーの注意を、見逃してほしくない詳細に向けさせます。

例えば、WordPressウェブサイトで割引オファーを別の色で強調表示すると、読者の注意を引き、より多くの売上を生み出すのに役立ちます。

ブログ投稿でテキストハイライトがどのように見えるかのサンプルを以下に示します。

テキストを別の色で強調表示することは、視覚障害や読解困難のあるユーザーがコンテンツをより簡単にナビゲートし、理解するのに役立ちます。コンテンツの外観を向上させ、より視覚的に魅力的にすることもできます。

ただし、ページ上のテキストを過度にハイライトすると、気が散り、効果が低下する可能性があります。そのため、コールトゥアクション、警告、その他読者が注意を払うべき詳細など、重要な情報テキストのみをハイライトすることをお勧めします。

それでは、WordPressで簡単にテキストをハイライトする方法を見ていきましょう。使用したい方法にジャンプするには、以下のクイックリンクを使用できます。

• 方法1：ブロックエディターを使用してWordPressでテキストをハイライトする
• Method 2: Highlight Text in WordPress Using WPCode (Recommended)
• ボーナス：SeedProd を使用して、ウェブサイトの重要なページをハイライトする

方法1：ブロックエディターを使用してWordPressでテキストをハイライトする

この方法は、ブロックエディター（Gutenberg）を使用してWordPressでテキストを簡単にハイライトしたい場合に最適です。

まず、WordPress管理画面のサイドバーから、コンテンツエディターで既存または新規の投稿を開く必要があります。

そこに着いたら、ハイライトしたいテキストを選択するだけです。次に、ブロックツールバーの下向き矢印アイコンをクリックして、その他のオプションを表示します。

これによりドロップダウンメニューが開き、リストから「ハイライト」オプションを選択する必要があります。

画面にカラーピッカーツールが表示されます。ここから、まず「背景」タブに切り替える必要があります。

その後、提供されているオプションからデフォルトのハイライトカラーを選択します。

「カスタム」オプションをクリックして「スポイト」ツールを起動し、カスタムカラーを選択してテキストをハイライトすることもできます。

最後に、「公開」または「更新」ボタンをクリックして変更を保存することを忘れないでください。

これで、WordPressブログにアクセスして、ハイライトされたテキストがどのように表示されるかを確認できます。

方法2：WPCodeを使用してWordPressでテキストをハイライトする（推奨）

WordPressウェブサイト全体で特定のカラーを使用してテキストをハイライトしたい場合は、この方法が適しています。

この方法の主な利点は、グローバルな制御です。ハイライトカラーを変更することにした場合は、コードスニペットを一度更新するだけで済みます。サイト全体のハイライトカラーが自動的に更新されます。

WordPressでテキストを強調表示するには、テーマファイルにCSSコードを追加することで簡単に行えます。しかし、コードを入力する際にわずかなエラーがあると、ウェブサイトが破損し、アクセスできなくなる可能性があります。

そのため、市場で最高のWordPressコードスニペットプラグインであるWPCodeの使用をお勧めします。

徹底的なテストの結果、テーマファイルを直接編集することなく、ウェブサイトにコードを追加する最も簡単で安全な方法であることがわかりました。詳細については、WPCodeレビューをご覧ください。

WPCodeでコードスニペットを作成する

まず、WPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

有効化したら、WordPress管理画面のサイドバーから Code Snippets » + Add Snippet ページに移動してください。

次に、「カスタムコードを追加（新規スニペット）」オプションの下にある「+カスタムスニペットを追加」ボタンをクリックします。

次に、コードタイプを選択する必要があります。このチュートリアルでは、「CSSスニペット」オプションを選択してください。

その後、コードスニペットに適切な名前を付けます。

これにより、「カスタムスニペットの作成」ページに移動し、コードスニペットの名前を入力することから始めることができます。

名前は参照用であり、コードの目的を覚えておくのに役立つものであれば何でも構いません。

次に、次のコードを「コードプレビュー」ボックスにコピーして貼り付けます。

mark {
background-color: #ffd4a1;
}

それが完了したら、コードのbackground-color行の隣に、好みのハイライトカラーの16進数コードを追加します。

この例では、薄い茶色の色である#ffd4a1を使用しています。

その後、「挿入」セクションまでスクロールダウンします。

ここから、「自動挿入」メソッドを選択して、有効化時にコードを実行します。

次に、ページの上部へ移動し、「非アクティブ」スイッチを「アクティブ」に切り替えます。

最後に、「スニペットを保存」ボタンをクリックして変更を保存します。

ブロックエディターでテキストをハイライトする

CSSスニペットがアクティブになったので、フォーマットを適用する必要があります。これはカスタムスタイルなので、特定のブロックのHTMLビューに一時的に切り替えてテキストをラップします。

まず、WordPressのブロックエディターで既存または新規の投稿を開きます。

ここから、上部にあるブロックツールバーの「オプション」アイコンをクリックします。これにより新しいドロップダウンメニューが開くので、「HTMLとして編集」オプションを選択する必要があります。

これで、ブロックコンテンツがHTML形式で表示されます。

ここでは、ハイライトしたいテキストを <mark> </mark> タグで囲むだけです。次のようになります。

<mark>highlighted-text</mark>

これにより、WPCodeスニペットで選択した16進数カラーでテキストがハイライトされます。

その後、ブロックツールバーの「ビジュアル編集」オプションをクリックして、ビジュアルエディターに戻ります。

完了したら、「更新」または「公開」ボタンをクリックして変更を保存してください。

これで、ウェブサイトにアクセスして、ハイライトされたテキストが実際に機能しているか確認できます。

ボーナス：SeedProd を使用して、ウェブサイトの重要なページをハイライトする

コンテンツ内の特定の単語をフォーマットする方法について説明しました。ただし、場合によっては、連絡フォームやギフトクーポンなど、サイトのセクション全体またはページ全体をハイライトしたい場合があります。

例えば、オンラインストアを運営していて、季節セールを開始したばかりの場合、そのオファーをウェブサイトで強調表示したい場合があります。

これらのセクションは、ランディングページを作成することでハイライトできます。ランディングページは、リードを生成するように設計された、ウェブサイト上の独立したページです。

ウェブサイトの視覚的に魅力的なランディングページを作成するには、SeedProdの使用をお勧めします。これは市場で最高のWordPressランディングページビルダーであり、ドラッグ＆ドロップビルダー、350以上の既製テンプレート、90以上のブロックが付属しています。

私たちのパートナーブランドのいくつかは、ウェブサイト全体をこれで作成しており、素晴らしい経験をしています。詳細については、SeedProdのレビューをご覧ください。

このプラグインを使用すると、お問い合わせフォーム、セールのお知らせ、プレゼント企画、お客様の声、オプトインフォーム、ログインページなど、ウェブサイトの重要なセクションを強調する魅力的なランディングページを簡単に作成できます。

それ以外にも、SeedProdを使用してカスタムテーマ、近日公開ページ、メンテナンスページなどを多数作成することもできます。

詳細については、WordPressでランディングページを作成する方法に関するチュートリアルをご覧ください。

このガイドがWordPressでテキストをハイライトする方法を学ぶのに役立ったことを願っています。また、ウェブサイトをより美しくするためにWordPressでカラーをカスタマイズする方法のステップバイステップガイドや、WordPress向けの最高のAIウェブサイトビルダーの比較もご覧ください。

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