リンクの設置のしかた
アフィリエイトに限らず、サイトやブログを運営しているかたは、記事中にとかくリンクを設置することは多いかとは思いますが、まずは、リンクの記述について、おさらいをしてみたいと思います。
アフィリエイターであれば、これだけ知っておけば十分という観点でお伝えします。
WordPressに備わっている標準機能でリンクを設置
リンクを設置したいのが文字であれば、マウスでその範囲をドラッグして指定し、「リンクの挿入／編集」をクリックする。
リンクを設置するのが画像であれば、マウスで画像を指定（クリックした状態）し、同じく「リンクの挿入／編集」をクリックする。
単純にリンク設置するだけであれば、「リンクの挿入／編集」をクリックして表示されたURL設定窓にリンク先URLをペーストする③までの操作で終わり。
リンクを新しいタブで開いたり、投稿済の記事にリンクさせたりする場合は、④で詳細の設定窓を表示させ、⑤の目的に応じた操作をプラスすればいい。
テキストモードでHTMLを直接記述、あるいはコピペで貼り付けてリンクを設置
記事中にリンクをHTMLで直接記述したり、メモ帳や専用のテキストエディタで作成したHTMLを貼り付けたりする場合は、記事の入力モードを必ず「ビジュアル」から「テキスト」に変更して行います。
文字にリンクをつける
文字にリンクを付けたい場合は、こんな記述になります。
例：<a href="リンク先のURL" target="_blank">あなたがリンクをつけたい文字</a>
このままコピペして、赤字と青字部分を自分用に書き換えれば使えます。
※target="_blank"は、リンク先を別タブで開く場合に使用する記述です。
画像にリンクをつける
例：<a href="リンク先のURL"><img src="画像の保存場所" alt="画像の説明文"></a>
画像の保存場所については、ワードプレスにアップしてある画像を使うのであれば、ダッシュボードからメディアの項目をクリックし、表示されたメディアライブラリーの画像一覧からリンク設置に使いたい画像をクリックすると「添付ファイルの詳細」が表示されてURLがわかりますから、それをコピペします。
画像の説明文は付けることが大切だと、その遠い昔に盛んに言われていた時期もありますが、つけてもつけなくても良いので、つけない場合は
例：<a href="リンク先のURL"><img src="画像の保存場所"></a>
となります。
上記も、このままコピペして、赤字と青字部分を自分用に書き換えれば使えます。
画像の表示サイズを指定する
横幅300px、高さ200pxのハイビスカスの画像を例に、Yahoo!のトップページにリンクするHTMLを記述してみます。
上記の画像は、<a href="https://www.yahoo.co.jp/"><img src="http://unijapa-shop.com/wp-content/uploads/2018/06/okinawa-kabira.jpg" alt="沖縄ハイビスカス" class="aligncenter" /></a>
とHTMLで記述してあります。class="aligncenter"は、中央揃えです。
横幅を％で指定する
<a href="https://www.yahoo.co.jp/"><img src="http://unijapa-shop.com/wp-content/uploads/2018/06/okinawa-kabira.jpg" alt="沖縄ハイビスカス" class="aligncenter" style="width: 50%; height: auto;" /></a>
上記の画像は、幅を50％で表示させています。
ここでいう50％とは、元画像の50％という意味ではなく、表示可能な最大幅の50％という意味になります。
「style="width: 50%; height: auto;"」は、％ではなく、pxで指定することもできます。
横幅を100％指定して表示させる
横幅を100％すると、表示可能な最大の幅に応じてこのよう大きくなり、スマホで表示した場合でも、デバイスに応じた表示可能な最大幅で、はみ出すことなく表示されることとなります。
高さが異なる画像を、同じ高さに揃えて横並びで表示させる
もし、高さの異なる2枚の画像を、同じ高さで横一列に並べて表示したい場合は、高さをpxで指定してやり、幅をautoにすれば次のように高さが揃った画像表示になります。
ファイル名は当然違いますが、2枚とも <a href="https://www.yahoo.co.jp/"><img src="画像の保存場所" alt="画像の説明文" class="aligncenter" style="width: auto; height: 200px;" />
と記述しています。
|
 |
 |
|
リンクを別タブで表示させることについて ～ target="_blank"の使い方
サイト内リンクでは、target="_blank"を使わないことが基本
まず基本をお伝えすると、サイト内リンク（内部リンク）は必ず同じタブで表示させます。
なので、同じサイト内リンクでは、リンクの記述に「target="_blank"」は使用しません。
なぜなら、サイト内リンクを別タブばかりで表示させた場合、サイトの同じページが何枚も表示されるようになったりすることがあり、良いユーザビリティ（ユーザーの使いやすさ）とは言えません。
ただ、ブラウザのタブを使わずに、Adobe Acrobat Readerを起動させてPDFを表示させるなどの場合は、例外として「target="_blank"」と指定する場合もあります。
外部リンクでも、target="_blank"を使う効果に疑問
別タブ表示は、PCのユーザーには有効かも知れない
外部リンクの場合は、「target="_blank"」で別タブ表示をさせてもいいかも知れません。
でも、最近はそれも疑問を感じています。
私も外部リンクの場合、別タブでリンク先を表示させるように記述することが多いのですが、その理由はユーザーに自分のサイトに留まって欲しいということでした。
今であれば、PCの画面はワイドで広いため、リンク先が開いた時に、同一タブで開いたのか、別タブで開いたのかの判断は容易にできますが、PCの画面が狭いひと昔前は、リンク先が開くたびに画面いっぱいに広がり、ユーザーは幾つの画面が開いたのかまったくわからず、閉じる時に初めて十数枚もの画面が開いていることに気づくということも良くありました。
スマホ利用のユーザーには、別タブ表示がマイナス効果？
ただ、スマホがインターネットの主役になりつつある今、別タブでリンク先を開くように設定している場合、ユーザーのスマホには、何十枚ものページが開いたまま、スタンバイ状態になっていることも多く、スマホを使っている最中に、そのことに気づきもしません。
また、スマホユーザーの場合、直前、あるいは少し前に見ていたページを再度見たいと思う場合、「戻る」ボタンをタップすることが普通で、「戻る」操作で目的のページが残っていなかったとしても、よほど見たいと思うページでない限り、探してまで見ようとはしません。
ということは、リンク先を別タブ（新規ページ）で表示させ、自分のサイトを留めておきたいという考え方は、スマホでは通用しないと考えたほうが賢明で、場合によっては同一タブで表示させるほうが、戻るボタンをタップすることで目に留めてくれるチャンスも高くなります。
また、スマホでも残ったタブを定期的に閉じているユーザが稀にいますが、多くのユーザーはタブが隠れて残っているという認識でスマホを使ってはいません。
たまたま、開かれたままのタブがたくさん残っていることを知り、それらを閉じようとしたとき、あなたのページが何十枚も表示されていることに気づくでしょう。
閉じても閉じても、なかなか減らない「隠れタブ」に、ユーザーは嫌気がさしてしまうかも知れません。
自分のサイトに留まって欲しいなら、良いコンテンツを！
ユーザーは、リンク先が同一タブでの表示だろうが、別タブでの表示だろうが、どうしても見たいサイトであれば、再度訪れてきますし、「お気に入り登録」や「ブックマーク」をしていつでも見れるようにしようとします。
スマホだとホーム画面に表示をさせたりもします。
最近のスマホ優勢の流れの中では、「target="_blank"」は、あまり意味を持たなくなってきたのかも知れません。
ユーザビリティに立って考えると、かえってリンクにつけないほうがいいのではないかと感じることがあります。
ユーザー目線で考えることが大切と思います。
