こんにちは。なめろうです。
WordPressdで記事を作っていると、ページ内や他のページの特定の記事に飛ぶ（ジャンプ）設定をしたくなってきますよね。そこで今回は超初心者目線で簡単に特定の記事にジャンプリンクを設定できる方法をお伝えします。
リンクとアンカーで特定の場所にジャンプする方法
WordPressは、「リンク」と「アンカー」を設定するだけの２ステップで、同じページ内や別のページの特定の場所にジャンプできます！
① クリックするテキストに「リンク」を設定する
②ジャンプしたい先に「アンカー」を設定する
同じページ内の特定の場所にジャンプする
こちらでは、指定したテキスト（画像もOK）をクリックしたら同じページ内の特定の場所にジャンプする、そんなページ内リンクを超簡単に設定できる方法をお伝えしていきます。
①クリックするテキストに「リンク」を設定
まずはクリックするテキストにリンクを設定しましょう。
テキストをドラッグして指定したら（ここではヨシケイの文字を指定します）、「リンクの挿入/編集」ボタンを押します。
テキストにリンク窓が出てきますので、そこに＃と任意の文字を入れます。
任意の文字なので適当に「＃a」と入れます。文字は「#abc」でも「#123」など何でも構いません。
入れる文字は何でも大丈夫ですが、必ず文字の前に＃をいれてください。例えば「＃a」や「#ｂ」など。
注意したいのは、
ということです。
#も忘れないでつけてください。
②ジャンプしたい先に「アンカー」を設定
続いてはページ内のジャンプしたい先にアンカー設定をします。
先程のリンクをクリックしたらここにジャンプしますよ～っていうジャンプ先の設定です。
TinyMCE Advancedを使っている方
ジャンプしたい先をドラッグで選択して、アンカーボタンをクリックします。
クリックするとこのようなリンク窓が出てきますので、そこに先ほどリンクに入力した「a」をここに入れます。
このとき、#は不要ですので入れないようにしてください。
これでさきほど①で設定したヨシケイの文字をクリックすると、ジャンプするようになります。
TinyMCE Advancedを使っていない方
TinyMCE Advancedをインストールしていない方はテキストエディタから、下記のようにHTMLを記入してください。
<a id="a"></a>ヨシケイ
“a”の箇所が先程設定した任意の英数字です。設定した任意の英数字に合わせて変更してください。
別のページ内の特定の場所にジャンプする
こちらでは、指定したテキスト（画像もOK）をクリックしたら他のページの特定の場所にジャンプする、そんなページ外リンクを超簡単に設定できる方法をお伝えしていきます。
基本的な方法は、同じページ内でジャンプするのと一緒です。
①クリックするテキストに「リンク」を設定
ページ内リンクと同じようにクリックするテキストにリンクを設定します。
テキストをドラッグして指定したら「リンクの挿入/編集」ボタンを押します。
テキストにリンク窓が出てきますので、そこにジャンプしたいページの「URL」（この場合は、なめろうブログのヤーマン美顔器の記事）に「#と任意の文字」を加えてを入力します。
任意の文字なので適当に「＃a」と入れます。文字は「#abc」でも「#123」など何でも構いません
この場合も入れる文字は何でも大丈夫ですが、必ず文字の前に＃をいれてください。例えば「＃a」や「#ｂ」など。
そして、
ことも忘れないください。
②ジャンプしたい先に「アンカー」を設定
アンカーの設定はページ内のジャンプとまったく一緒です。
ジャンプしたいページのテキストにアンカー設定をします。
TinyMCE Advancedを使っている方
ジャンプしたいページのテキストをドラッグで選択して、アンカーボタンをクリックします。
クリックするとこのようなリンク窓が出てきますので、そこに先ほどリンクに入力した「a」をここに入れます。
このとき、#は不要ですので入れないようにしてください。
これでさきほど①で設定したヨシケイの文字をクリックすると、ヤーマン美顔器のページの「フォトプラス」にジャンプするようになります。※実際のページではリンクしていないのでご了承ください。
TinyMCE Advancedを使っていない方
TinyMCE Advancedをインストールしていない方はテキストエディタから、下記のようにHTMLを記入してください。
<a id="a"></a>ヨシケイ
“a”の箇所が先程設定した任意の英数字です。
動作確認
設定ができたらテキストをクリックしてちゃんとジャンプしているか動作確認がでければオッケーです。
以上、WordPressの記事ページ内や他のページの特定の場所にジャンプする方法ついてお伝えしました。
最後までお読みいただきましてありがとうございました。
コメント