WordPressで記事を作成していると、丁寧に説明しすぎて知っている人には不要な解説を書いてしまい不必要な人には読み飛ばして欲しいなんてことがよくあります。
またこの解説は別ページのここを参照して欲しいなんてこともよくあります。
このエントリーでは同一ページ内の特定の場所へ飛ばすリンク、別ページの特定の場所へ飛ばすリンクの貼り方を解説します。
プラグイン『TinyMCE Advanced』を使用する。
WordPressを使用している方なら大抵の方は利用していると思われるので、『TinyMCE Advanced』を使用した方法を解説します。
『TinyMCE Advanced』を既にインストールしている方はこちらをクリック
『TinyMCE Advanced』は今回やろうとしているリンクの他にもHTMLを直打ちすることなく表を挿入できたり、Youtubeの動画を挿入できたりビジュアルエディターをカスタマイズすることもできて何かと便利なので、まだ『TinyMCE Advanced』を使っていない方はこの機会にインストールすることをおすすめします。
プラグインのインストール方法はこちら
ここから先は『TinyMCE Advanced』がすでに使える状態になっている前提で話を進めます。
同一ページ内の特定の場所へ移動するリンク
まずは同じページ内の特定の位置へジャンプさせるリンクの貼り方を解説します。他のページの特定の場所へ飛ばす場合も手順はほぼ同じなのでとりあえず読んでみてください。
アンカーを作成
ジャンプさせたいゴール地点へカーソルを移動させます。次にメニューに有るリボンアイコンをクリックしてください。リボンのアイコンがない場合は『TinyMCE Advanced』の設定で表示するように設定してください。
するとアンカーIDを入力できるようになるのでIDを入力します。
IDはユニークなものであれば何でも構いません。同じIDがあるとうまく動作しなくなるのでIDかぶりだけは気をつけてください。
OKを押すと選択したテキストの先頭に錨マークが付きます。
これでアンカーの設置は完了です。
アンカーへリンクを張る
続いてスタート地点にあるテキストや画像、ボタンなどからゴール地点のアンカーへリンクを張ります。
先ほど作成したアンカーIDの先頭に『#』を付けて『#abc』とだけリンク先を指定します。
これで同一ページ内の特定の場所へ飛ばすリンクが作成できました。
別ページの特定の場所へ移動するリンク
別ページの特定の場所へ飛ばす場合もアンカーの作成までは同じですがリンクの張り方がちょっと違います。
『飛ばしたいページのURL』+『#abc』
先程の例で言えば
このようにリンク先を指定します。
これで他のページの特定の位置へ飛ばせるリンクの完成です。
まとめ
プラグイン『Table of Contents Plus』（TOC）などでブログに目次を付けているなら目次からURLを拾って貼り付けてしまえばその見出しへ飛ばすこともできますが、見出し以外へ飛ばすことはできないので見出し以外の場所へ飛ばしたい場合は今回の方法が有効です。（TOCをアンインストールしてしまうとリンクも使えなくなるので目次から拾うのはあまりおすすめしません）
『TinyMCE Advanced』を使わなくても
<a id=”abc”></a>
こんな感じでアンカーを作成してやれば同じことができますが、手打ちが面倒なので『TinyMCE Advanced』を私は使っています。
なお同一ページ内であっても絶対パスを指定した方が後々便利なので同一ページ内であっても絶対パスで指定することをおすすめします（トップページや記事一覧に抜粋付きで記事を並べたりすると同じページに同じURLが存在してしまう可能性があるのでこれを避けるため。）。
コメント