RedLine Magazine ：： cssで更新の楽なリンクギャラリーを作る

cssで更新の楽なリンクギャラリーを作るサンプル

実際のサンプルはこんな感じ。

まず初期工程。下記のような背景となる画像を作る。今回は４パターン用意してみた。

サンプル画像

要するにこれらの画像をcssで背景化して、その上にリンク先のギャラリーのサムネイル画像を適当にサイズ合わせて乗せれば終わりという話。更新時は<li class="hogehoge">と、クラス名を変更するだけで背景を変更していこうという主旨。

次に上の背景の上に乗せる予定の画像をサイズを考えて用意。
↓こういうの。

REDLINE BLOG 　 A list apart 　 css zen garden

で、後は全部ulとliでリスト化して、cssで見た目を整える、と。

「リンクギャラリー」なんて読んでいるが、別にその他、何でも使えそうな感じ。よくサイト制作で枠付画像とか作るときもイチイチ画像に1つ1つ枠つけるの面倒なので、同じ方法で手間ひま回避。

cssソース


ul#coollink{width:420px;}/* 適当にページ内のはめ込みたい部分に合わせて調節 */

ul#coollink li{
	float:left;
	width:121px;　/* 背景画像の幅に合わせて調節 */
	height:102px;　/* 背景画像の高さに合わせて調節 */
	margin-right:12px;　/* 横に並ぶ画像とのスペース適当に調節 */
	padding-top:24px;　/* サムネイルをはめ込む場所調節 */
	text-indent:9px;　/* このサイトの他部分のcssの諸事情によりtext-indentをたまたま使用。普通はpadding-leftで調節できるはず。 */
	}
	
ul#coollink li.blog{
	background:url(images/link_bg_blog.gif) no-repeat top left;
	}
ul#coollink li.design{
	background:url(images/link_bg_design.gif) no-repeat top left;
	}	
ul#coollink li.tips{
	background:url(images/link_bg_tips.gif) no-repeat top left;
	}	
ul#coollink li.use{
	background:url(images/link_bg_use.gif) no-repeat top left;
	}

今回は背景となる画像を別々に作ってみたが、１枚の画像にして背景のポジションで表示位置を変えるやり方でも管理は楽かも。

xhtmlソース


<ul id="coollink">

<li class="tips"><a href="http://alistapart.com/" target="_blank"><img src="images/pickuplinks/ala.jpg" alt="A list apart" /></a></li>

<li class="design"><a href="http://www.csszengarden.com/" target="_blank"><img src="images/pickuplinks/csszen.jpg" alt="css zen garden" /></a></li>

<li class="design"><a href="http://exo.jp/keypersonq/" target="_blank"><img src="images/pickuplinks/kpq.jpg" alt="WEBデザイナーのためのWEBデザインのアイデアノート『Key Person Q』" /></a></li>

<li class="tips"><a href="http://www.alvit.de/handbook/" target="_blank"><img src="images/pickuplinks/webhang.jpg" alt="Web Developer's Handbook" /></a></li>

<li class="use"><a href="http://www.checkpad.jp/" target="_blank"><img src="images/pickuplinks/check.jpg" alt="checkpad" width="101" height="66" /></a></li>

<li class="blog"><a href="http://blog.livedoor.jp/red_line/" target="_blank"><img src="images/pickuplinks/redblog.jpg" alt="REDLINE BLOG" width="101" height="66" /></a></li>

</ul>

と、まぁ書いてみたが、このサイトのリンクページをこういう仕様にしてやろうというもくろみが見え隠れしているのはスルーして･･･。

今回はサムネイル画像だけのギャラリーだけどなんかテキストを下につけたいだとかいう場合は適当にいじればできると思う。このサイトの場合だとうーん。テキストを画像の下に付けたい場合同じ<li>の中に<span>でテキストを囲んでline-height:250%;くらいにしたらうまくいくんじゃないかな。実験してないからわかんないけど。ここまで書いて気力尽きた･･･。気が向いたら後日そのネタ追記します。

でもよく考えたら「別に毎回画像作るなら、背景画像入れて画像書き出せばいいやん。」と言われそうだな･･･。いや、リンクギャラリーという観念は捨てて画像に枠付けたいときに便利な小ネタとして扱って･･･。ほら、一旦画像に背景つけて書き出すと次背景を変える時不便だし。ほらほら。

RED LINE :: webデザイナによるwebデザインに関するさまざまな情報掲載サイト

webデザイナの学習・Tipsなど

本・ツール・webサービス等のレビュー

リンク集

スペシャルコンテンツ

REDLINEって何？

cssで更新の楽なリンクギャラリーを作るサンプル

cssソース

xhtmlソース