wordpressを使用しブログを書いているとき、目次のように関連文字にページ内リンクを使用すること有りますよね。
この場合、通常のリンク設定では無くアンカーリンクを使用すると思います。
今回、自分が経験したこのアンカーリンクを設定してもアンカーリンクが効かなかった間違いを紹介します。
wordpressの場合、見出しタグにアンカーリンクを使用できない。回避策は見出しタグとアンカーリンクを分ける事。
アンカーリンクってなんだ？
まず最初に、アンカーリンクって何だ？って事の説明をします。
アンカーリンクは、主にページ内などで説明用語などに使用されるリンクですね。
例えば、XXXと言う言葉の説明を別の場所で説明したいとき等に使用します。
アンカーリンクというように、他のサイトやページにジャンプするリンク機能と同じなんですが、通常のリンクとは若干記述が異なっています。
一般的には以下のように説明されることが多いようです。
aタグ(アンカーリンク)とはHTMLに記述するタグ種類のことで、主にWebサイトのページ間にリンクを作るときに使用されます。aタグにはhrefを用いますが、リンク文字の先頭に#を付ける特徴が有ります。
一般的には「アンカーリンク」と呼ばれますが、「アンカータグ」や「リンクタグ」とも呼ばれることがあり、意味は全て同じです。
簡単に説明するとこんな感じです。
あまり良い使い方では無いかもしれませんが、同一ページ内であっちに行ったりこっちに来たりと簡単に実現する方法ですね。
また、別ページの中にアンカーリンクを付ければ、一般的なリンクのように別ページにジャンプするのではなく、より具体的な位置にジャンプすることが可能となります。
記述方法も至って簡単
例えば、例のようにXXXと言う文字をクリックすると別の説明分にジャンプする場合配下のようになります。
△△△△△△△△△△△△△△△△△△△△△△△△
△△△△△△△△△△△△△△△△△△△△△△△△
○○○○○○○○○○○○○○○○○○○○○○○○
まずXXXの説明という部分がアンカーリンクを設定する場所になります。
XXXの説明にアンカーリンクを設定するには、”XXXの説明”の部分を選択し、メニューの挿入からアンカーを選びます。
アンカーを選択すると、アンカーIDを入力する画面に変わるのでここでXXXを入力します。
OKを押せばアンカーリンクの設定が完了し、”XXXの説明”の先頭に錨ののマークが追加されるはずです。
次に、アンカーリンクにジャンプするためのリンク指定の設定を行います。
まずリンクさせたい”XXX”を選択し、リンクボタンを押します。
リンクを記述するウィンドウに、先程設定したアンカーリンクのIDを記述します。
ここで注意するのは、XXXの前に#を追加することです。この#がアンカーリンクであると言うマークになります。
適用ボタンを押すと、アンカーリンクの設定が完了になります。ビジュアル上はアンダーラインが入ったリンク設定だなと言う事しか分かりません。
しかし、ソースを見ると以下のようになっていることが分かります。
このように
<a href = "△△△"></a><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にアンカーリンク設定をしても目次機能が優先されるので、設定したアンカーリンクは機能せずに目次機能のタグに上書きされてしまい動作しない。
我に返ってじっくり考えてみれば、当たり前と言えば当たり前のことだったのです。
目次機能を有効にしている場合には、ｈ2、ｈ3等の見出しにはアンカーリンクは設定しても機能しない。
見出しにどうしてもアンカーリンクを使用する方法
しかし、実際問題見出しにアンカーリンクを付けたいケースは多々発生すると思います。
そうした場合、目次機能を停止するのはスマートな方法では無く、目次を無くすことでユーザーの利便性を損なう事になります。
それではどうしたらよいか？
落ち着いて考えてみれば、以外と簡単に分かることでした。
このように、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の機能を再調査し、その特性から対応策を考えて簡単に解決することができました。
今回の教訓としては、記事を書いたら記述確認だけではなく、プレビュー画面で実際のリンクや見え方を確認することの重要性を痛感しました。
こういう小さな事が、サイト品質という結果として表れて来ると思います。
テキストだけの記事でも、プレビューでの確認を習慣化したいと思います。
