人生を楽しくする「まちゅブログ」はここをクリック

見出しへ飛べるようにページ内リンクとアンカーを設定する方法

スポンサーリンク

みんなの声
同じ記事の中で特定の場所までピョンって飛ばせないのかなー。

 

今回はこのような疑問を解決します。

 

>>本記事でわかること
  • プラグインでページ内リンクを作成する方法
  • HTMLでページ内リンクを作成する方法

 

まちゅ
どうも、まちゅです!

 

まちゅ
この記事では、記事内の見出しに飛べるようにページ内リンクを設定する方法を解説していくよ!

 

「同じ記事内の特定の位置まで飛べるリンクを貼りたい!」って思う時たまにありませんか?

 

実はその悩み、時間もかけず簡単に解決できちゃうのでサクッと紹介していきますね!

 

スポンサーリンク

TinyMCE Advancedでページ内リンクを作成

プラグインで作成

ページ内リンクの作成にプラグインは必須ではありませんが、

 

TinyMCE Advancedのプラグインを有効化している方は簡単にページ内リンクを作れますのでその方法を解説していきますね!

 

TinyMCE Advancedをインストールしていない方はコチラの記事をどうぞ

TinyMCE Advancedでエディターのツールバーの機能を拡張する方法

 

 

テキストにリンク設定する

まずテキストリンクにしたい文字列にリンク設定をします。

 

リンクの挿入

 

URL入力する部分に「 #〇〇 」と入力します。

 

まちゅ
○○の部分は何でもOKです!

 

リンクの詳細設定

 

僕の場合は#abcと入力してみました!

 

まちゅ
#を忘れないように入力しよう!

 

これでテキストのリンク設定は完了です!

 

忘れずに【適用】をクリックして次のステップへいきましょう!

 

リンク先にアンカー設定する

続いてリンクで飛ばしたい場所の設定をします。

 

今回は見出しにアンカー設定をしてみますね!

 

ではリンク先に設定したい部分を選択して、ツールバーのアンカーボタンをクリックしましょう。

 

アンカー設定

 

アンカーIDの入力ができるので今回の場合は、

abc と入力します。

 

アンカーid入力

 

まちゅ
アンカーID入力では、#を入力しないようにしてね!

 

アンカーIDの入力が完了したら【OK】をクリックします。

 

これでページ内リンクとアンカーの設定完了です!

 

お疲れさまでした!

 

まちゅ
めちゃくちゃ簡単だったね!

 

最後にちゃんとページ内リンクが設定できているかクリックして確かめてみてくださいね!

 

HTMLでページ内リンクを作成

HTMLで作成

HTMLでページ内リンクの設定を行う場合は、

 

テキストリンクにしたい文字列に

<a href=”#abc”>文字列</a>

飛ばしたい場所に

<a id=”abc”></a>見出し(飛ばしたい場所)

 

と入力すればOKです!

 

上記の例はアンカーIDを「abc」としていますが何でもOKです!

 

 

試しにページ内リンクをここに作成してみますね!

直前の見出しに移動する

 

まとめ:ページ内リンクとアンカーを設定する方法

まとめ

お疲れさまでした!

 

ページ内リンクを上手く活用することで様々な訪問者ごとに効率の良い記事の構成がつくれます。

 

ある人にとっては記事の特定の部分を読む必要がないという場合などにページ内リンクで効率よく読み進められるようにして記事のユーザビリティを向上させておきましょう!

 

 

それでは今回はこれにて!

 

バイチャ(^^)/

 

スポンサーリンク