
悩むブログ初心者
ページ内リンク(ジャンプ)を設定したいな。あれ?アンカーボタンがないぞ?WordPress5.0(ワードプレス)の使い方がわからない!新エディターGutenberg(グーテンベルグ)が使い辛くて困ってるのに、解説しているサイトがまだ少ない…。
私が実際使っていて困ったこと&調べてわかった解決方法を覚書きしておきます。
・プラグイン不要
・「TinyMCE Advanced」は使わない
・HTMLをキー入力しなくて良い
・リスト機能と併用できない
・「見出し」にしか飛ばせない
説明していきますね。
【ページ内リンク(ジャンプ)】の方法
1、リンクを貼る
①ジャンプ元にしたい部分をドラッグした状態で「リンク」ボタンを押す

②「#○○(任意の文字)」と入力

上の例では「#hajimete」にしました。
最初に「#」を付けるのを忘れずに!!
任意の文字は「#123」でも[#a」でも何でも良いです。
※任意の文字はページ内で同じものは使えません。
複数リンクを貼りたい時はそれぞれ違う文字にしてね。
2、アンカー(ジャンプ先)を作る
アンカー、つまり飛んでいく目的地を指定します。
①目的地の見出しを選択し「高度な設定」を開く

②「HTMLアンカー」欄に「○○(任意の文字)」を入力

先ほどの「#hajimete」のうち、「#」を除いた「hajimete」のみを入力します。
「#」を外すのを忘れないように!
3、プレビューで確認
これで完了です!必ずプレビューで飛べるか確認してね。
注意。私はこれで失敗しました
- こういう
- リスト
- には貼れないよ
まずワードプレスの機能でリストを設定して、リストの1行目にリンクを貼ったらジャンプできませんでした。
上のリスト例だと「こういう」部分に貼りたかったんですけど…。
●こういう
●リスト
●には貼れるよ
仕方なく段落ブロックで自分で文字を打ち、リストにしました。
まとめ
WordPress5.0の新エディタ「Gutenberg(グーテンベルグ)」は便利です。
使い方さえわかれば凄く簡単に【ページ内ジャンプ】ができます。
従来のエディタとは違って、
・プラグイン不要
・「TinyMCE Advanced」は使わない
・HTMLをキー入力しなくて良い
これはかなり便利ですよね。
頑張って使いこなせるようになりたいです。
今回は以上です。
コメント