WordPress5.0(ワードプレス)の使い方【ページ内リンク(ジャンプ)】

暮らし・生活
悩むブログ初心者
悩むブログ初心者

ページ内リンク(ジャンプ)を設定したいな。あれ?アンカーボタンがないぞ?WordPress5.0(ワードプレス)の使い方がわからない!新エディターGutenberg(グーテンベルグ)が使い辛くて困ってるのに、解説しているサイトがまだ少ない…。

私が実際使っていて困ったこと&調べてわかった解決方法を覚書きしておきます。

・プラグイン不要
・「TinyMCE Advanced」は使わない
・HTMLをキー入力しなくて良い
・リスト機能と併用できない
・「見出し」にしか飛ばせない

説明していきますね。

【ページ内リンク(ジャンプ)】の方法

1、リンクを貼る

①ジャンプ元にしたい部分をドラッグした状態で「リンク」ボタンを押す

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

上の例では「#hajimete」にしました。

最初に「#」を付けるのを忘れずに!!

任意の文字は「#123」でも[#a」でも何でも良いです。

※任意の文字はページ内で同じものは使えません。

複数リンクを貼りたい時はそれぞれ違う文字にしてね。

2、アンカー(ジャンプ先)を作る

アンカー、つまり飛んでいく目的地を指定します。

①目的地の見出しを選択し「高度な設定」を開く

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

先ほどの「#hajimete」のうち、「#」を除いた「hajimete」のみを入力します。

「#」を外すのを忘れないように!

3、プレビューで確認

これで完了です!必ずプレビューで飛べるか確認してね。

注意。私はこれで失敗しました

  • こういう
  • リスト
  • には貼れないよ

まずワードプレスの機能でリストを設定して、リストの1行目にリンクを貼ったらジャンプできませんでした。

上のリスト例だと「こういう」部分に貼りたかったんですけど…。

こういう
●リスト
●には貼れるよ

仕方なく段落ブロックで自分で文字を打ち、リストにしました。

まとめ

WordPress5.0の新エディタ「Gutenberg(グーテンベルグ)」は便利です。

使い方さえわかれば凄く簡単に【ページ内ジャンプ】ができます。

従来のエディタとは違って、

・プラグイン不要
・「TinyMCE Advanced」は使わない
・HTMLをキー入力しなくて良い

これはかなり便利ですよね。

頑張って使いこなせるようになりたいです。

今回は以上です。

コメント

タイトルとURLをコピーしました