いきなりだけど、Wordpress（サイト作成ツール）のページ内リンク設定ってさ。
サイトコンテンツを作る時、覚えておいて損は無いテクの1つなんだよね。
……って、こういう系の話って、何気にはじめてじゃない？
たしかにな。
だが、それは調べた機能や設定やらのやり方をたびたび忘れてしまう（筆者どのが）という事情がからんでいるようだぞ。
そこでこの際キッチリ覚えてしまうため、私たちのおしゃべりを兼ね、メモ代わりの文でも作成しておこうと……そういうことらしい。
そんなら最初からメモっとけって話だよねー。
つまり「メモすらめんどいし、手順も簡単だからどうせ覚えれるっしょ」ってノリでやってて、結局忘れちゃってるワケだ。
ぐうたらもんのやることだね。
それ言い過ぎだろう。
同じようなことを知りたい者にとっても、有意義な話っぽいから良いんじゃないか？
しかしこういう話題に私はついていけないから、コチョンどのがメインで話を進めていってくれ。
ほいきた。前置き長くてもなんだし、さっそくページ内リンクのやり方ね。
っていっても、とっても簡単だから身構える必要はないよ（筆者は覚えるために少し身構えろ）。
慣れれば一か所設定するのに1分かからないからね。
ちなみにページ内リンク（アンカーリンク）っていうのは、ページ内の特定の箇所から、同じページ内の別な箇所に飛ばすための機能のことだよ！
そういうものってことくらいは、ざっくり覚えとくと良いよ。
……うん、もうすでに分からない。
だよねー。
すげー分かりやすくすると、そうだね……下の「ココからワープ出来るよ」って文字列をクリックかタップしてみて。
「ココからワープ出来るよ」←クリックorタップ！
んぁ？
いったい何をいっている？
ん？
だからページ内リンクさ。
と、いわれても……。
ひょっとして何かやったか？
良いんだよ、今分からなくたって。
さ、あとは肝心のやり方だけね。
……っと、その前に。
？？？
……。
戻ってきたね！
設定すると、こんな風にページ内の別な場所に一瞬で移動できるんだよ！
面白いよねー。
(なにそれ怖い……)
手順（画像付き）
ってなワケで、サイトの別な文（ジルオールインフィニットプラスのレビュー）で設定した時の画像使って説明するよ！（見づらかったらごめんね）
まず、文章内で飛びたいとこ（リンク先）のブロックを選択するんだ。
下画像だと「AGIとDEXも上げとけ」って見出しのとこだね。
次！
右メニューのブロック項目から高度な設定「^」を開いて、HTMLアンカーってのを出す。
んで、そこを選択する。
こっから大事だよ。
選択したHTMLアンカーのとこに、日本語でも英数字でも良いから、先頭だけアルファベットにした任意（何でもいい）のテキストを入力する。
この際、全部アルファベットでも良いよ。
下の例だと「buturi」にしてるね。
画像の説明書きが急に黒字になったな。
細かいこと気にすんな！（緑色だと文にかぶって読みづらくなったから直したんだよね）
とりあえずリンク先の設定はコレで終わり！
次はリンク元の設定ね。
今のリンク先に飛ばせたい箇所（リンク元）を選択して、上のメニューからもリンクを選択する。
下の例だと「（ここでふれています）。」って文字列をリンク元にしようとしてるね。
ココからはもう大詰めだよ。
出てきた入力スペースに、さっきのリンク先のHTMLアンカーに入力した文字「buturi」を再度入力して、先頭に「#」を付けて「#buturi」にする！
最後に「↩」を押して完了！
お、それでどうなる？
話聞いてたのかな……。
今設定したばっかりのとこを、実際の閲覧画面でポンってやると、さっきのリンク先に設定した「AGIとDEXも上げとけ」って文のとこへ一気に移動出来るのさ。
設定したら下みたいにテストしてみて、問題なかったら完璧だよ。
（筆者、わざわざ集中線まで入れてる……）
もし上手くいかなかったら落ち着いて、また最初からやってみれば良いよ。
文字列の半角と全角の不一致とか、意外と単純なことだったりするんだから。
一応、筆者からの注意点を下にまとめてあるけど、ちょっと長いから折りたたみ式にしてるよ。
内容はさっきまでの話よりちょっぴり難しくなるけど、頭の片隅に入れても損はないから、面倒でも一回は目をとおした方が良いかもね。
～ページ内リンク（アンカーリンク）の注意点～
①リンク元（例：#buturi）とリンク先のID（例：id=”buturi”）のテキストは完全一致している必要があります。たとえば、コチョンのいうように半角・全角のちがいなどが、たった1文字あっても機能しません。
× リンク元「#buturi」 → リンク先「ｂuturi」（「ｂ」が全角）
○ リンク元「#buturi」 → リンク先「buturi」（すべて半角）
②「#」は必ず半角記号（#）を使用しましょう。全角の「＃」は使用不可です。
③同じリンク元ID（例：#buturi）はページ内に複数配置しても問題ありません。
ただし、リンク先となるID（例：id=”buturi”）はページ内で1か所だけにしましょう。
同じリンク先IDを複数配置しても、最初に設定した1か所のリンク先（“buturi”）にしかジャンプしません。
また基本的にID名には、半角英数字・ハイフン（-）・アンダースコア（_）を使用した方が楽です（漢字やかなでも機能するのを確認していますが、IDの頭文字を必ずアルファベットにする必要があるため、最初から全て半角英数字のみで設定した方が分かりやすいです）。
まとめ
～ざっくりチャート～
① リンク先にしたい場所を選択
→「ブロック」→「高度な設定」→「HTMLアンカー」に、半角英数字で好きな名前を入力
※最初の文字は必ずアルファベット（a〜z）にすること。
※文字列に日本語は使用しない方が無難。
② リンク元にしたいテキストやボタンを選択
→ 上部のメニューからリンクアイコンをクリック
→ 入力欄に、①で入力した文字の前に「#（半角シャープ）」を付けて入力
（例：「buturi」と入力した場合 → #buturi と入力）
→ リンクを確定すれば設定完了！
該当箇所に一気に飛べれば読む側にとっても便利だし、文メインのコンテンツなら覚えて損は無い機能だからね。
タイトルどおり、慣れたら一か所設定すんのに数十秒～1分くらいで出来るから。誇張じゃなくマジで。
ともあれ、これで物覚えの悪い筆者もちゃんと覚えられたでしょ！
（打ち消し線使うと悪口が余計に際立つな……）
さっきもいったとおり、私にこういう話は分からないから、相づちを打つしかできないが。
ほかの文で充分しゃべってるんだから、たまには読者側になって聞いてるだけってのも良いかもよ。
さて、あと一つ話すことが残ってるね。
?
……。
ほらこんな感じ！
ちなみにここはもう文末なんだよ。
ページ内リンクを設定すれば、こういう風に出来るってことさ！
んで、下の「ココ！」をクリックかタップすると、またさっきの会話（のちょっと下だけど）のとこに戻れるよ！
ココ！←クリックorタップ！
？？？
最初の方でもそうだったが、なんなんだ一体……。
ん、最初の方？
……あっ！
気付いたね？
これぞページ内リンクっ！！
なんと不可思議なっ！
了。
コメント