高度な設定からHTMLアンカーを設定することにより、以下のことが可能となります。
- 同ベージ内の任意の場所にスクロールで移動できる
- 別ページの任意の場所に直接リンクできる
同ページは目次のような使い方ができますし、別ページは「あっちの記事に詳しく書いてあるから見てね」っていうような誘導ができるので、非常に便利ですね。
では早速やり方を見ていきましょう。
同ベージ内の任意の場所にスクロールで移動する
参考までに、↓のリンクをクリックすると、
同ページ内の別ページの任意の場所に直接リンクするの見出しまでスクロールします。
設定方法
右側ブロック欄の一番下に、[高度な設定]→[HTMLアンカー]があります。
このHTMLアンカーに、文字(ID)を入力するのですが、このIDは、数字でもアルファベットでも漢字でも何でも構いません。自分のわかりやすい文字で使用可能です。
![SWELLでページ内移動する設定](https://swift-smooth.com/wp-content/uploads/2022/05/91876cf92a3a5c980b4f2e3f031a7881-1024x508.png)
テキスト以外にも画像やボタンなどリンクが設定できるものなら使用できますが、やり方は共通です。
テキストなどを選択してリンク設定を開き、「#」を入力した後に「ID名」を入力するだけです。
STEP2−①
![SWELLでページ内移動する設定](https://swift-smooth.com/wp-content/uploads/2022/05/f237e347f64f7a8e12f5586cc2cad236-1024x508.png)
STEP2−②
![SWELLでページ内移動する設定](https://swift-smooth.com/wp-content/uploads/2022/05/57c012c64a157405abf204e44cb8cd24-1024x508.png)
STEP2−③
![SWELLでページ内移動する設定](https://swift-smooth.com/wp-content/uploads/2022/05/3e09a337a863bd4af4d028e26f81fc3e-1024x508.png)
下書き保存してから投稿を表示します。
クリックして動作確認できれば完了です。
別ページの任意の場所に直接リンクする
参考までに、↓のリンクをクリックすると、
別ページの【SWELL操作】固有機能の使い方の高度な設定の見出しにリンクし、新しいタブで開きます。
新しいタブで開く・開かないは設定により変更できます。
設定方法
右側ブロック欄の一番下に、[高度な設定]→[HTMLアンカー]があります。
このHTMLアンカーに、文字(ID)を入力するのですが、数字でもアルファベットでも漢字でも何でも構いません。自分のわかりやすい文字で使用可能です。
![SWELLで別の記事の特定の場所にリンクする設定](https://swift-smooth.com/wp-content/uploads/2022/05/91876cf92a3a5c980b4f2e3f031a7881-1024x508.png)
テキスト以外にも画像やボタンなどリンクが設定できるものなら使用できますが、やり方は共通です。
テキストなどを選択してリンク設定を開き、
「移動したいページのURL」と入力した後、「#」と「ID名」を入力するだけです。
STEP2−①
![SWELLで別の記事の特定の場所にリンクする方法](https://swift-smooth.com/wp-content/uploads/2022/05/f237e347f64f7a8e12f5586cc2cad236-1024x508.png)
STEP2−①
![SWELLで別の記事の特定の場所にリンクする設定](https://swift-smooth.com/wp-content/uploads/2022/05/c10834f0ec03bad616efd817b6153ac3-1024x508.png)
STEP2−③
![SWELLで別の記事の特定の場所にリンクする設定方法](https://swift-smooth.com/wp-content/uploads/2022/05/5cfbd61495511954ec88ab212f4c76ae-1024x508.png)
下書き保存してから投稿を表示します。
クリックして動作確認できれば完了です。
両者の設定方法の違い
ステップ1は、IDの設定箇所が同ページが別ページによる違いのみで、操作方法自体は一緒です。
ステップ2は、「#ID」か「URL#ID」の違いで、操作方法自体は一緒です。
ステップ3は、両者共通です。
画像やボタンにも設定可能
下の画像をクリックすると、【同ベージ内の任意の場所にスクロールで移動する】の見出しに戻ります。
下のボタンをクリックすると【別ページの任意の場所に直接リンクする】の見出しに戻ります。
当サイトは有料プラグインSWELLを使用しています。
![](https://image.moshimo.com/af-img/3130/000000053838.jpg)