how-to-create-link-same-page

ワードプレス

【WordPress】ページ内リンク(アンカー)の設定方法

 

孫(マ-ゴ)
どうもマーゴです。

 

WordPressでブログの記事を作ってる時に、目次をクリックしたら、クリックした見出しの内容のところに移動していきますよね?

アフィリエイトで成果を出すなら一択「AFFINGER5の特徴」はこちら

 

あれが、アンカーポイントとページ内リンクを設定しているとできるようになるんです。

 

 

最近では目次でよく利用されています。

下↓をクリックしても下まで移動できます。

無限の彼方へさぁ行くぞぉー!

試しにクリックしてみてください。(行った先に戻るリンクも用意してますので)

 

孫(マ-ゴ)
戻ってきましたか??

 

それでは早速解説していきます。

必要な作業はたったの2ステップです。

慣れたら10秒くらいでできます!(ホントです)

 

step
1
リンクを設定する

step
2
アンカーを設定する

 

その前に、

「TinyMCE Advanced」という神プラグイン(無料)をインストールおすすめします。

 

記事を作成するための様々な便利機能が記事作成画面(エディタ)に追加できます。

 

おすすめ
TinyMCE Advanced setup
TinyMCE Advanced の設定方法とおすすめ機能紹介

        読まれるには、”読みやすい”が大前提   マーフィーどうもマーフィーです。 ブログの肝はコンテンツ(記事)です。 読み手の役に立つコン ...

続きを見る

ワードプレス上級者も推奨も使用しているのでぜひインストールしてください。

 

もちろんプラグインなしでも可能ですが、HTMLを編集できます。

 

リンクを設定する

百聞は一見にしかず。

 

まずは、

  1. クリックしてもらう文章を選択します。
  2. そのままリンクボタンをクリック
  3. ページ内リンクをさせるため「リンク文字列」に合言葉を決め、入力しましょう。

 

※ その他の項目、「タイトル」「Rel」「リンクターゲット」は今回のページ内リンクでは使いません。

 

合言葉の注意点

1. 必ず半角シャープ「#」を先頭につけてください。

2.半角英数字しか使用できません。

3.複数ページ内リンクを利用する場合は異なる名前をつけてください。

 

アンカーを設定する

 

アンカーは、先程紹介した「TinyMCE Advanced」にあるアンカーボタンを使います。

アンカーは、移動先につける印みたいなものですね。

  1. 移動先の場所にカーソルを合わせます。
  2. アンカーボタンをクリック
  3. 先程入力した合言葉を「#」を省いて入力します。
  4. >>「AFFINGER5公式」はこちら

 

ココに注意

 1. アンカーには「#」を入力しないでください。

 

「TinyMCE Advanced」を使用していない人は、テキストエディタに切り替えて、移動したい先の場所に

<a id="bazz"></a>を入力してください。

この例では bazz の部分がIDとなっています。

以上で設定は完了です!

おまけ

リンクを設定するときはショートカットキー ⌘+k(WindowsはCtrl+k) を使うとより早いですよ!

 

孫(マ-ゴ)
簡単でしょ??

 

まとめ

読みたいページに移動できるのは読者にも優しいですよね。

読まれるコンテンツにするためにもぜひページ内リンクを活用してみてください。

>>「AFFINGER5公式」はこちら

 

ようこそアンドロメダ星雲へ

ここから戻る

 

-ワードプレス
-,

Copyright© マゴノテック , 2024 All Rights Reserved.