<--!リンク--> ブログ記事内に複数の画像リンクを横一列に並べる方法|あんなこと、そんなこと、どうでもいいこと・・・

あんなこと、そんなこと、どうでもいいこと・・・

;気まぐれに書いてます^^
あんなこと、そんなこと、どうでもいいこと・・・ TOP  >  スポンサー広告 >  未分類 >  ブログ記事内に複数の画像リンクを横一列に並べる方法

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --年--月--日 --:-- ] カテゴリ:スポンサー広告 | TB(-) | CM(-)

ブログ記事内に複数の画像リンクを横一列に並べる方法

ブログ記事内に複数の画像リンクを横一列に並べる方法



おはようございます。


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

自分のパソコン(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アフラット で作った画像にリンクを貼ったものです。


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

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

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

最後まで、ご覧頂き、ありがとうございますデス;^^


☆ブィブィ ゞ(^_^)v





おまけ^^;

出会った時も、分かれた時も、後ろ姿だった。



 
スポンサーサイト
[ 2014年01月21日 07:54 ] カテゴリ:未分類 | TB(0) | CM(0)
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

プロフィール

awantan

Author:awantan
なんだか良く解りませんが、
ポチポチ頑張ります。;^^

メインは、こちらの方です。

ワンタンのアメブロ

検索フォーム
ブロとも申請フォーム
QRコード
QR


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。