ブログを作ろう(3)ブログ内リンク機能の設定
2023年 5月10日(水)ページの途中にリンクを飛ばしたい!
日記のようなブログを作成しているわけですが、1日分を1ページとすると、ページ数が多くなってしまうので、1ページに何日分か都度加えていくという作りにしています。そうすると、思った場所に行こうとすると、結構面倒くさいと感じるようになりました。そこで、ブログ内に[更新履歴]ページを作って、そこから特定ページの特定位置にリンクを張って飛ばしたい。と思い至りました。
娘のアドバイスを受けつつ、”HTMLアンカー”という機能を使うことにより、可能になったので、そのやり方について記録しておきます。
手順としては
①リンク先のブロックに”HTMLアンカー”を設定する。
②リンク元にリンクを設定する。
です。当初はHTMLのコード書かなきゃいけないかなぁ!と思っていたのですが、WordPressにその機能がビルトインされていたので、結構簡単にできてしまいました。
①リンク先のブロックに”HTMLアンカー”を設定する。
・WordPress編集画面で、飛ばしたい先のブロック(この場合は見出し)にカーソル合わせクリック。
・右側の[ブロック]タブをクリック
・高度な設定の右側の”∨”をクリック。
・HTMLアンカーの入力ウィンドウが現れるので、そこに任意の文字列を入力。アンカーを複数設定する場合は、文字列は重複しない。(私の場合は基本的にYYYYMMDDとしました。)
以上です。
②リンク元にリンクを設定する。
・WordPress編集画面で、飛ばしたい元のブロック(この場合は段落)にカーソル合わせクリック。
・リンクボタンをクリック、URLに飛ばしたい先のURLとアンカーを入力。
この時、URLの末尾の”/”を”#”に置き換えてアンカー文字列を入力。ページのURLは”https://owl1963.com/rose_005/”ですので、”https://owl1963.com/rose_005#20230505”と入力します。
・段落文字列の右側に入力文字列が青色で表示されます。このままでも機能しますが、もう一回リングをクリック、編集ボタン(ペン)をクリックすると下図のような編集ウィンドウが表示されますので、TEXTに任意の文字列を入力します。(この場合は、「こちらへどうぞ」。すると、見出し文字列の右側に入力テキストが表示される。
以上です。
留意点として、リンクをクリックしても、うまく飛んでくれない場合があります。そのときはリンク先画面(上図)を「更新」してみてください。(右上青ボタン。)
以上、ページの任意の部分にリンクを飛ばせる方法についてでした。このアンカー付きURLをSNSにリンク張ってもうまく機能します。
ご参考になれば幸いです。