AFFINGER6

【AFFINGER6】アンカーリンク(ページ内リンク)の設定方法

 

紫水

記事内で任意の場所までジャンプ(リンク)させたい

 

このようなお悩みにお答えします!

この記事でわかること

AFFINGER6(アフィンガー6)のアンカーリンクの設置方法

ブロックエディタ(グーテンベルク)・クラシックエディタ対応

 

アンカーリンク(ページ内リンクやジャンプリンク)を使うことで、一気に記事最下部まで飛ばしたり、途中の大事な内容に飛ばしたりすることができます。

 

例えばこんな感じ

テキストでもボタンでも、クリックすると最下部のまとめに飛ぶようになっています。

まとめにジャンプする


まとめにジャンプする


設定はめちゃくちゃ簡単です!

 

アンカーリンク(ページ内リンク)の作り方

 

ブロックエディタ(グーテンベルク)とクラシック版でそれぞれ解説していきます。

 

ブロックエディタ(グーテンベルク版)

まずはブロックエディタ(グーテンベルク)からみていきましょう。


流れとしてはこんな感じ。

 

  • 移動させたい箇所にいって1クリック
  • 高度な設定>HTMLアンカーを設定
  • 移動元に戻ってリンクを設定
  • 完了


これだけです。

 

実際に画面を見ながら解説していきます。

 

step
1
移動させたい先で1回クリック

 

 



step
2
高度な設定>HTMLアンカーを設定

HTMLアンカーに任意のテキストを入力します。

ここは自分がわかればOKなので適当で大丈夫です。

例:ここではわかりやすいように「もど~る」と設定(ひらがなでも英数字でもOK)

 

 

step
3
移動元のテキストを選択

移動元のテキストに戻って、テキストを選択。

 

step
5
リンクをクリックして、先ほど設定したHTMLアンカーを入力

最初に「#」を付けてください。例:「#もど~る」

 

 

 

ちなみに、テキストでなくボタンを設定することもできます。

 

そのときはボタンをクリックして、右側に出てくる編集画面から

「リンク設定」の「リンク先URL」に入力すればボタンにもアンカーリンクを設定することができます。

 

step
6
完了



これだけで設定完了です♪

 

 

 

クラシックエディタ

 

クラシックエディタの設定方法を解説していきます。


流れとしてはこんな感じ

  • 移動させたい箇所にいって1クリック
  • 挿入>アンカーリンクを設定
  • 移動元に戻ってリンクを設定
  • 完了


ブロックエディタと違うのはアンカーリンク入力画面の出し方のみ!

実際に画面で見ながら解説していきます。


step
1
移動させたい先で1クリック&上部にある挿入>アンカーをクリック

 

HTMLアンカーが入力できるようになるので、任意のテキストを入力する


わかればなんでもOK

step
2
移動元に戻ってテキストを選択&リンクを入力

 

step
3
完了



ずん子

めちゃくちゃ簡単だね!

まとめ

アンカーリンク(ページ内リンク)の設定方法について解説しました。

 

アンカーリンクを設定すると、ユーザーも何回もスクロールせずに目的の場所へいけたりするので、意外とユーザビリティ向上が期待できます。

タイトルに戻る

 

最下部に戻ったり、任意の場所に飛ばしたりといろんな使い方ができますね。

設定も簡単ですので、!

 

  • この記事を書いた人

紫水

ブログ1周年を迎えました!

アニメとガジェット中心の雑記ブログです。アニメ視聴数700作品突破。好きな言葉は「かわいいは正義」「絶対領域」。
自作PCはRyzen5 5600X+RTX2070S使用中。

見て読んで楽しい記事になるように、忖度なしで紹介していきます。

-AFFINGER6
-,