テキストと画像のリンクの貼り方をそれぞれ教えてあげるよ
ワードプレスのブログに、リンクを貼り付ける方法を解説します。
リンクといえば、このようなものをイメージすると思いますが
なにもテキストだけではなく、画像にも貼り付けることが可能です。
両方共ワードプレスのビジュアルモードで
簡単に貼り付けることができるので、ここで覚えてしまいましょう。
目次
１．ワードプレスブログのリンクの貼り方【テキスト編】
まずは、テキストにリンクを貼る方法からです。
設置するリンクには、２種類のタイプがあります。
- ブラウザの同ウィンドウで開くリンク
- ブラウザの別ウィンドウで開くリンク
それぞれのリンクの貼り方について解説していきます。
1-1 同ウィンドウで開くリンクの貼り方
１ 最初に、リンクを貼りたいテキストを設置します。今回は「テキストリンクサンプル」としましょう。
２ 次に、リンクを貼りたいテキストの範囲を、ドラッグ＆ドロップで選択します。
３ テキストの範囲を選択した状態で上部のツールバーから、クリップのような形のアイコン をクリックします。
４ リンク設置用の枠が表示されるので、ここにリンクさせたい URL を入力して、右側のリターンボタンをクリックします。
５ これでテキストに内部リンクが設置されました。
動画も用意したので、わかりにくい時は参考にしてください。
※下の画面をクリックで、動画が再生されます。
このリンクの HTML は、この様になっています。
<a href="https://waken01.com/">テキストリンク</a>
1-2 別ウィンドウで開くリンクの貼り方
続いて外部リンクの貼り方解説です。
１～３までは、上と同じ手順なので割愛します。
１ リンク設置用の枠を表示したら、右端の 歯車アイコン をクリックしましょう。
２ リンクの編集画面が開くので、リンクを新しいタブで開く のチェックをオンにして、更新ボタンをクリックしましょう。
３ これで、別ウィンドウで開くテキストリンクを設置することができました。
ビジュアルモードでは違いがわからないので、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-1 画像にリンクを貼り付ける方法【その１】
１ 投稿画面上部の、メディアを追加 をクリックします。
設置したい画像を選択 したら、右の リンク先から カスタムURL を選択します。
すると、URL の入力欄が開くので、ここにリンクしたい URL を入力して投稿に挿入をクリックします。
これで、リンクが貼り付けられた画像を設置することができました。
2-2 画像にリンクを貼り付ける方法【その２】
画像を設置したあとで、リンクを貼り付けるやり方もあります。
基本的には、テキストリンクと同じ方法です。
設置した画像をクリックして有効化してから、上のクリップアイコンをクリックします。
テキストリンクと同じく、リンク用の枠が表示されるので、URL を入力してリターンをクリックすればOKです。
別ウィンドウで開かせたい場合も、テキストとまったく同じ方法でできます。
３．貼り付けたリンクを後で編集する方法
こんな時のために、設置したリンクを後で編集する方法も解説しておきます。
3-1 テキストリンクの場合
設置したテキストリンクのどの部分でもいいのでクリックすると、リンク URL が表示されます。
その URL のすぐ右にある、鉛筆アイコンをクリックしましょう。
するとリンク貼り付け時と同じ枠が表示されるので、ここから再度リンクを編集することができます。
↓ ↓ ↓
3-2 画像リンクの場合
画像リンクの場合は、画像をクリックしてから、クリップアイコンをクリックします。
リンクの枠が表示されるので、ここから編集することができます。
４．貼り付けたリンクを削除する方法
最後に、貼り付けたリンクを削除する方法も解説しておきます。
設置したリンクをクリックすると表示される、リンク削除アイコンをクリックするだけです。
これで、テキストリンクが通常のテキストに戻りました。
さいごに
今回は、ワードプレスブログのリンクの貼り方について解説しました。
ブログを運営するなら、リンクの貼り付けは必須の操作なので
しっかりと覚えて、使いこなせるようになっておきましょう。
さいごに、この記事のおさらいをしておきます。
- テキストにリンクを貼り付ける方法
- 画像にリンクを貼り付ける方法
- 別ウィンドウで開くように設定する方法
- 貼り付けたリンクを後で編集する方法
- 貼り付けたリンクを削除する方法
ビジュアルモードで簡単に貼り付けれるのは嬉しい限りです
必要だと思ったらどんどん使うようにしようね
注目の記事サイト内の特定の見出しへ直接ジャンプするリンクを作る方法
注目の記事ブログのリンクって勝手に貼っても違法にならない？著作権は大丈夫？
