awntan_52のブログ

あんなこと、そんなこと、どうでもいいこと。 気まぐれに書いてます。

ブログ記事内に設置する横並びの画像リンクを作る方法

ブログ記事内に設置する横並びの画像リンクを作る方法

先日、ご紹介したブログ記事内に複数の画像を横一列に並べる方法を応用して、ブログ記事内に設置できる横並びの画像リンクを作ってみました。

自分のパソコン(Windows7)にもともと入っているオマケのペイントソフトで、三枚の画像の縦横比を揃えて(この場合は正方形にしてみました)、ついでに画像に文字を入れて、その画像を使って画像リンクにしてみました。(デザインのセンスは無視して下さい・・汗)。

タグコードは、こちらになります。

<div align="center"><a href="移動先のURL①"title="カーソルを乗せた時の説明文①" target="_blank"><img width="130" src="画像URL①"></a><a href="移動先のURL②"title="カーソルを乗せた時の説明文②" target="_blank"><img width="130" src="画像URL②"></a><a href="移動先のURL③"title="カーソルを乗せた時の説明文③" target="_blank"><img width="130" src="画像URL③"></a></div>

赤字の数字を足したものが(この場合は390)が、ご自身のブログの記事の幅より大きいと2段になってしまいますので、ご注意ください(記事の幅より少なめが無難だと思います)。

あと、三種類の画像の大きさが、それぞれ違っても、縦と横の比率が同じであれば、同じ大きさで表示されます。

緑字title="カーソルを乗せた時の説明文①"は不要であれば削除して下さい。

以上、ブログ記事内に設置する横並びの画像リンクを作る方法をご紹介してみました。

  お店ブログをやってる方とかは、お店までのアクセスとか、お客様の声、イベント情報などのページへのリンクに、このようなものを記事ごとに設置するのも、"あり"かな~なんて思います。

で、これは、こちらの無料のボタン作成サイト⇒ボタン素材 自動生成サイト - ButtonMakerアフラット で作った画像にリンクを貼ったものです。

※これも、デザインセンスは無視して下さい(汗)。

お気に入りの物を何種類か作っておいて、お使いのパソコンのメモ帳か、あるいはアメブロの下書き機能を利用して保存しておけば便利かなーなんて思います。

なにかの、参考になれば、うれしいのですが・・