【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名に「#」は付けません。

これで別記事へ移動する準備が整いました。

以上で解説を終わります。

本記事が読者の疑問を解決する役に立つと幸いです。

最後まで読んで頂きありがとうございました。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容