アンカーリンクを使います
ブログ初心者な私は様々なブロガーさんの記事を読んでは試し試しては戻してと繰り返しています、上手くいかない→他の記事を探して又試す、独学で進めていますが意外と道のりが長く途中で途方にくれたり、解決できない場合はいつまでも留まるのではなく、たまには諦めてその課題を放置したりしてきました。
そこで少しでも皆さんのブログに貢献できるように、自分自身が設定して気づいた事を記事にしていますので、是非参考にしてみてください。
アンカーリンクとは、ホームページ内の指定の場所に移動させる仕組みの事を言います、記事を作成していると前段で説明した箇所に読者を誘導したりする事ができます。何度も同じ説明や文章を書かなくても、ここに書いてあるから先ほど読んだ文章に戻りますよ、又はこの先に詳しい文章があるよと誘導できます。
アンカーリンクの設定方法
例えばアンカーリンクの設定すると同じ文章を作成しなくてもその文章に飛ばしたりできます、アンカーリンクの説明はこちら、このように冒頭の説明文章に飛ぶようにする事ができます、このアンカーリンクはプラグインや難しい設定は不要ですので、是非設定してみて利用してみてください。
１リンクを設定する
・アンカーリンクを設定したい文字を選びます、写真の場合このブログで設定しています、アンカーリンクの説明はこちらを選択して（-）を押してください。
・表示されるURL入力欄に「＃◯◯」（◯◯は任意の文字）、上記で説明すると「＃a2」と入力していきます。
２移動先を指定する
リンクを設定したら、続いて移動先の文章を指定していきます。
編集画面右上の歯車の設定ボタンを押して、設定タブから「高度な設定」を開きます。
移動先の（リンクさせたい文章）ブロックを選択した状態で、設定タブHTMLアンカー部分にリンク元のURLと同じ文字を入力します。
HTMLアンカーに「◯◯」＃を除いたリンク元URLに入力した物と同一の文字を入力、今回私の設定ではa2となります。
これでアンカーリンクが設定されましたので、移動する事が可能になりますので、右上メニューのプレビューから、リンクの動作確認をしてみてください。
設定時の注意点
アンカーリンク設定をするにはいくつかのルールがありますので、もしリンク先に飛ばない事象が発生した時は、下記のTIPSを参照にして見直してみてください。
⭐️URLに任意の文字を入力する際に、文字列のルールを誤ると正しくリンク先に飛びません。
・アンカーリンクに入力する任意の文字は、ページ内で重複が無いように設定する
・任意の文字（大文字・小文字）認識し区別される
・任意の文字に「スペース」は認識できない
・任意の文字の設定には、必ずアルファベットから始まる必要がある
リンクが飛ばない時は・・・
リンクが飛ばない時は、私が実際に無限ループの様に陥ったのが、このミスでした。何度手順通りに設定をしてもリンクが飛ば無い、「なんで？」、「いやなんで飛ば無いの？」、こんな事に最初の頃は陥りました。
結論として判明した事実が、＃と#の違いです。
一見同じように見えますが、全角か半角の違いです。つまりアンカーリンクを設定した際に、アルファベットと数字にばかり注意が行ってしまい、本当はその前にある「#」に気づいていませんでした。ぱっと見は同じにしか見え無いので、他の理由ばかりを調べていたのですが、ここの全角・半角にある日気づいて、半角で設定した所無事に飛ぶようになりました。
もし、リンク飛ば無いなと感じたら、半角にしてみてください。
まとめ
アンカーリンクを設定することで、読者に便利にブログを読んでもらったり、細かい説明はここにあるよと言った感じで設定ができます。また同じページ内に存在する文章で記事の離脱を防ぎ、紹介したい内容にリーチできますので、外に飛ばなくても読者に対し便利に案内できることが可能になります。
うまくアンカーを打てるようになると、滞在時間も伸び良い記事となるでしょう。
最後まで読んでいただきありがとうございます。
