テキストリンク・画像リンクの仕組みと使い方

サイト上のリンクについての使い方を説明していきます。

Web上のリンクはハイパーリンクとも言われ、文字や画像をクリックすると、指定のWebページに飛ぶ仕組みの事を言います。

文字や画像をクリックしてリンクを飛ばす仕組みはブログやサイトで当たり前のように使われてますので、その仕組みと使い方は完璧に理解しておきましょう。

テキストリンクの仕組み

まずは文字をクリックすると指定のページに飛ぶ、テキストリンクについてです。

テキストリンクのHTMLはこのような形になります。

（例▼）
このリンクをクリック！

HTMLソースはこのような形
▼

<a href="http://29mailmaga.com/" target="_blank">このリンクをクリック！</a>

<a href=”http://29mailmaga.com/” target=”_blank”>このリンクをクリック！</a>

赤色はテキストをクリックした際のリンク先のURLです。
ここのURLを変える事によって、自由にリンク先を決める事が出来ます。

緑色の部分はターゲットブランク、クリックしたときに別窓で表示させる時にこのタグを入れます。
同じ窓で表示させたい時は、この部分を消せばOK。

青色の部分は、実際に表示されるテキストです。

ソースはこのままブログ記事内や、テーマ内に使えます。

ワードプレスの投稿編集でのlinkタグで簡単にリンクは生成できますが、出来たHTMLはこのような形となってるので覚えておきましょう。

「ワードプレス リンクの挿入」で検索

動画での説明はこちらです。

画像リンクの仕組み

画像をブログにアップロードするための手順、注意点などをまとめました。

画像リンクのソースは基本的に以下のような感じになってます。
基本的な形はテキストリンクと同じです。

<a href="http://blog.with2.net/link.php?1402108" target="_blank"><img src="http://tabebito.com/wp-content/uploads/2014/02/ajisai-hakodate.jpg" alt="あじさい函館" width="500" height="216" /></a>

<a href=”http://blog.with2.net/link.php?1402108” target=”_blank”><img src=”http://tabebito.com/wp-content/uploads/2014/02/ajisai-hakodate.jpg” alt=”あじさい函館” width=”500″ height=”216″ /></a>

赤色は画像をクリックした際のリンク先のURLです。
ここのURLを変える事によって、自由にリンク先を決める事が出来ます。

緑色の部分はターゲットブランク、クリックしたときに別窓で表示させる時にこのタグを入れます。
同じ窓で表示させたい時は、この部分を消せばOK。

青色の部分は、画像のURLです。
アップロードした画像のURLを入力してください。

基本的に、他のサーバーにアップしてある画像を無断で使用する事は迷惑行為とされてるので、必ず自分のサーバーに画像をアップして使うようにしてくださいね。

オレンジはaltタグ、代替えテキストです。
画像をテキストとして読み込んだ時に表示されるテキストを書いておくといいでしょう。
これは忘れずに入れておいてください。

widthやheightの値を変えたりする事で、アップした画像の大きさを指定する事もできますね。

<a href=”http://blog.with2.net/link.ph～～　のリンク指定部分を削除して、＜/a＞の閉じタグも消せば、リンクなしの画像を表示できる事も覚えておきましょう。

それでは、動画での説明ですー。

「リンク　画像　HTML」で検索

altタグの重要性

alt属性は画像に対しての代替テキストとしての役割を持っています。

画像自体の内容は、人の目で見ない限り内容は認識できないですよね。
Webクローラーなどは画像の内容がわからないわけです。

そのために、代替えテキストとして、画像の内容をテキストで説明してやる必要があります。
これによってSEO効果もあり、その画像が検索エンジンの画像検索でも出てきやすくなりますね。

代替えテキストの内容としては、検索されやすいキーワードで画像の内容に沿ったキーワードをいくつか入れるといいでしょう。
単語を複数入れる感じがいいですが、あまり詰め込みすぎたりしないほうがいいですね。

ワードプレスでaltタグをつける時はメディアをアップロードした際に「代替えテキスト」の欄に文字を入れておけばOKです。
上記の動画を参考にしてください。

あ…、ちなみにaltは「オルト」って読みます。
アルトタグって言っちゃうと、ちょっと恥ずかしいです…ｗ