Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
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がわかったら、それを使ってリンクを張ることができる。以下のようになります:

1
<a href="#linkedsection">

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

1
<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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

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.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

2件のコメントLeave a Reply

  1. Dennis Muthomi

    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

    • WPBeginner Support

      You’re welcome!

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.