アンカーリンクを使うと、ページ内の特定の箇所や、別ページの特定の箇所に移動することが出来ます。この機能を活用すれば読み易く分かり易い記事になります。Cocoonでのアンカーリンクの使い方を説明します。
アンカーリンクとは
アンカーリンク(HTMLリンク)とは、同じページ内や別のページの特定の箇所に、ワンクリックで表示を切り替える事が出来る機能です。
例えば、専門的な用語を使用した記事を作成する時に、用語の説明を並べて記載すれば分かり易い記事になるのですが、あまりにも説明が多くなると、逆に分かり難い記事になります。そのような時に「アンカーリンク」を使用すると、ワンクリックで説明が記載してある箇所に表示を切り替える事で、読み易い記事になります。
リンク元を設定する（リンク先が同じページ内の場合）
アンカーリンクの設定を行います。クリックさせたい部分の設定の事です。まずはWordPress編集画面で、クリックさせたい部分を選択すると、下図の赤枠のようにメニューが表示されます。
メニュー中の右側にあるリンクアイコンをクリックすると設定ウィンドウが表示されるので、矢印の場所に任意のリンク名称を入力します。名称は、「#〇〇〇」のように最初の文字は「#」シャープで始めるというルールがあります。この例では「#anc01」という名称を設定しています。
その他にも以下のルールがあるので、名称を決める時は注意するようにしましょう。
【名称のルール】
・リンク名称の最初の文字は「#」にする
・同じページ内では同じ名称を使用しない
・シャープの直後の文字はアルファベットの文字にする
・「スペース」は使用不可
・大文字と小文字は区別される
リンク先を設定する
次にリンク先を設定します。WordPress編集画面の右側には設定画面を表示させておいてください。
WordPress編集画面でリンク先として設定したい部分をクリックします。その状態で画面の右側に「高度な設定」という部分が表示されているので「高度な設定」をクリックすると「HTMLアンカー」の設定ボックスが表示されます。
この設定ボックスにリンク元と同じ名称を設定します。注意事項としてHTMLアンカーに設定する名称は「#」シャープを除いてリンク元と同じ名称を設定します。この例では「anc01」という名称を設定しています。
以上で設定が完了です。リンク元をクリックすると、リンク先が表示されるようになります。
リンク元を設定する（リンク先が別のページの場合）
リンク先が別のページの場合は、リンク名称に、リンク先のURLを記載する必要があります。事前にリンク先の設定をしておいてください。やり方は先述の方法と同じになります。
例として別ページで、HTMLアンカーが「kabusiki」と設定されている部分へのリンク方法を説明します。
リンク名称は「kabusiki」という事が確認できたので、リンク先ページのURLを確認します。リンク先ページの右側の設定画面のURL部分にページのURLが表示されているので、URLをメモもしくはコピーをしておきましょう。URLが表示されていない場合は、別の何かが選択状態になっているので、ページの空白部分等をクリックしてみるとURLが表示されるようになります。
今回の例での、ページURLは「https://koremo2020.com/money/6937/」
最後にリンク元を設定します。①リンクさせたい部分を選択するとメニューが表示されるので、②リンクアイコンをクリックします。③設定ウィンドウが表示されるのでリンクURLを設定します。今回の場合は「https://koremo2020.com/money/6937/#kabusiki」を設定しています。
これで、別ページへの設定は完了です。