雑記

リンクをワードプレス(wordpress)のブログで貼り付ける方法を紹介

リンクの貼り付け方法

リンクの貼り付けってどうやるの?

と調べている方のためにリンクを貼りつける方法を紹介します。

しばらくリンクの貼り付けをしていなかったのでやり方を忘れてしまい再度調べるはめに(>_<)

忘備録としてリンクの貼り付け方を残しておくことにしました。

このブログはAFFINGER6というテーマを使ってのやり方になりますが違うテーマでも

基本的な部分は同じなのでリンクの貼り付け方の参考にしてみてください。

リンクをワードプレス(wordpress)のブログで貼り付ける方法

リンクは大きく分けて3つの方法があります。

リンク方法は三つ

外部リンク文字通り外部の別サイトへのリンク
内部リンク自分のサイト内の別ページへのリンク
ページ内リンク自分のサイトの同じページ内でのリンク
リンクの種類

リンクを貼りつける基本的な一連の流れは

基本的な手順

  1. リンク先のURLアドレスを調べる
  2. リンクを貼りつけたい場所(テキスト・ボタン・画像など)を選択する
  3. 選択した場所にその URLアドレス(ページ内リンクはアンカーHTML) を貼り付ける

それぞれのやり方を、画像つきで説明していきます。

外部リンクの 貼り方

外部リンクはあなたのサイトとは違う外部のサイトにページ移動してしまうので

自分のサイトから離脱されてしまう可能性が高くなります。

外部リンクを貼る時は別窓で表示するようにしましょう。

たとえばおしゃれなフリー写真素材「GIRLY DROP」という写真素材のサイトをおすすめする場合に

GIRLY DROPのサイトはこちらというテキストに外部リンクを貼ることにします。


基本的な手順は 3ステップ です。

リンク先のURLアドレスを調べます

GIRLY DROPのサイトにアクセスしURLアドレスをコピーします。

リンク先

リンクを貼る場所(あらかじめ作成済みのテキストやボタン、画像など)を選択します


ステップ1のリンク先のURLをコピーできたら、リンクを貼るテキストを選択した状態にします。

選択した状態でリンクボタンをクリック。


選択した場所にその URLアドレス(ページ内リンクはアンカーHTML) を貼り付ける

リンク手順1
リンク手順2

①にステップ1でコピーしたURLアドレスを貼り付け

②新しいタブで開くをON(外部リンクは別窓で開いた方が離脱を防止できる可能性が高い)

③送信をクリック

これで外部リンクができました。

実際にリンク先に移動できるか確かめましょう。

内部リンクの貼り方

内部リンクの貼り方

内部リンクは自分のサイト内の別の記事につなぐ方法です。

ポイント

  • ユーザーの利便性が上がる
  • ユーザーの滞在時間が長くなる
  • クローラーが巡回しやすくなる

内部リンクを貼ることで、SEOの効果も期待でき Google からの評価も良くなります。

内部リンクの貼り方も同じ3ステップの手順で

つなげたいリンク先の URL を調べて貼り付ける。

この方法でもいいのですが、もっと簡単な方法があります。

ステップ2の段階で、リンク先のページのタイトルに入っている単語を入力すると候補がでてきます。

今回はボタンに貼りつけてみます。

まず、リンクを貼るためのボタンを作成します。

ブロックエディタでボタンをクリック。


内部リンクというボタンを下記に作りました。

ボタンを選択した状態で、リンク先のタイトルの単語の一部を入力。

出てきた候補の中でリンク先の記事を選択し、新しいタブで開くかどうかは任意で。


このブログにある記事の一部の単語「会計」と入力してみると候補がでてきました。

内部リンクしたいページを選ぶと自動的にリンク先が入りました。

これで内部リンクが完了です。

こちらもリンクできているか確認しておきましょう。

今回はビジネス会計の記事にリンクさせてみました。

ページ内リンクの貼り方

ページ内リンクの貼り方


ページ内リンクは同じページ内の特定の場所「見出し」「ボタン」「画像」などをリンク先に指定します。

見出しに貼り付ける場合、その見出しにURLアドレスの代わりになるものを設定する必要があります。

内部リンクや外部リンクは

リンク先のURLを貼りつけましたがページ内リンクは の 同じページ内なのでURLアドレスのかわりに

「HTMLアンカー」を設定する必要があります。



設定のやり方は、見出しのタイトルを選択し 高度な設定の中のHTML アンカーをつける。

このページ内の上部にある「リンク方法について」という見出しにつけてみます。



「リンク方法について」という見出しにカーソルを置きます。

HTML アンカーはスペースを含まない半角英数字で、あなたがわかりやすい簡単な単語でつけてくださいね。


今回は高度な設定の中の「HTMLアンカー」に「In-page-link」と名前をつけました。

ページ内リンクのやり方

高度な設定の部分を拡大したものがこちらです。

HTMLアンカー

これでリンク先が準備できました。

ページ内リンクはこちら」という文字に、リンクを貼りつけたいので文字を選択した状態で

リンクの貼り付けを押し 「# HTML アンカー」を入力しリンクを設定します。

ページ内リンク①



先程つけた「#In-page-link」を入力し送信をクリックするとページ内リンクの完成です。

ボタンや画像のほか、動画や Twitter なども埋め込むことができるのでいろいろ試してみて下さい。

ページ内リンク②

リンクの解除の仕方

リンクを解除したい場合は 、解除したいリンクの一部をクリックし、リンクの解除ボタンを押すだけで解除できます。

リンク解除

まとめ

リンクの貼り付けは基本的な操作は同じです

  • リンク先の URLアドレス、もしくは HTML アンカーを設定しておく
  • リンクを貼り付けたい場所を選択する
  • リンクの貼り付けをクリックしURLアドレス(ページ内リンクは HTML アンカー)を貼り付ける

-雑記