WordPressリンクの張り方いろいろ

記事を作成していると、リンクを張りたいところが色々出てきます。

 

自分のWebサイト内だけでも

①他のページ
②同じページ内の特定の場所
③他のページ内の特定の場所

の3つあります。

 

そして④外部のサイトへのリンクもあります。

 

ここではWordPressで①～④のリンクを張る方法についてご紹介します。

 

 

ビジュアルエディタで内部リンク・外部リンクを張る

 

①内部の他のページと④外部サイトへのリンクは

WordPressのビジュアルエディタを使えば簡単にできます。

 

WordPressの記事投稿ページで

リンクを張りたい文字を範囲指定して、エディタメニューの

『リンクの挿入/編集』をクリックします。

 

この時は下の画像のように必ずキーワードを含めて範囲を指定しましょう。

 

例えば

『WordPressをまるごとバックアップする方法』はこちら

はＮＧです。

 

キーワードを含める方がSEO（検索エンジン対策）に効果的だと

覚えておいてください。

 

 

 

『リンクの挿入/編集』のウィンドウが表示されますので、

内部のページへのリンクの場合は、『または既存のコンテンツにリンク』

をクリックします。

 

直接URLを入れ、タイトルを入力しても構いません。

 

 

 

ウィンドウが大きくなって、下にサイト内のページタイトルが

一覧で表示されます。

 

スクロールバーまたは検索を使って、リンクさせたいページのタイトルを

探し、該当するページタイトルをクリックします。

 

 

 

すると、上のURLとタイトルの欄が入力されます。

リンクの追加をクリックすれば完了です。

 

 

 

 

 

このURLに外部サイトのURLを入れ、タイトルを入力すれば

外部へのリンクができます。

 

 

 

外部リンクの場合は

『リンクを新ウィンドウまたはタブで開く』

に必ずチェックを入れましょう。

 

せっかくあなたのサイトを見に来てくれた人が

あなたのサイトに戻りにくくなりますので。

 

僕は内部リンクの場合もチェックをいれています。

 

 

リンクを張ると文字の色が変わります。

 

 

 

 

同じページ内の特定の場所にリンクを張る

 

・ページごとに目次を作って、目次タイトルをクリックすると

そのタイトルのところにジャンプする。

・ページの最後まで読み終えた後に、ページの最初に戻れるようにする。

 

など、ユーザーが読みやすいようにリンクを張る方法をご紹介します。

 

 

このリンクではビジュアルエディタではなくテキストエディタを使用します。

 

ページ内のリンクは、リンク元とリンク先をアンカー名でつなげると

いうイメージです。

 

 

①リンク先にアンカーを作る

リンク先に目印をおいてくるような感じです。

 

テキストエディタのジャンプする箇所に次のコードを記載します。

 

<a name="アンカー名"></a>

 

画像の『アンカー名』や『記事に表示する文字』は例ですので変更してください。

 

 

 

アンカー名はテキストのページの中に同じ文字がなければ何でも結構です。

ただし半角英数字です。

 

ページではこんな風に表示されます。

　※クリックするとこのページの最後にジャンプします。

 

 

 

②アンカーにリンクを張る

目印のある場所を指定するような感じです。

 

テキストエディタのリンク元となる箇所に下の例のようにコードを記載します。

 

<a href="#アンカー名">記事に表示する文字</a>

 

 

 

ページでは↓こんな風に表示されます。

ページの最後

クリックするとこのページの最後にジャンプします。

 

 

 

他のページ内の特定の場所にリンクを張る

 

他のページの全部を参考にしてもらうのではなく

一部分だけを参考にしてほしい場合などに用います。

 

 

WordPressでは下記の順序をきちんと守らないとうまくいかないので

注意して下さい。

 

①リンク先にアンカーを作る

リンク先に目印をおいてくるような感じです。

 

ジャンプ先のページのテキストエディタの

ジャンプさせたい箇所に次の例のようにコードを記載します。

 

<h5 id="アンカー名">記事に表示する文字</h5>

H5の箇所は、h3、h2、pなどに変更できます。

 

 

 

入力したら必ず『公開』または『更新』ボタンをクリックしてください。

サイトページでは↓こんな風に表示されます。

リンク先のページで確認

 

 

②アンカーにリンクを張る

目印のある場所を指定するような感じです。

 

テキストエディタのリンク元となる箇所に下のようにコードを記載します。

 

<a href="リンク先URL/#アカウント名" target="_blank">記事に表示する文字</a>

 

 

 

 

入力したら必ず『公開』または『更新』ボタンをクリックしてください。

 

ページでは↓こんな風に表示されます。

『Googleアカウントの作成』

 

クリックするとリンク先ページの『Googleアカウントの作成』の記事の

見出しにジャンプします。

 

 

 

 

このページの最後 戻る