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

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

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

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

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

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

WordPressでテキストをハイライトする理由

WordPressでテキストをハイライトすることは、コンテンツの最も重要な部分に注意を引くのに役立ちます。

これにより、重要な情報が見つけやすくなり、読みやすさが向上し、視覚や読字に困難を抱えるユーザーのアクセシビリティがサポートされます。

テキストをハイライトする主な利点は次のとおりです。

• 重要な情報の視認性を向上させます: 割引、オファー、警告などの重要な詳細を目立たせ、読者が見逃さないようにします。
• コンバージョンを増やします: 行動喚起や特別オファーをハイライトすることで、ユーザーが次のステップをより簡単に踏み出せるように誘導できます。
• 読みやすさを向上させます: 長いコンテンツをスキャンしやすくし、読者が最も関連性の高いポイントをすばやく見つけられるようにします。
• アクセシビリティをサポートします: 視覚障害や読字困難のあるユーザーがコンテンツをよりよく理解し、ナビゲートするのに役立ちます。
• 視覚的な魅力を高めます: 正しく使用すると、ハイライトはコンテンツをより構造化され、魅力的に見せることができます。

効果的なテキストハイライトのためのベストプラクティス

テキストハイライトが役立つ理由がわかったので、正しい方法で使用することが重要です。

正しく行えば読みやすさとエンゲージメントが向上しますが、使いすぎると逆効果になる可能性があります。

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

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

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

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

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

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

画面にカラーピッカーツールが表示されます。ここから「背景」カラーオプションを選択する必要があります。

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

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

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

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

ハイライトを削除したい場合は、ブロックエディターでハイライトされたテキストを再度選択し、下向き矢印アイコンをクリックして「ハイライト」を選択します。

次に、カラーピッカーから「クリア」オプションを選択します。

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

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

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

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

そのため、市場で最高のWordPressコードスニペットプラグインであるWPCodeの使用をお勧めします。WordPress.orgで300万以上の有効インストールと4.9/5の評価を得ています。

徹底的なテストの結果、テーマファイルを直接編集することなく、ウェブサイトにコードを追加する最も簡単で安全な方法であることがわかりました。これはすべて、スマートコード検証、組み込みのエラー処理、および安全な実行環境によるものです。

詳細については、WPCodeレビューをご覧ください。

ステップ1: WPCodeのインストールと設定

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

ステップ2: カスタムCSSスニペットの作成

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

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

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

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

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

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

ステップ3: カスタムコードの追加

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

mark {
background-color: #ffd4a1;
}

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

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

ステップ 4: 自動挿入を有効にして保存

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

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

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

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

ステップ 5: HTMLビューで投稿を編集

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

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

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

ステップ 6: テキストを<mark>タグで囲む

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

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

<mark>highlighted-text</mark>

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

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

ステップ 7: 投稿を保存して公開

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

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

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

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

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

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

ウェブサイトの魅力的なランディングページを作成するには、SeedProdの使用をお勧めします。これは市場で最高のWordPressランディングページビルダーであり、100万以上のウェブサイトで信頼され、WordPress.orgで一貫して4.9/5つ星の評価を得ています。

SeedProdには、ドラッグアンドドロップビルダー、350以上の既製テンプレート、90以上のブロックが付属しています。

Eコマースストアやマーケティングエージェンシーを含む多くの企業がSeedProdで素晴らしい成果を上げており、リードジェネレーションとコンバージョンが大幅に改善されたと報告されています。

詳細については、SeedProdレビューをご覧ください。

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

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

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

WordPressでのテキストハイライトに関するよくある質問

WordPressでテキストをハイライトする方法について、読者からよく寄せられる質問をいくつかご紹介します。

WordPressでテキストの色を変更するにはどうすればよいですか？

WordPressでは、ブロックエディターを使用してテキストを選択し、ブロックの「文字色」オプションで色設定を調整することで、テキストの色を変更できます。これにより、コーディングなしでコンテンツをすばやくスタイル設定できます。

詳細については、WordPressでテキストの色を変更する方法に関するガイドをご覧ください。

WordPressでHTMLを使用してテキストをハイライトするにはどうすればよいですか？

WordPressでHTMLを使用してテキストをハイライトするには、<mark>タグで囲むか、インラインCSSスタイルを使用します。これにより、ハイライトの外観をより細かく制御できます。

より簡単なオプションをご希望の場合は、WPCodeのようなプラグインを使用して、WordPressダッシュボード内でカスタムCSSスニペットを追加および管理することもできます。

WordPressでテキストをハイライトするために使用されるCtrlキーは何ですか？

WordPressでテキストを直接ハイライトするための特定のCtrlキーショートカットはありません。ハイライトは通常、マウスまたはトラックパッドでテキストを選択して手動で行われます。

ただし、Ctrl + A (MacではCmd + A)を使用して、ブロックまたはエディター内のすべてのテキストを選択できます。これにより、後でハイライトや色の変更などの書式設定を適用しやすくなります。

WordPressでリンクの色を変更するにはどうすればよいですか？

WordPressでリンクの色を変更するには、テーマのカスタマイズ設定またはカスタムCSSを使用します。これにより、ウェブサイトのデザインに合わせてリンクスタイルを一致させ、一貫した外観にすることができます。

手順については、WordPressでリンクの色を変更する方法のチュートリアルをご覧ください。

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

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。