favorites pic

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

　

twitpic の脇にあるような正方形サムネイルが作りたくて、まずはランダム表示できるスクリプトのCSSレイアウト版を『前回記事』で紹介しましたが、このままだとデジカメなどの写真画像はそのまま長方形（4：3）の比率で表示されてしまいます。

今回、縦置き・横置きの２パターンの画像をCSSで正方形に切り抜いたサムネイルを作ってみたので紹介したいと思います。（※表示確認はIE8、Firefox3.5.6のみ）

CSSで画像を切り抜く前に最も問題だったのが、画像の中央配置です。
特に一番の問題だったのがCSSを使った縦のセンタリングで、4:3の比率の画像を縦置き、横置きにした場合でセンターの位置が異なってしまうのを何とかしたいと思って方法を色々探してみましたが、今ひとつ有効な方法がなく結果的には、縦置き・横置き各それそれに対応したCSSを割り当てる事によって縦横の比率が異なる場合でも画像の中央が正方形の中心に表示されるようなサムネイルを作っています。ちなみにMT4.25～ではこちらが参考になります。
→ サイドバーのサムネイルを全部正方形にする square="1"編 （MT4.25～）

ランダムサムネイル用のJavaScriptコードはこんな感じ。
<script type="text/javascript"> <!-- var jumpURL = new Array(); var imgURL = new Array(); var imgSTYLE = new Array(); jumpURL[0] = "http://エントリー(1)のURL"; jumpURL[1] = "http://エントリー(2)のURL"; imgURL[0] = "http://エントリー(1)の画像URL"; imgURL[1] = "http://エントリー(2)の画像URL"; imgSTYLE[0] = "style-1"; imgSTYLE[1] = "style-2"; /* 以下エントリーURLと画像URLとCSSは任意で増やしてください。 */ for(i = 0; i < 2; i++) { // この部分で表示する数を調整。 var n = parseInt(Math.random() * jumpURL.length); document.write('<div class="clip"><a href="'+jumpURL.slice(n,n+1)[0]+'" ><img src="'+imgURL.slice(n,n+1)[0]+'" border="0" class="'+imgSTYLE.slice(n,n+1)[0]+'"></a></div>'); jumpURL.splice(n,1); imgURL.splice(n,1); imgSTYLE.splice(n,1); } // --> </script> <br style="clear:both;">　

各画像に横置き（style-1）、縦置き（style-2）のCSSを割り当てることで正方形サムネイルを表現しています。本当は１つのCSSで自動的に正方形に見せられる方法を採りたかったのですが、画像の中央配置をする上で、縦のセンタリングをCSSで表現する事が困難だったため、結果的には画像に２種類のCSSを用意して枠の中央にくるようなポジション値を各それそれに指定する事で対応しています。（この方法だとあらゆるサイズの画像にも対応は出来ますが、けっこう手間なので出来れば１つのCSSで表現したいところです。）

（今回は断念しましたがCSSでの上下中央揃えでとても参考になりました。）
→ CSS で簡単に上下中央揃えを実現する
→ 異なるサイズの画像を縦横中央配置にしてリスト状に並べる

CSSはこんな感じ。

<style type="text/css"> .clip{ display : inline-block; float: left; margin: 0pt 20px 5px 0px; width: 80px; height: 80px; position:relative; } div.clip a:link ,div.clip a:visited , 　　　　　　　　 div.clip a:hover,div.clip a:active{ display : inline-block; width: 80px; height: 80px; text-decoration: none; } .style-1{ top:0px;left:-14px; /* widthで画像の横幅を調整できます。 */ position:absolute; clip:rect(2px 94px 80px 16px); } .style-2{ top:-14px;left:0px; /* heightで画像の縦幅を調整できます。 */ position:absolute; clip:rect(16px 80px 94px 2px); } </style>

CSSで画像を切り抜くには、overflow:hidden;でボックスからはみ出した部分をカットする方法と、clipプロパティで画像の指定部分のみを表示させる方法と２種類あります。（他にもあるのかな？）

IEでは画像をマウスクリックした時に画像周囲にdotted:1pxのボーダースタイルのようなラインが出来るですが、overflow:hidden;でカットするとこのリンク枠のラインが思ったように出せなかったので、clipプロパティとボックスをdisplay : inline-block;としてリンク幅を調整する事で、切り抜いた画像幅をリンクの範囲枠として見せかけています。clipプロパティについては、-ボックスの表示する範囲を指定する- で紹介されているので参考にしてみて下さい。

※サムネイル化するにあたってwidthやheightで画像を縮小すると画像が粗くになりますが、CSSに
（ img { -ms-interpolation-mode: bicubic; } ）を入れると綺麗に表示してくれるみたいです。
→ 画像をCSSだけでハイクオリティに縮小サムネイル化する方法

（Photo by clearweather）