こちらのブログとは別にショップ用のブログも開設しました。
→
http://ameblo.jp/buzzhobby2014/ ショップ用なんでショッピングサイトのリンクを貼らないと！ということで、ショッピングサイト構築で覚えた小ネタを使って、「アメブロのフリースペースにリンク付き画像を張る」にチャレンジしました。
またいつか同じ作業をする時のためにやり方を残しておこうかと思います。
手順
①バナー画像を用意。アップロード。
②普通に記事を書くウインドウにアップロードした画像をインサート。
③「HTML表示」にしてHTMLをまるごとコピー。
④「フリースペース編集ウインドウ」にコピーしたHTMLを貼り付け。
⑤すでに「自身画像」へのリンクが張られたHTMLコードになっているので、リンク先を変更。
で、こんな感じ↓
<p>
<a href=\"http://store.shopping.yahoo.co.jp/buzzhobby/\" class=\"\"><img src=\"http://stat.ameba.jp/user_images/20150806/01/buzzhobby2014/d0/81/p/t02200068_0301009313387379182.png\" style=\"width:300px; height:93px; border:none;\" ratio=\"3.235294117647059\" id=\"1438793625954\"></a><a href=\"http://www.buzzhobby.co.jp/\" style=\"line-height: 1.5;\"><img src=\"http://stat.ameba.jp/user_images/20150806/01/buzzhobby2014/bf/62/p/t02200068_0301009313387379183.png\" style=\"width:300px; height:93px; border:none;\" ratio=\"3.235294117647059\" id=\"1438793625803\"></a></p><p>
</p><p>
</p>
<a href=\\\"
の後ろがリンク先URLで、今回は2つの画像からぞれぞれのリンク先に飛ぶようになっています。
このままだと同一ウインドウ内でリンク先に行ってしまうので、「"target="_blank"」を入れて「新しいウインドウ」で開くようにします。
<p>
<a href=\"http://store.shopping.yahoo.co.jp/buzzhobby/\"target=\"_blank\"><img src=\"http://stat.ameba.jp/user_images/20150806/01/buzzhobby2014/d0/81/p/t02200068_0301009313387379182.png\" style=\"width:300px; height:93px; border:none;\" ratio=\"3.235294117647059\" id=\"1438793625954\"></a><a href=\"http://www.buzzhobby.co.jp/\"target=\"_blank\"><img src=\"http://stat.ameba.jp/user_images/20150806/01/buzzhobby2014/bf/62/p/t02200068_0301009313387379183.png\" style=\"width:300px; height:93px; border:none;\" ratio=\"3.235294117647059\" id=\"1438793625803\"></a></p><p>
</p><p>
</p>
それから今回の件とは関係ありませんが、ブラウザ上にＨＴＭＬをそのまま表示させるのは結構大変で、全体を「pre」と「code」で囲んで「＜」と「＞」を別のコードに変えないといけないとか。
幸い、こんなサイト→
http://blogtool.flatlabs.net/source.html があったので利用させていただきました。
