wordpress PR

wordpressのアンカーリンクで間違えやすいこと

ワードプレス アンカーリンク
記事内に商品プロモーションを含む場合があります

 

 

じぇいかわさき
じぇいかわさき
どうもじぇいかわさきです。

 

スポンサーリンク

wordpressを使用しブログを書いているとき、目次のように関連文字にページ内リンクを使用すること有りますよね。

この場合、通常のリンク設定では無くアンカーリンクを使用すると思います。

今回、自分が経験したこのアンカーリンクを設定してもアンカーリンクが効かなかった間違いを紹介します。

結論

wordpressの場合、見出しタグにアンカーリンクを使用できない。回避策は見出しタグとアンカーリンクを分ける事。

 

アンカーリンクってなんだ?

まず最初に、アンカーリンクって何だ?って事の説明をします。

アンカーリンクは、主にページ内などで説明用語などに使用されるリンクですね。

 

例えば、XXXと言う言葉の説明を別の場所で説明したいとき等に使用します。

アンカーリンクというように、他のサイトやページにジャンプするリンク機能と同じなんですが、通常のリンクとは若干記述が異なっています。

 

一般的には以下のように説明されることが多いようです。

aタグ(アンカーリンク)とはHTMLに記述するタグ種類のことで、主にWebサイトのページ間にリンクを作るときに使用されます。aタグにはhrefを用いますが、リンク文字の先頭に#を付ける特徴が有ります。
一般的には「アンカーリンク」と呼ばれますが、「アンカータグ」や「リンクタグ」とも呼ばれることがあり、意味は全て同じです。

 

アンカーリンク

簡単に説明するとこんな感じです。

スポンサーリンク



 

あまり良い使い方では無いかもしれませんが、同一ページ内であっちに行ったりこっちに来たりと簡単に実現する方法ですね。

また、別ページの中にアンカーリンクを付ければ、一般的なリンクのように別ページにジャンプするのではなく、より具体的な位置にジャンプすることが可能となります。

 

 

記述方法も至って簡単

例えば、例のようにXXXと言う文字をクリックすると別の説明分にジャンプする場合配下のようになります。

XXX

△△△△△△△△△△△△△△△△△△△△△△△△
△△△△△△△△△△△△△△△△△△△△△△△△

XXXの説明

○○○○○○○○○○○○○○○○○○○○○○○○

まずXXXの説明という部分がアンカーリンクを設定する場所になります。

XXXの説明にアンカーリンクを設定するには、”XXXの説明”の部分を選択し、メニューの挿入からアンカーを選びます。

アンカー設定

 

アンカーを選択すると、アンカーIDを入力する画面に変わるのでここでXXXを入力します。

アンカー設定2

OKを押せばアンカーリンクの設定が完了し、”XXXの説明”の先頭に錨ののマークが追加されるはずです。

 

設定完了

スポンサーリンク



 

次に、アンカーリンクにジャンプするためのリンク指定の設定を行います。

まずリンクさせたい”XXX”を選択し、リンクボタンを押します。

リンク設定

 

リンクを記述するウィンドウに、先程設定したアンカーリンクのIDを記述します。

リンク設定2

ここで注意するのは、XXXの前に#を追加することです。この#がアンカーリンクであると言うマークになります。

 

適用ボタンを押すと、アンカーリンクの設定が完了になります。ビジュアル上はアンダーラインが入ったリンク設定だなと言う事しか分かりません。

しかし、ソースを見ると以下のようになっていることが分かります。

設定完了

 

このように

  1. <a href = "△△△"></a>
  2. <a id = "△△△"></a>

の2つがペアとなるのがアンカーリンクなので、完了後に必ず両方が対になっているかを確認します。

 

自分が落ちた問題

それでは、一体このアンカーリンクでどんな問題に自分は落ちたでしょうか。

簡単に言えば、アンカーリンクを設定したのですが全く機能しないと言うことなんです。

もちろん、記述内容は間違っておりませんよ。

 

自分が実際に行った記述はこんな感じでした。

 

見出し2

  • 見出し3-1
  • 見出し3-2
  • 見出し3-3
  • 見出し3-4

見出し3-1

 AAAAA
 BBBBB
 CCCCC

見出し3-2

 DDDDD
 12345
 678910

と言う具合に、見出し2の中に記述された項目を選択すると見出し3にジャンプする使用で記述しました。

 

コード的にはこんな感じですね。

<h2>見出し2</h2>
 <ul>
   <li><a href="#AAAAA">見出し3-1</a></li>
   <li><a href="#BBBBB">見出し3-2</a></li>
   <li><a href="#CCCCC">見出し3-3</a></li>
   <li><a href="#DDDDD">見出し3-4</a></li>
 </ul>
<h3><a id="AAAAA"></a>見出し3-1</h3>
 <ul>
   <li>あああああ</li>
   <li>いいいいい</li>
   <li>ううううう</li>
 </ul>
<h3><a id="BBBBB"></a>見出し3-2</h3>
 <ul>
   <li>えええええ</li>
   <li>おおおおお</li>
   <li>かかかかか</li>
 </ul>

赤と赤がアンカーリンクペア、青と青がアンカーリンクペアです。

一旦的なHTMLの記述ではこのように記述して問題ありません。

 

しかし、この設定では見出し2の中の見出し3項目を選択しても、リンクは見出し3にジャンプしないのです。

全くウンともスンとも言わないんですよ。

 

ここで有ることに気がつきました。

それは……

 

 

 

 

wordpressの場合、テーマ固有の機能やプラグインを利用して、h2やh3等のタグを使いページの目次を自動的に設定する機能があります

つまり、h3にアンカーリンク設定をしても目次機能が優先されるので、設定したアンカーリンクは機能せずに目次機能のタグに上書きされてしまい動作しない。

 

我に返ってじっくり考えてみれば、当たり前と言えば当たり前のことだったのです。

 

 

動作しない理由

目次機能を有効にしている場合には、h2、h3等の見出しにはアンカーリンクは設定しても機能しない。

 

 

見出しにどうしてもアンカーリンクを使用する方法

しかし、実際問題見出しにアンカーリンクを付けたいケースは多々発生すると思います。

そうした場合、目次機能を停止するのはスマートな方法では無く、目次を無くすことでユーザーの利便性を損なう事になります。

それではどうしたらよいか?

 

考える

落ち着いて考えてみれば、以外と簡単に分かることでした。

スポンサーリンク



 

このように、h3タグで囲われた中にアンカーリンクのタグを埋め込むと、h3タグを目次が優先に使用してしまうと言うのが原因だと分かりました。

<h3><a id="AAAAA"></a>見出し3-1</h3>

つまり<h3></h3>の間にはアンカーリンクを入れられないと言う事ですが、目的はh3で記述された見出しの部分そのものにリンクしなくても良いと言う事ですね。

 

つまり解決策は至ってシンプルに、見出しタグとアンカーリンクダグを分けてしまえば良いと言う事です。

つまり参考にコードを書くと以下になります。

 

<h3><a id="AAAAA"></a>見出し3-1</h3>
           ↓

<a id="AAAAA"></a>
<h3>見出し3-1</h3>

このようにすれば、h3タグは目次で使用されますが、h3タグの前に記述したアンカーリンクタグにより、見出し3-1にジャンプしてくることができるようになります。

 

 

まとめ

普段何気なく使っていたアンカーリンクでしたが、wordpressの場合には見出しには使用できないと言うことが分かりました。

たまたまページの見直しをしていて、プレビュー画面からチェックをしているときにリンクが機能していないことに気がついたのがきっかけでした。

 

今までHTMLでコードを書いてサイトを作っているときにはこんな問題は発生しませんでした。

しかし、wordpressの場合には動作しないんです。

これはリンクチェックを掛けても全く見つかりませんが、機能しないという状況になります。

誠に厄介な問題ですね。

 

しかし、今回wordpressの機能を再調査し、その特性から対応策を考えて簡単に解決することができました。

 

今回の教訓としては、記事を書いたら記述確認だけではなく、プレビュー画面で実際のリンクや見え方を確認することの重要性を痛感しました。

こういう小さな事が、サイト品質という結果として表れて来ると思います。

テキストだけの記事でも、プレビューでの確認を習慣化したいと思います。

 

Loading

ABOUT ME
じぇいかわさき
進撃の社畜/弱小プロブロガー 本ブログは、還暦で定年の世代の筆者が、まだまだやれるという事を証明するために新たな事に挑戦した事を情報発信しているブログです。同世代の人達に対して、まだまだいろいろと頑張れる、第二の人生を楽しく生きていく為に現状維持は退化、失敗の反対は行動しないことを座右の銘とし、思い立ったことにチャレンジした記録です。また、せっかく稼いだ収益を騙し取られないように、毎日来る迷惑メールなどのネットリテラシーについても情報発信をしています。 このブログは ネットリテラシー ブログ 働くこと について書いており、第二の人生で頑張る同世代の心に刺さる記事を目指してます。人生100年、まだまだがんばれます。 >> Twitterをフォローする