Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress投稿で特定の段落や文章を参照する方法

ブログ投稿にリンクを追加する場合、引用する段落や文章に正確にリンクすることで、ユーザー体験を向上させることができます。これは、学術的な文章や詳細なガイドなど、特定の詳細が重要なコンテンツで特に役立ちます。

このようなリンクは、ユーザーがリンクをクリックしたときに、必要な情報へまっすぐ導いてくれます。このような細部への配慮は、ナビゲーションを向上させ、信頼と信用を築きます。

今回は、WordPressの投稿で特定の段落や文章を参照する方法をご紹介します。これらのステップに従うことで、情報の見せ方を改善し、サイト全体のユーザビリティを高めることができます。

How to Reference a Specific Paragraph or Sentence in WordPress Posts

なぜ投稿の特定の部分を参照するのか?

WordPressブログで新規投稿を作成する際、特定の段落や文章にリンクを張りたい場合があります。

例えば、ジャーナリストは引用の正確な出典を参照する必要があるかもしれない。また、ブロガーは、読者がブログ投稿の特定のセクションに簡単にジャンプできるようにすることができます。

単に長いページにリンクを張っただけでは、読者は情報を見つけにくいかもしれません。適切な段落や文章に誘導し、関連するテキストをハイライトすることで、より良いユーザー体験を提供することができます。

WordPressの投稿で特定の段落や文章にリンクを貼る方法を見てみましょう。ここでは2つの方法を取り上げる。1つ目の方法は自分のブログの投稿日に、2つ目の方法は外部リンクに適しています:

方法1:アンカーリンクを使った投稿の特定部分へのリンク

自分のWordPressサイトの投稿の特定のセクションにリンクする最良の方法は、アンカーリンクを使用することです。この方法では、文章や段落をハイライトすることはできませんが、方法2とは異なり、すべてのウェブブラウザで動作します。

アンカー・リンクは、ID属性でマークされた同じページの特定の場所に読者を即座にジャンプさせます。目次を作るときによく使われます。しかし、アンカーリンクは他の投稿の特定のセクションにリンクすることもできます。

リンクを貼りたいセクションにID属性を追加するには、投稿を編集できる必要があります。しかし、外部サイトが目次などでID属性を使っていることに気づいたら、リンクにも使うことができます。

Anchor Links Rely on HTML Anchor ID Attributes

投稿の特定のセクションのIDがわかったら、それを使ってリンクを張ることができる。以下のようになります:

<a href="#linkedsection">

あるいは、別のウェブページのID属性にリンクしたい場合、リンクは次のようになる:

<a href="https://urltowebpage/#linkedsection">

アンカーリンクの正しい作成方法については、WordPressで簡単にアンカーリンクを追加する方法をステップバイステップでご紹介しています。

方法2:Google Chromeを使ってハイライトされたテキストにリンクする

Google Chromeは、ウェブページにある特定の段落や文章へのリンクを作成することができます。バージョン90でブラウザーに導入されたこの機能は、Link to Text FragmentというChrome拡張機能で初めて利用可能になった。しかし、この拡張機能はもはや必要ありません。

この方法は、ID属性やページのフォーマットに依存しないため、他のサイトへのリンクに有効です。また、リンク先のテキストが自動的にハイライトされます。ただし、作成されるリンクはすべてのウェブブラウザーで機能するわけではありません。

まず、参照したいテキストをハイライトします。その後、テキストを右クリックし、メニューから「Copy Link to Highlight」を選択します。

Choose 'Copy Link to Highlight' From the Menu

ハイライトするリンクの例です。

ご覧のように、ウェブページのURLへのリンクに続き、#:~:という文字、そしてハイライトされたテキストが含まれている:

https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/#:~:text=Anchor%20links%20are%20commonly%20used%20in%20lengthier%20articles%20as%20the%20table%20of%20contents%20which%20allows%20users%20to%20quickly%20jump%20to%20the%20sections%20they%20want%20to%20read.

これらのリンクは、Chrome、Edge、およびバージョン80以上のすべてのChromiumベースのブラウザを含む、互換性のあるすべてのブラウザーで動作します。

Chromeユーザーがハイライトへのリンクをクリックすると、このように表示されます:

Link to a Text Fragment Preview in Chrome

ただし、ハイライトへのリンクはすべてのブラウザーでサポートされているわけではありません。

例えば、現在のところFirefoxやSafariではサポートされていません。リンクは正しいウェブページには飛ぶが、引用部分には飛ばないし、ハイライトも表示されない。

このチュートリアルで、WordPressの投稿で特定の段落や文章を参照する方法を学んでいただければ幸いです。リンクの追加に関連する他の投稿もご覧ください:

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

3件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi says

    found the tip about using Google Chrome’s “Copy Link to Highlight” feature particularly useful
    It reminds me of how Google’s featured snippets work – when you click on a sitelink, it takes you directly to the relevant section and highlights the text. This is a handy way to reference specific parts of an article without having to manually add anchor links. Thanks for sharing these techniques, they’ll definitely come in handy for improving the user experience when linking to content

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。