はじめに
サイドバーなどに画像をクリックすると別のサイトに飛ぶようなリンクを張りたいと思いますよね。意外に簡単なんですが,初めてだと難しいと感じるようですね。例としては以下の画像をクリックするとイメージが分かるかもしれませんね。
課題
アメーバブログでサイドバーに設置したい場合はフリースペースを使います。このフリースペースって何?って思いますよね。私だってここに来て何って思いました。
アメーバブログでHTMLのタグを入力できるスペースであると思ってください。HTMLって,この画像のリンクを設置するための言語だと思ってください。簡単なルールに従って記述します。
このフリースペースにたどり着けない場合があると思いますが,
フリースペースにたどり着く方法
- 管理画面の"設定・管理"のボタンをクリック
- 右下のフリースペース編集のリンクをクリック
- 以上でフリースペースにたどり着けます。
画像をアップしてからそのアドレスを取得する
アメーバブログに記事から画像をアップしたら以下のようなコードが記述されますね。そのなかで,<img ~ src="○○"のところを探して下さい。この赤字の部分が画像のアドレスです。この画像のアドレスを使いますのでどこかメモ帳などにコピーしておきましょう。
<a href="http://stat.ameba.jp/user_images/20160410/20/qelab/91/8d/g/o0088003113616864343.gif"><img width="88" height="31" alt="" src="http://stat.ameba.jp/user_images/20160410/20/qelab/91/8d/g/o0088003113616864343.gif" /></a>
説明のリンク
私が説明するよりも,以下のリンクが分かりやすいです。
リンクのパターンは以下の通り,先ほどメモした画像のアドレスとリンク先のURLアドレス。そすてリンク先のタイトルを記入していきます。
<a target="_blank" href="リンクのURLアドレス"><img style="border:0;" alt="リンクのタイトル" src="先ほどメモした画像のアドレス" /></a>
ちなみにこんな感じになります。
<a target="_blank" href="http://www.tohoho-web.com/www.htm"><img style="border:0;" alt="とほほのWWW入門" src="画像のアドレスです" /></a>
さいごに
ちょっと難しいと感じますよね。でも自分でできたときはとても嬉しいですよ。ちょっとづつで良いので自分でできるように練習をするとよいです。