ブログで記事内アンカーリンクを設定したい!HTMLもね

すでにこのブログの中でも何ヶ所にも設定してある記事内アンカーリンク。
読者の利便性を高めるためにはなくてはならないものです。

ですが、何故だか張り方を忘れてしまうことがあります。

いや、忘れているわけではないのです。そこまでまだボケていません。

私は、わからないことがあるとGoogleで検索してブログなどを参考にしています。そして、アンカーリンクで検索をかけるといつも一番の記事があるのです。

それはとても優しく詳しく解説してくれていて助かりました。

しかし、いつもその通りにしても、どうしてなのか分かりませんが、設定ができません。その原因に飛びます!

原因はわかったのですが、同じように苦労する人もいるかと思い、記事にしました。

あなたの参考になるかどうかはわかりませんが、自分の備忘録のためにも記事としてあげておきます。

WordPress のページ内アンカーリンクの設定方法

まず最初に、私はTinyMCE Advancedというプラグインを導入しています。

プラグインなんて使いたくないっ、それにWord Pressなんて使ってないよって言う場合は、このアンカーリンクで下に飛んでください。

 

このプラグインについては、バズ部で詳しく解説されていますので、まだの方はインストールしてくださいね。

では、TinyMCE Advancedがインストールされているという前提で行きます。

今回は、ここの右の部分、「ここから飛ぶよ」という言葉をクリックすると記事下のリンクに飛ぶように設定します。

クリックして飛ばしたい文字への設定

まず、「ここから飛ぶよ」を選択して、リンクの挿入/編集をクリックします。

編集画面にて、#aと入力します。#の後ろは数字でも良いと言われていますが、なぜか私は数字を入れると設定できません。なので半角アルファベットを入れています。

ちなみに、#a1と入力しても”a”と”a1”は別のものと認識されないようですので注意してください。

 

TinyMCE Advancedで設定する場合には、

一つ目は#a、二つ目は#b、三つ目は#c、とした方が良さそうです。

飛ばす先の文字へ設定

続いて、飛ばす先の設定です。

では、ここまで飛ばしましょう。

【アンカーリンクでここまで飛んできた!!】

上記の部分を選択して、TinyMCE Advancedで表示さているはずのアンカーマークをクリックします。

IDの欄に先ほど入力した#aのアルファベットを入力します。今回は「a」ですね。

これで設定終了です。

下書きを保存して、プレビューで設定できているかどうかを確認しましょう!

 

Wonderful!!

超簡単にできました。

なぜ、いつも失敗するのか、その参考のページに従ったのに???

この記事を書きながら、気づきました!やっと気づきました。

TinyMCE Advancedでアンカーを設定して、上記のID欄に数字を入れていました。

二つ三つアンカーがある場合、『1』、『2』と数字で管理した方が便利だと思ったからです。

ですが、#をはずして、数字だけを入れても、もちろん#1と入力しても、設定できず、上記の警告が出ます。

しかたがないので、アルファベットを#の次に入れると設定できることがわかったので、そうしていました。

そして、しばらくしてそのページを参考にまた設定すると、また数字を入れて???となっていました。(やっぱり少しボケてますかね?)

しかし、よく読むとちゃんと書いてありますよね。

IDは半角英字で始め、と。

人は思い込みの生き物です。

だけど、そのブログには#から始まる半角英数字を設定すると書いてありました。

#abdでも#123でも良いと。

なので私は#1とか#2と入れていたのです。

ですがここにはまず最初に半角英字を入れないといけないのです。

もう一度書きます。半角英字です!半角英数字ではありません!!

半角英字の後は数字を入れても構いませんよ。例えば「#a1」のようにしてもよいということです。

ふ〜〜これで次からは間違うことはない、、、、はず。ボケてなければ。

おまけ:プラグインなんて使いたくないってあなたへ

もし、これ以上プラグインを入れたくないと言うあなたのために、(でも、TinyMCE Advancedはオススメですけどね)

簡単にアンカーを入れる方法があります。

テキストモードでHTMLを直接書いてしまう方法です。

<a id=”1″></a>

 

⇧これをコピーしてテキストモードに貼り付け、</a>の後ろに飛ばしたい文字を入力してください。

このやり方だと、数字だけでもOKです。上記の例では”1”を入れています。

<a id=”1″></a>ここに飛んで来い!

こんな感じで入力します。

” ”の中は適宜数字でも、アルファベットでも入れてください。

以上今回は Word Pressで記事内アンカーリンクの貼り方について書いてみました。
今回の記事が少しでもあなたの役に立てば嬉しいです!