flickr badge画像縮小表示のGoogle Chrome対応

いろいろあったけど、完全復活！　

パソコンの故障の原因はPC ケースの電源ケーブルの中継コネクタのワイヤーが１本抜けていた為。
HTPC(ホームシアターPC)用ケースなので表示パネル用に電源を分岐供給するのに中継コネクタがあるのさっ。

そんなに簡単に抜けるのかと思って隣のワイヤを引っ張ってみたら、簡単に抜けた。。。おぉぉぉぃ！

そんな落ちとはつゆ知らず、この間電源は換えたばかりなのでマザーボードかCPUが逝ったんだろうなと思い、

電源、DVDドライブ、ビデオカードは元のものそのまま流用、PCケースはワイヤー抜けを直して、

他のパーツおよびOSをWindows 7 64bit版に新調してみましたしたとさ。

中身が新しくなったPCにソフトをいろいろインストールしてて、

そーいや前のPCでは、最近ブラウザ（Firefox）が重い気がするなと思ったので、別のに換えてみることにした。

Firefoxはアドオンでいろいろできるらしいのだが、現状、ほとんどアドオンは入れてなかったので

普段使いの軽さを優先つーところだ。

で、まずは地球最速といふOperaを入れてみた。なるほど、ちょー速くなって機能もいろいろあるっぽいんだけど、
いつも聴いてるネットラジオのページを表示してると急に落ちる。。。

まあ、再起動も地球最速っぽい感じで立ち直ってくるのではあるが。

で、つぎにGoogleのChromeも入れてみた。

こちらも軽快に動作する。シンプルだが普通に使う分には十分である。機能拡張もいろいろあるよーだ。

とりあえず、Chromeをメインに、Operaをサブで使ってみることにした。
複数のブラウザのブックマークを同期するソフトなんてものあるらしーので問題ないだろう、多分。

って、前置きが長いんだが、
Chromeくんは画像の縦横サイズがしっかり指定されてないといかんらしい。

以前苦労して縮小表示にしたプロフのflickr badgeがこの記事のトップの画像の様にびよーんと伸びてしまってる。。。

これはいかんので、↓こちらで紹介されているページを参考になんとかしてみた。

『[CSS]サイズがばらばらで無指定の画像を一定サイズで表示するスタイルシート』

<style type="text/css">
.container {width:210px; height:210px; border:0px solid #000; position:relative; 
overflow:hidden; float:left; margin:0 0 0 0; display:inline;}
.container b{display:block;}
.actualSize {height:210px; min-width:210px; float:left; background:#fff; 
overflow:hidden; text-align:center;}
.reducedSize {width:420px; position:relative; top:-210px;} /* width = 2x box width */
.reducedSize .high {min-width:210px; float:left; background:#fff; text-align:center;}
* html .reducedSize .high {width:210px;} /* hack for IE6 */
.reducedSize .high img {height:210px;}
.reducedSize .wide {float:left; width:210px; height:210px; background:#fff; margin-top:-210px;}
.reducedSize .wide img {width:210px;}
</style>

<span style="color: #70aa55;"><b>Raizo Karas</b></span><br />
<span style="font-size:80%;line-height:130%;">いろんな事ができるセカンドライフの世界。<br />
せっかくなので、ふつーでないファッション、<br />
ふつーでないアバターに。。。<br />
<a href="http://www.blogger.com/profile/02779659197769705235">VIEW MY COMPLETE PROFILE</a>
 <br/>
 <br/>
</span>

<div class="container">
<b class="actualSize">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?
count=1&display=random&size=m&layout=x&source=user_set&user=28464958%40N07
&set=72157606105225170&context=in%2Fset-72157606105225170%2F"&gt;</b>
<b class="reducedSize">
<b class="high"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?
count=1&display=random&size=m&layout=x&source=user_set&user=28464958%40N07
&set=72157606105225170&context=in%2Fset-72157606105225170%2F"></b>
<b class="wide"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?
count=1&display=random&size=m&layout=x&source=user_set&user=28464958%40N07
&set=72157606105225170&context=in%2Fset-72157606105225170%2F"></b>
</div>
<br class="clear" />

画像サイズを指定している赤文字のところを指定したいサイズをベースに書き換え、
元では画像を指定しているオレンジ色の部分にflickr badgeのスクリプトを指定。

紫色の部分は前と同じ様にbadgeの下側に配置したら表示されなかったので、
badgeの上側にしてみたら表示されました。 CSSわからずやってるので、なんでかはわからん。。。

これでちゃんと表示される様になりました。　復活までのいろいろはまた今度。

いじょ