記事ページ内の特定箇所へのリンクを付ける方法〈WordPress〉

WordPressでは記事を作成する際に、記事ページ内の特定の場所や、過去に作成した記事の特定の箇所へのリンクを貼ることができるのですが、初心者のうちはどのようにすれば良いのか分からなかったりします。そこで、今回は、記事ページ内の特定箇所へのリンクを付ける方法についてご紹介します。

アンカー(目印)を設置

記事ページ内の特定の位置へのリンクを付けるには、まずリンクしたい箇所にアンカー(目印)を設置します。

[su_note note_color=”#fef88d”]マンションに例えるなら

サイトドメイン = マンションの住所
カテゴリ    = マンションの階数
記事      = マンションの住居
アンカー    = 住居の中の部屋

アンカーは住居の中のどの部屋なのかを指示するような感じです。[/su_note]

アンカー設置には2つの方法があります。自分の使いやすい方法を選びましょう。

例えば「見出し」という記事のタイトルにアンカーを設置する場合。まず、投稿画面のテキストエディタでタグを確認します。

<h3>見出し</h3>

ここに以下のいずれかの方法でアンカー名を記載します。

<h3><a name="a01">見出し</a></h3>
<h3 id="a01">見出し</h3>

この場合「a01」の部分がアンカー名になります。

アンカー名は半角英数字で付けます。同じページ内の他のアンカーと別の名称であれば好きなように付けられます。(「a01」や「a1」といったようにa+数字を使うことが多いようです)

[su_note note_color=”#fef88d”]先程のマンションの例えなら、もし住居にバスルームが2カ所あった場合、ただ「バスルーム」と表記するだけでは、どちらのバスルームなのか分からないので「バスルーム1」「バスルーム2」のように、どちらか分かるようにアンカー名を付けるイメージです。[/su_note]

アンカーへのリンクを付ける

アンカーを設置したら、アンカーへジャンプさせるためのリンクを張ります。リンク先は「#アンカー名」または「記事ページURL(絶対URL)+#アンカー名」で指定します。(アンカー名の前に#を付けます)

例えば、先程の「見出し」に設置したアンカー「a01」へリンクを付ける場合であればリンク先を次のように指定します。

#a01

または

https://money-affairs.com/page-link/#a01

例えば〇〇○というテキストにアンカー「a01」へリンクを付ける場合であればテキストエディタの表記は

<a href=”#a01”>〇〇〇</a>

または

<a href= ”https://money-affairs.com/page-link/#a01”>〇〇〇</a>

のように、リンクを貼るテキスト(〇〇〇)をaタグで囲み、リンクとしてアンカー名を先頭に「#」を付けて指定します。下側のようにアンカーへのリンク表記を「絶対URL+#アンカー名」とすることで、同じページ内だけでなく、別のページから特定の記事ページの特定の箇所(アンカー)へジャンプさせることができます。

[su_note note_color=”#fef88d”]マンションの例えなら、アンカー名だけはただ「バスルーム」と指示している感じです。これでは住居の中(同じ記事ページ内)にいれば場所は分かりますが、住居の外にいる場合には「バスルーム」といわれても、何階の何号室なのか分かりません。そこで絶対URLで「○○マンション○階○号室のバスルーム」というように表記するイメージです。[/su_note]


記事ページ内の特定箇所へのリンクを付ける方法の紹介は以上です。

 

コメント

タイトルとURLをコピーしました