画像にリンクを貼る方法をわかりやすく教えます。

画像にリンクを貼る方法、すなわちどんなタグを記述したらいいのかお教えします。

 

この記事は風花初芽の購入者さんからの「写真のリンクの貼り方を教えてください」という質問に答えるものです。

 

画像(写真やイラスト)の上をクリックすると、任意のページに飛ぶようにしたい、ということですね。

 

それでは説明します。

 

 

前提:リンクの意味を確認する

 

今回やる作業は、以前説明した文字列にリンクを貼る作業の応用編です。

 

「リンクをする」という意味がわからない方は、先にこちらの記事をお読みください。

ブログをリンクするとはどういうことか?

ブログをリンクするとはどういうことか?

筆子のアフィリエイト用語辞典。今回の言葉は「リンク」です。アフィリエイト用語辞典では、アフィリエイトをやったことがない超初心者を対象に、この業界のちょっと耳慣れ

投稿 2016/08/19

 

下記の2つも参考になります。

FC2のプロフィール欄から記事にリンクする方法

FC2のプロフィール欄から記事にリンクする方法

FC2のプロフィール欄に入れた文字列を、任意のサイトや記事にリンクする方法を紹介します。これは風花初芽の購入者さんからの質問に答えるものです。質問「プロフィール

投稿 2016/12/24

アフィリエイト(広告)のリンクの貼り方をわかりやすく説明します。

アフィリエイト(広告)のリンクの貼り方をわかりやすく説明します。

風花初芽の購入者さんから、アフィリエイトのリンクの貼り方が、テキストに書いてないので教えてほしい、という質問をいただきました。この記事で説明します。確かにテキス

投稿 2016/12/20

 

では順番に説明します。

 

HTMLタグの文字列を見ただけで、拒絶反応が起きる方は、一気に下にスクロールして、タグ生成サイトのリンクをクリックし、そちらで生成してくださってもかまいません。

 

しかし、落ち着いてじっくり読めば、難しいことは何もありません。

 

復習:文字列にリンクを貼る方法

 

リンクを貼るときは、このようにaタグを記述します。

 

タグは必ず半角で書いてください。全角だと反映されません。

 

<a href="リンク先のURL">リンクをかける文字列(アンカーテキスト)</a>

 

a というのは「リンクします」という意味のタグです。

 

タグの始まりは < を書き、そのあとに、a(リンクしてね)という指示(これを要素という)を書き、リンク先はここです、リンクをかける文字列はこれなんです、とパソコンにわかるように記述し、最後に「リンクの指示(a という要素)を終わります」という意味で </a> と書きます。
文字列の代わりに、画像を指定すればその画像にリンクを貼ることができます。

 

ではやってみましょう。

 

例としてFC2ブログの画像にリンクする方法を書きますが、やることはほかのブログでも同じです。

 

ステップ1:画像をサーバーにアップする

 

記事に入れる画像と同じように、「ファイルアップロード」から画像をアップロードします。

 

ここは大丈夫ですね?

 

ステップ2:画像にリンクを貼る

 

下の筆子の顔にリンクを貼ってみます。この画像はFC2ブログのサーバー上にアップされています。

 

筆子

 

画像にリンクを貼るときは、テキストにリンクを貼る時の、テキストの部分を画像のURLのに変えるだけです。

 

つまりこのように記述します。

 

<a href="リンク先のURL">画像の保存場所</a>

 

たとえば、この画像に、「風花初芽実践物語」のトップページにリンクする(=画像をクリックすると、トップページに飛ぶ)場合

 

<a href="http://fudeko.net/"><img src="http://blog-imgs-64.fc2.com/h/a/t/hatsumejissen/20140425104342036.jpg" alt="筆子"></a>

 

こういう記述になります。

 

この記述では、そのページに上書きされて、リンク先が開きます。

新規のウインドウやタブに飛ばしたいときは、target=”_blank” という属性を追加してください。

 

 

こんなふうになります。

 

<a href="http://fudeko.net/"><img src="http://blog-imgs-64.fc2.com/h/a/t/hatsumejissen/20140425104342036.jpg" alt="筆子" target="_blank"></a>

 

ここは読まなくて大丈夫です。興味のある人だけのエリアです。

 

☆属性について

 

属性って何?と思うかもしれませんが、HTMLのタグの中に入っているものが属性なんです。コードを書くのでなければ深く知らなくて大丈夫です。

 

<a href="http://fudeko.net/"><img src="http://blog-imgs-64.fc2.com/h/a/t/hatsumejissen/20140425104342036.jpg" alt="筆子"></a>

 

の場合、最初の a や img が 要素の名前、href や src、alt は属性と呼ばれます。

 

そして属性に続く=のあとに書いてあるごちゃごちゃは属性値です。

 

属性は「性質」「特徴」という意味です。こういう性質のものを付け加えてます、といった感じだと思います。まあ、アフィリエイトをやるときはその程度の理解で充分です。

 

正確なコードを書いたり理解するのはアフィリエイターの仕事ではありません。

 

 

もし、画像のあとの文字列もリンクさせたいなら、

 

<a href="http://fudeko.net/"><img src="http://blog-imgs-64.fc2.com/h/a/t/hatsumejissen/20140425104342036.jpg" alt="筆子"><br>⇒風花初芽実践物語へ</a>

 

こんなふうに記述します。
<br>は改行するタグです。

 

実際の表示はこうなります。

筆子
⇒風花初芽実践物語へ

 

画像をクリックしても、文字列をクリックしても、指定した同じリンク先(この場合は当ブログのトップページ)に飛びます。

 

画像を表示させるタグについて

 

画像を表示させるタグはimgタグです。

 

imgタグの記述は

<img src="" alt="">です。

 

繰り返しになりますが、画像にリンクを貼るときは、

 

<a href="リンク先のURL"><img src="画像の保存場所(画像のURL)" alt="画像を表す何か"></a>

 

こういう記述になるわけです。

 

imgタグは、ブログの編集画面で写真を貼り付けるマークを押せば、自動的に生成してくれます。

 

ですが、サイドバーなどで画像を表示させたいときは、手打ちをする必要があります(編集画面でimgタグを出して、それをコピペすれば簡単かもしれません)。

 

img src= のあとの” ”のあいだに、画像の保存場所を指定します。

 

FC2ブログの場合、

 

ファイル管理⇒アップロード⇒ファイル一覧の、写真が並んでいるところのファイル情報でURLを取得できます。

 

 

FC2画像のURL

 

筆子の顔の画像の保存場所はこちらです⇒http://blog-imgs-64.fc2.com/h/a/t/hatsumejissen/20140425104342036.jpg

 

これをimgタグのダブルクオーテーションの間に入れます。

 

<img src="http://blog-imgs-64.fc2.com/h/a/t/hatsumejissen/20140425104342036.jpg" alt="筆子">

 

こうすると、画像が表示されます。

 

alt=”” というのは、imgタグの属性です。altは alternative information(代わりの情報)のことです。テキストしか表示しないブラウザや、画像表示をオフにしている場合、この属性に記述した文字列が表示されます。

 

画像の代わりになるテキストを指定するということですね。WordPressの画像の編集画面には「代替テキスト」と書いてあります。

 

記事内の画像はこの属性を指定しておいたほうがいいです。

 

説明を見ると、難しそうに思えるかもしれませんが、実際やることは簡単です。一見ごちゃごちゃに見えますが、単にそれぞれのURLが長いからです。でも、ここはコピペするので、間違えません。

 

タグそのものは短い文字列なのですぐに慣れると思います。

 

サイドバーに画像をのせて、その画像にリンクを貼るときは、サイドバーの幅におさまるサイズの画像をアップロードしてください。

 

風花初芽実践物語(このブログもFC2も)のサイドバーでは、最大200ピクセルぐらいです。

 

画像リンクを自動で生成してくれるサイト

 

もし、タグがよくわからず、混乱するようなら、タグを生成してくれるサイトがありますので、使ってみてください。

 

HTMLタグ自動作成IMGタグ | 画像加工編集サイト・フリーソフト:無料写真加工ならバナー工房

リンクURLにリンクしたいページのURLを入れ、バナーURLに画像のURLを入れます。

 

画像リンクタグ生成

 

どちらも一瞬で画像にリンクするタグを生成してくれますが、altなどの属性を入れたいときは自分で入れることになります。