ブロックエディタ(Gutenberg)でアンカーリンク(ページ内リンク)を設定する方法
今回はブロックエディタ(Gutenberg)でアンカーリンクの設定する方法について書きたいと思います。
アンカーリンク？
うん。旧エディタではHTMLで記述してたんだけど…ブロックエディタではどうやって設定すればいいのかなぁ？って思ったから今回書いてみることにした！
アンカーリンクとは？
アンカーリンクとは、「アンカータグ」と呼ばれるHTMLソースを設定し、aタグでアンカータグを設置した場所にジャンプさせるリンクのことです。
特定の場所にジャンプさせることができるのでページ内リンクなどで使われます。
なるほど～！アンカータグをつけた場所にジャンプさせるからアンカーリンクっていうんだね。
アンカーリンクを使えば自分で目次を作ったりすることもできるよ。
ブロックエディタでこのアンカーリンクを設定する方法をHTMLも一緒に紹介します。
ブロックエディタでアンカーリンクを設定する
アンカーリンクを設定する手順は2つです。
- ジャンプさせたい場所にアンカータグ(id属性)をつける
- aタグでリンクを設定する
アンカータグをつける
ではジャンプさせたい場所にアンカータグをつけます。(ここでは見出しにアンカータグをつけます)
ジャンプさせたい見出しを選択する
右側の設定の中の「高度な設定」をクリックする
「高度な設定」の中の「HTMLアンカー」にアンカー名を入力する
アンカー名はお好きな名前を半角英数字でつけてください。
アンカータグはid属性を使用して設定します。HTMLは以下のようになります。
<h3 id="アンカー名">見出し</h3>複数アンカータグをつける場合の注意点
1ページに複数のアンカータグをつける場合は同じアンカー名をつけないでください。必ず一つ一つ違うアンカー名をつけてください。
ジャンプさせるためのリンクを設定する(ページ内リンク)
続いてアンカータグをつけた見出しにジャンプさせるためのリンクを設定します。
リンクを設定するテキストを選択する
ブロックのツールバーの中のリンクアイコンをクリックする
URLを入力する欄に「#」をつけてアンカー名を入力する
入力したら右の矢印をクリックすれば設定完了です。
上記のリンクのーHTMLは以下のようになります。
<a href="#アンカー名">リンクをつけるテキスト</a>上記は同一ページ内に設定したアンカーにジャンプさせる方法です。
ブロックエディタだと簡単に設定できるんだね。
うんうん。簡単だよね～。きらりでもできるんだもんねぇ(笑)
他のページの特定の場所にジャンプさせる
他のページの特定の場所にジャンプさせる場合はジャンプさせるページの見出しなどにアンカー名を設定し、リンクのURL欄にページのURLの後ろに「#アンカー名」を入力してください。
他のページの特定の場所にジャンプさせるリンクのURLは以下のようになります。
<a href="他のページのURL/#アンカー名">リンクをつけるテキスト</a>ページ内リンクで位置がずれる場合の調整方法
ページ内リンクでジャンプした時、表示される位置がずれることがあります。
ジャンプ後の位置はCSSを使えば簡単に調整できます。位置の調整方法については以下のページを参考にしてください。
https://kohimoto.com/labo/study/見出しの少し上にアンカーリン...最後に
今回はアンカーリンクについて書きました。
ページ内リンクを使うとユーザビリティが上がりSEO的に良いといわれています。
アンカーリンクを使って目次などを作成すればユーザーが知りたい項目をすぐに見つけやすくなり、利用しやすくなると思います。
とはいっても1ページずつ目次を作るのはとても大変なのでプラグインやテーマなどに目次機能があるならそれを利用した方が簡単です。
ボクも目次はテーマの昨日におまかせw
アンカーリンクを使ってユーザーが使いやすいサイトを作れるといいですね。
2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。
ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。
