バナーをおしゃれに並べるHTMLテンプレート

楽天
Yahoo!

商品画像やバナーをおしゃれに並べる簡単HTMLテンプレートをご紹介

2016/08/09

お気に入りに追加する

リモコンとかの電池蓋を開けて四角い電池だった時のがっかり感を忘れられないogaRia佐藤です。
四角い電池って単三電池を直列に6本繋いだ電圧があるので見た目以上にコンパクトなやつなんです。

さて今回はバナーや商品画像を大小メリハリをつけておしゃれに並べる
HTMLテンプレートをご紹介したいと思います。

デモ

シンプルなバナー、商品画像を並べただけでも
雰囲気良く並べる事ができます。

専用HTML

下記赤字部分の画像URL、リンク先を修正してからRMSやGOLDページに貼り付けてください。
画像は正方形以外を使うとレイアウトが崩れる場合があるので
正方形以外は推奨していません。

また、IE8以下は対応していませんので予めご了承お願いします。

<style type="text/css">
<!--
#my_panel{
	width:100%;
	margin:0;
	padding:0;
	overflow:hidden;
}
#my_panel img{
	vertical-align: bottom;
	border:none;
	width:100%;
	transition: all .2s ease;
}
#my_panel a:hover img{
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
#my_panel ul{
	margin:0;
	padding:0;
	width:102%;
}
#my_panel li{
	margin:0;
	padding:0;
	list-style-type:none;
}
#my_panel li{
	width:23%;
	float:left;
	margin:0 2% 2% 0;
}
#my_panel li:nth-of-type(10n+1){
	width:48%;
}
#my_panel li:nth-of-type(10n+6){
	float:right;
	width:48%;
}
-->
</style>
<div id="my_panel">
	<ul>
		<li><a href="リンク先URL①"><img src="画像URL①"></a></li>
		<li><a href="リンク先URL②"><img src="画像URL②"></a></li>
		<li><a href="リンク先URL③"><img src="画像URL③"></a></li>
		<li><a href="リンク先URL④"><img src="画像URL④"></a></li>
		<li><a href="リンク先URL⑤"><img src="画像URL⑤"></a></li>
		<li><a href="リンク先URL⑥"><img src="画像URL⑥"></a></li>
		<li><a href="リンク先URL⑦"><img src="画像URL⑦"></a></li>
		<li><a href="リンク先URL⑧"><img src="画像URL⑧"></a></li>
		<li><a href="リンク先URL⑨"><img src="画像URL⑨"></a></li>
		<li><a href="リンク先URL⑩"><img src="画像URL⑩"></a></li>
	</ul>
</div>