注目度の高い記事
ワードプレスブログのリンクの貼り方【テキスト&画像】

 

わかば
ブログにリンクを貼りたいんですけど、どうやればいいんですかね...

山本
ワードプレスの機能を使えば、簡単に設置できるよ
テキストと画像のリンクの貼り方をそれぞれ教えてあげるよ

 

ワードプレスのブログに、リンクを貼り付ける方法を解説します。

 

» テキストリンクサンプル(わー研。トップページ)

リンクといえば、このようなものをイメージすると思いますが

なにもテキストだけではなく、画像にも貼り付けることが可能です。

 

両方共ワードプレスのビジュアルモードで

簡単に貼り付けることができるので、ここで覚えてしまいましょう。

 

1.ワードプレスブログのリンクの貼り方【テキスト編】

まずは、テキストにリンクを貼る方法からです。

 

設置するリンクには、2種類のタイプがあります。

  • ブラウザの同ウィンドウで開くリンク
  • ブラウザの別ウィンドウで開くリンク

 

それぞれのリンクの貼り方について解説していきます。

 

1-1 同ウィンドウで開くリンクの貼り方

最初に、リンクを貼りたいテキストを設置します。今回は「テキストリンクサンプル」としましょう。

ワードプレスブログのリンクの貼り方【テキスト編】

 

次に、リンクを貼りたいテキストの範囲を、ドラッグ&ドロップで選択します。

ワードプレスブログのリンクの貼り方【テキスト編】

 

テキストの範囲を選択した状態で上部のツールバーから、クリップのような形のアイコン をクリックします。

ワードプレスブログのリンクの貼り方【テキスト編】

 

リンク設置用の枠が表示されるので、ここにリンクさせたい URL を入力して、右側のリターンボタンをクリックします。

ワードプレスブログのリンクの貼り方【テキスト編】

 

これでテキストに内部リンクが設置されました。

ワードプレスブログのリンクの貼り方【テキスト編】

 

動画も用意したので、わかりにくい時は参考にしてください。

※下の画面をクリックで、動画が再生されます。

 

このリンクの HTML は、この様になっています。

<a href="https://waken01.com/">テキストリンク</a>

 

1-2 別ウィンドウで開くリンクの貼り方

続いて外部リンクの貼り方解説です。

1~3までは、上と同じ手順なので割愛します。

 

リンク設置用の枠を表示したら、右端の 歯車アイコン をクリックしましょう。

ワードプレスブログのリンクの貼り方【テキスト編】

 

リンクの編集画面が開くので、リンクを新しいタブで開く のチェックをオンにして、更新ボタンをクリックしましょう。

ワードプレスブログのリンクの貼り方【テキスト編】

 

これで、別ウィンドウで開くテキストリンクを設置することができました。

ワードプレスブログのリンクの貼り方【テキスト編】

 

ビジュアルモードでは違いがわからないので、HTML で見てみましょう。

<a href="https://waken01.com/" target="_blank" rel="noopener">テキストリンク</a>

 

リンクURL とテキストに加えて

target="_blank" と rel="noopener" が増えていることがわかりますね。

 

わかば
これって何なんですか?

山本
せっかくなので簡単に知っておきましょう
target="_blank" 別ウィンドウで開くための HTML
rel="noopener" 別ウィンドウで開く時のセキュリティー対策用

 

1-3 リンクテキストも装飾可能

リンクを貼り付けたテキストも、通常のテキストと同じように装飾することができます。

 

例えば、太文字にしたり、、

ワードプレスブログのリンクの貼り方【テキスト編】

 

フォントサイズを変更したり、、

ワードプレスブログのリンクの貼り方【テキスト編】

 

テキストカラーを変更することもできます。

ワードプレスブログのリンクの貼り方【テキスト編】

山本
ただ、テキストリンクは ”青のまま” にしておくことをおすすめします
なぜなら、青色がテキストリンクの認識率が1番高いからです

わかば
ふーん、そうなんですね~
(ピンクにしようと思ってたのに...)

 

テキストリンクの貼り方解説は、これで以上です。

 

2.ワードプレスブログのリンクの貼り方【画像編】

続いて、画像にもリンクを貼り付けてみましょう。

画像にリンクを貼り付ける方法は、2種類あります。それぞれ見てみましょう。

 

2-1 画像にリンクを貼り付ける方法【その1】

投稿画面上部の、メディアを追加 をクリックします。

ワードプレスブログのリンクの貼り方【画像編】

 

設置したい画像を選択 したら、右の リンク先から カスタムURL を選択します。

ワードプレスブログのリンクの貼り方【画像編】

 

すると、URL の入力欄が開くので、ここにリンクしたい URL を入力して投稿に挿入をクリックします。

ワードプレスブログのリンクの貼り方【画像編】

 

これで、リンクが貼り付けられた画像を設置することができました。

ワードプレスブログのリンクの貼り方【画像編】

 

2-2 画像にリンクを貼り付ける方法【その2】

画像を設置したあとで、リンクを貼り付けるやり方もあります。

基本的には、テキストリンクと同じ方法です。

 

設置した画像をクリックして有効化してから、上のクリップアイコンをクリックします。

ワードプレスブログのリンクの貼り方【画像編】

 

テキストリンクと同じく、リンク用の枠が表示されるので、URL を入力してリターンをクリックすればOKです。

ワードプレスブログのリンクの貼り方【画像編】

 

別ウィンドウで開かせたい場合も、テキストとまったく同じ方法でできます。

 

3.貼り付けたリンクを後で編集する方法

わかば
よしよし、これでリンクの設置完了っと・・・

わかば
あっ!別タブで開くにチェック入れるの忘れてた!!

 

こんな時のために、設置したリンクを後で編集する方法も解説しておきます。

 

3-1 テキストリンクの場合

設置したテキストリンクのどの部分でもいいのでクリックすると、リンク URL が表示されます。

その URL のすぐ右にある、鉛筆アイコンをクリックしましょう。

設置したリンクを後で編集する方法

 

するとリンク貼り付け時と同じ枠が表示されるので、ここから再度リンクを編集することができます。

ワードプレスブログのリンクの貼り方【画像編】

↓   ↓   ↓

ワードプレスブログのリンクの貼り方【画像編】

 

3-2 画像リンクの場合

画像リンクの場合は、画像をクリックしてから、クリップアイコンをクリックします。

ワードプレスブログのリンクの貼り方【画像編】

 

リンクの枠が表示されるので、ここから編集することができます。

ワードプレスブログのリンクの貼り方【画像編】

 

4.貼り付けたリンクを削除する方法

最後に、貼り付けたリンクを削除する方法も解説しておきます。

 

設置したリンクをクリックすると表示される、リンク削除アイコンをクリックするだけです。

貼り付けたリンクを削除する方法

 

これで、テキストリンクが通常のテキストに戻りました。

貼り付けたリンクを削除する方法

 

さいごに

今回は、ワードプレスブログのリンクの貼り方について解説しました。

 

ブログを運営するなら、リンクの貼り付けは必須の操作なので

しっかりと覚えて、使いこなせるようになっておきましょう。

 

さいごに、この記事のおさらいをしておきます。

  • テキストにリンクを貼り付ける方法
  • 画像にリンクを貼り付ける方法
  • 別ウィンドウで開くように設定する方法
  • 貼り付けたリンクを後で編集する方法
  • 貼り付けたリンクを削除する方法

 

わかば
HTML を使わなくても
ビジュアルモードで簡単に貼り付けれるのは嬉しい限りです

山本
ブログ運営でリンクはとても重要だから
必要だと思ったらどんどん使うようにしようね

 

注目の記事サイト内の特定の見出しへ直接ジャンプするリンクを作る方法

注目の記事ブログのリンクって勝手に貼っても違法にならない?著作権は大丈夫?

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事