【新エディタGutenbergでのアンカーリンク】ページ内ジャンプや別ページの特定箇所へジャンプさせる方法

Pocket

ワードプレスでのブログやサイトで、

  • 『ページ内でのリンクジャンプ』
  • 『別ページの特定箇所へのリンクジャンプ』

などは、ページ内、サイト内の目次を作るためなどにも必要で、多様してる方も多いと思う。

それは今まではプラグインを使ってやるのが簡単だった。

ですが、

ワードプレスの新エディタ【Gutenberg】では、

プラグインなしでも簡単になっとわぁあああ!

の巻ですw

Gutenbergでアンカーリンク

Photo : @tomocheeee623
Image Processing :REACH_rh

〜〜〜項目〜〜〜〜〜〜〜〜〜〜

❤︎1,HTMLで書くページ内・特定箇所へのジャンプリンク

❤︎2,新エディタ【Gutenberg】でページ内・特定箇所へのジャンプリンク
(アンカーリンクタグを書くだけでできる)

2-1,【Gutenberg】ページ内ジャンプリンク

2-2,【Gutenberg】別ページ特定箇所へのジャンプリンク

〜〜〜〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

❤︎1,HTMLで書くページ内・特定箇所へのジャンプリンク

単純にプラグインなどを使わずに、『HTML』で書く場合どうなるのか?を理解してる方がわかりやすくなるのでまずそこですが、

  • 飛ばしたい先の『絶対URL』(そのページのURL)に、 『アンカータグ』を決めて書きます。

例)アンカータグ#a01
<a href="ページの絶対URL#a01">見出し</a>
  • 『#』は必須で決まり文句みたいなもの
  • 『a01』の部分は自由に自分がわかりやすいものにしていい
    (ただし、同じページ内でかぶってしまわないようにする

なので、

  • 目次1(#a01)
  • 目次1-1(#b1-1)
  • 目次1-2(#b1−2)
  • 目次2(#a02)
  • 目次2-1(#b2-1)
  • 目次2-2(#b2-2)
  • 目次3(#a03)

などにするとわかりやすいのではないでしょうか….

で、そこからジャンプさせて素早く目的の内容に辿り着けるようにするには、

  • ジャンプ先に、上記で決めた『アンカー』を記述する。

例)中見出しh2に飛ばしたい場合で、上記の#a01がアンカータグの場合 ↓
<h2 id="a01">見出し</h2>

これは小見出し h3 とかも同じで、

ジャンプさせるリンクが、↓

<a href="ページの絶対URL#b1-1">見出し</a>

ジャンプ先見出しが↓

<h3 id="b1-1">見出し</h3>

という感じになる。。。

目次作成用のプラグインの方が簡単で楽なのでその方が良かったのですが、初めてページ内ジャンプをさせたいと考えたその時期、それ系のプラグインが更新されていない古いプラグインしかなかったし、『TinyMCE Advanced』でアンカーリンク(ID設定)が簡単にできるって知らなかったんですよね、、、笑

なので仕方なく手動でタグを書いて『AddQuicktag』に入れてやりました笑

当時は完全な初心者で知識も全くなくて理解するのに時間かかって面倒だったのを記憶しています笑

スポンサーリンク

❤︎2,新エディタ【Gutenberg】でページ内・特定箇所へのジャンプリンクの作り方
(アンカーリンクタグを書くだけでできる)

そして新エディタ【Gutenberg】の場合、上記のような記述なし、プラグインなしでも簡単にできるようになっていた笑

『AddQuicktag』も『TinyMCE Advanced』も使えないなら【Gutenberg】の『再利用ブロック』に保存しておいてやるしかないのかなぁって思って保存していたのですが、

よく見ると、この新エディタの右下の方に………………..

『高度な設定>HTMLアンカー』!!!

っていうのがあるではありませんか!

これは『TinyMCE Advanced』のように楽にできちゃうんですよね。。。。。。。

*2-1,【Gutenberg】ページ内ジャンプリンク

例)目次から中見出しへの場合

例えば下図のような場合です

01_目次から本文の見出しへページ内ジャンプ

手順❶、ジャンプさせるアンカーリンクを作る
下図のようにまず範囲を選択 ↓

02_まず範囲を選択

リンクボタンでタグを入力 ↓

03_リンクボタンでタグを入力
04_タグ記入

適応ボタンで確定 ↓

05_適応ボタン

適応ボタンをクリックすると下図にように表示され、『アンカーリンクタグ』ができる。↓

06_確定

手順❷、ジャンプ先の見出しに『アンカー』をつける

見出しブロックはプラスボタン(ブロック追加ボタン)でできる ↓

07_見出しブロック

今回は中見出しなので、『h2』です↓

08_ジャンプ先

手順❸、見出しブロックを選択した状態で、エディタ右下の、『高度な設定』のところに、『HTMLアンカー』というのがあるので、そこに上記で作った『アンカーリンクタグ』の『アンカー』を入力する。↓

09_右下の高度な設定
10_右下の高度な設定-HTMLアンカー

これでOK

飛べるか確認しておきましょううw
たまに確認し忘れた時にかぎって間違ってたりします笑

するとリンク切れになっちゃうので。。。。。

11_目次リンクからページ内見出しにジャンプ

ここで1つ注意点ですが、

ワードプレスにログインしたままだと上部にダッシュボードのバナーがあるので、そこにかぶってちゃんと飛べてない、ピタッと指定した位置に来ないじゃん!!!???なんでじゃあぁああああ!!!???

って思ったりしちゃいますので、違うブラウザや、シークレットモード(プライベートモード)、または、ログアウトした状態で確認が必要です。

そしてスマホとかでも確認してみた方がいいです。

本当に飛べない場合は単なる飛べない豚です。いや、何かコケてるということです笑

スポンサーリンク

*2-2,【Gutenberg】別ページ特定箇所へのジャンプリンク

例)別ページ中見出しへの場合

下図のように、アンカー候補で検索してジャンプ先を指定もできますが、↓

アンカー候補で検索

私は違うページのアンカーはほとんどかぶっていてたくさんページがあり、なんだかよくわかんなくて面倒なので笑、そのジャンプ先をブラウザで一度開いてそのURLをコピぺする方法でやっています。

手順❶、そのジャンプ先をブラウザで開く
例えばその飛ばせたい場所が、下図のように同じくアンカーリンクを作っているページなら簡単です。↓

001_別なページの指定箇所にジャンプさせたい場合

手順❷、開いたら、そのブラウザの検索窓のURLをコピー ↓

002_検索バーのURLをコピー

手順❸、リンクを貼りたい場所に戻ってコピペする ↓

003_リンクをコピペ
004_リンク

これもリンクをクリックしてちゃんとそこに飛べるか確認しておく ↓

005_確認

もしまだアンカーリンクを作ってない特定箇所に飛ばせたい場合は、同じように、飛ばせたい場所へのアンカーリンクタグを作って(そのページの絶対URL#〇〇)ジャンプ先にもアンカー(h2 id=”〇〇”)をつければOK

*ジャンプさせるリンク↓

<a href="ページの絶対URL#a01">見出し</a>

【Gutenberg】ではリンクにしたい箇所を選択して、
#〇〇とする

*ジャンプ先アンカー↓

<h2 id="a01">見出し</h2>

【Gutenberg】ではジャンプ先の見出しに、高度な設定>HTMLアンカー枠でアンカー(上記の例では〇〇の部分)を記述

そんな感じです。

ってことで楽しいクリエイトをば!

しゃらんるあぁあああああ❤︎

\(`^`)b ( ̄v ̄)ゞ

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤色々やり散らかしております、宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

Twitter-REACH_rh Facebook-REACH_rh G+ -REACH_rh Insta-REACH_rh note-REACH_rh

YouTube-REACH_rh SoundCloud-REACH_rh PIXIV-REACH_rh CREATORS BANK_REACH_rh

関連コンテンツ

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

3 × two =