悩む人ページ内リンクをブロックエディタで作りたいんだけど方法が分からないので教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- ページ内リンクをブロックエディタで作る方法
- 【おまけ】別記事へのリンクをブロックエディタで作る方法
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
【SWELL】ページ内リンクをブロックエディタで作る方法
以下の順で解説していきます。
- ページ内リンクをブロックエディタで作る
- 【おまけ】別記事へのリンクをブロックエディタで作る
ページ内リンクをブロックエディタで作る
以下の手順で解説していきます。
- 手順⓪：ページ内リンクの場面を動画でご覧ください。
- 手順①：リンク元のテキストを全選択します。
- 手順②：「（リンク）」を選択します。
- 手順③：「検索またはURLを入力」にid名を入力します。
- 手順④：「↩︎（Enter）」をクリックするとリンクへと変わります。
- 手順⑤：リンク先に指定したいブロックを選択します。
- 手順⑥：「高度な設定」を開きHTMLアンカーにid名を入力します。
手順⓪：ページ内リンクの場面を動画でご覧ください
手順①〜手順⑥を参考にすることで、動画のようなページ内リンクを作ることができるようになります。
手順①：リンク元のテキストを全選択します
手順②：「（リンク）」を選択します
手順③：「検索またはURLを入力」にid名を入力します
＃は必須ですが、anchor-linkでなくてもOKです。
手順④：「↩︎（Enter）」をクリックするとリンクへと変わります
手順⑤：リンク先となるブロックを選択します
手順⑥：「高度な設定」を開きHTMLアンカーにid名を入力します
※HTMLアンカーに入力するid名に「#」は付けません。
これでページ内リンクの準備が整いました。
【おまけ】別記事へのリンクをブロックエディタを作る
以下の手順で解説していきます。
- 手順⓪：別記事へ移動する場面を動画でご覧ください。
- 手順①：リンク元のテキストを全選択します。
- 手順②：「（リンク）」を選択します。
- 手順③：「検索またはURLを入力」に記事URL/id名を入力します。
- 手順④：「↩︎（Enter）」をクリックするとリンクへと変わります。
- 手順⑤：リンク先に指定したいブロックを選択します。
- 手順⑥：「高度な設定」を開きHTMLアンカーにid名を入力します。
手順⓪：別記事へ移動する場面を動画でご覧ください
手順①〜手順⑥を参考にすることで、動画のような別記事へ移動させることができるようになります。
手順①：リンク元のテキストを全選択します
全選択した内容に近いことが書かれた記事へと移動するようにしていきます。
手順②：「（リンク）」を選択します
手順③：「検索またはURLを入力」に記事URL/id名を入力します
- 記事URL：
https://hrdyuic.com/swell-plugin/ - id名：
#anchor-link
今回は以下の記事へと移動させたかったので「検索またはURLを入力」には、https://hrdyuic.com/swell-plugin/#anchor-linkと入力しました。
手順④：「↩︎（Enter）」をクリックするとリンクへと変わります
手順⑤：リンク先に指定したいブロックを選択します
赤線の一文がリンク元の内容と近いため、このブロックへ移動するようにしました。
手順⑥：「高度な設定」を開きHTMLアンカーにid名を入力します
※HTMLアンカーに入力するid名に「#」は付けません。
これで別記事へ移動する準備が整いました。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
今回は以上です。