たこのブログ
Amebaでブログを始めよう!

画像が表示するのにリンクが貼れてないのは・・・


リンクは「aタグ」を使います。

基本形
<a href="リンク先のURL"></a>

「aタグ」と閉じタグ「</a>」の間に画像や文字を置きます。
「バナーにリンクを張る」場合は画像だね。

バナーにリンクを張る
画像は「imgタグ」を使います。
(ちなみにimgタグには閉じタグはありません)
<a href="リンク先のURL"><img src="画像のURL"></a>

詳しく説明すると・・・
「aタグ」の動作は、
「aタグ」から閉じタグまでをクリックされたらリンク先のURLに飛ぶ
「imgタグ」の動作は、
画像のURLを画像として表示する
これを合わせたので、
画像のURLを画像として表示して、
画像がクリックされたらリンク先のURLに飛ぶ
となります。

でもこれだとクリックしたときにそのウィンドウ上で移動してしまうので、
新しくウィンドウを立ち上げてリンク先に移動させたいときは
「aタグ」に「target="_blank"」を追加します
<a href="リンク先のURL" target="_blank"><img src="画像のURL"></a>

「target="_blank"」の意味は
「空のウィンドウを立ち上げてから」のような感じですね。



説明が長くなったけど、ここで本題!!!

画像が表示するのにリンクが貼れてないのは・・・

クリックしたらページが見つからないって出る場合は
リンク先のURLが間違っている可能性が高く、

クリックしてもなにもおきない場合は「aタグ」の書き方そのものに
間違いがある可能性が高いです。

さてこれでわかるかな?

画像URLはどうやったらわかるか


バナーの画像に
直リンクOKのところと
直リンクNGのところとあります
何も書いてない場合は直リンクNGと考えましょう

※直リンクNGの場合(普通はこっち)
 バナーの画像を自分のブログに持ってきてから表示させる方法

  まずは画像をPCに保存します。
  画像を右クリックして「名前を付けて画像を保存」
  


  画像を保存を保存する(この時のフォルダとファイルの名前を覚えておくこと)
  


  次のこの画像を自分のブログにアップロードします。
  ブログ→アメブロを書く→画像フォルダ→「参照」をクリック
  


  さっき保存した画像ファイルを選択する
  


  「アップロード」をクリック
  



  次にこの画像のURLを確認します。
  バナー画像の下の「記事に追加」をクリック
  


  下の方の「HTMLタグを表示」をクリック
  


  画像のURL部分を選択
  


  右クリック→コピー
  


  最後にフリースペースに張り付け。
  ブログ→サイドバーの設定→サイドバーの基本設定
   →フリースペースの「設定」をクリック



  画像のタグを入力してURLを張り付ける



  こんな感じで右側のプレビューが出るはず



  最後にリンクのタグを入力


  参照:バナーつきでリンクを貼る方法



※直リンクOKの場合
 バナーの画像をリンク先のものをそのまま表示させる方法

  バナーの画像を右クリック→プロパティ
  


  画像のURL部分を選択して右クリックコピー
  

  あとは上記の「最後にフリースペースに張り付け。」の手順と同じ

バナーつきでリンクを貼る方法


「フリースペース」を使います。

「ブログ」
 ↓
「サイドバー設定」の画面で
「フリースペース」の右の「設定」をクリックします。

フリースペース設定へ


そして編集します。

リンクの書き方


リンクの書き方は
「新しいウィンドウ」を選んで、
その右側にURLを入れて、
「URL」ボタンをクリック。

そうすると

<a target="_blank" href="入力したURL"></a>
となります。
これが「リンク」


そして画像は自分で書くしかないので
<img src="バナーに使う画像のURL">
これがバナーの「画像」

全部書くとこんな感じ
<a target="_blank" href="入力したURL"><img src="バナーに使う画像のURL"></a>

さーこれで
わかるかな?