みやお課SL

ブログのテンプレートがずっとデフォルト状態だったのでいいかげん何とかしようと思って手を入れました。

Macとかではちゃんと見えてるかどうかわかんないのですが、自分のとこではこんな感じです。
とりあえず3カラムはやめて2カラムへ。ゆくゆくは1カラムへ…。（なるのか？）
Firefoxなら画像のフチとか角丸に見えます。

あと、rockyさんのブログ（http://blog.livedoor.jp/rockysassoon/）のタイトル画像がシーズン毎にちょくちょく入れ替わるのが見てて嬉しかったので、そういう感じのをやりたいなと思いました。

僕の場合は毎回画像をチョイスするのはなかなか億劫になりそうなので、適当に過去画像を使って、最小限の組み合わせとランダムで最大限のバリエーション効果を、というあたりに落ち着けました。

<script language="JavaScript">

<!--

imgs = new Array(

"http://img01.slmame.com/usr/miyaoka/20070913_165946.jpg",

"http://img01.slmame.com/usr/miyaoka/20070830_214645.jpg",

"http://img01.slmame.com/usr/miyaoka/20070810_213538.jpg",

"http://img01.slmame.com/usr/miyaoka/20070718_010214.jpg",

"http://img01.slmame.com/usr/miyaoka/20070708_161339.jpg",

"http://img01.slmame.com/usr/miyaoka/20070623_134625.jpg",

"http://img01.slmame.com/usr/miyaoka/20070610_195841.jpg",

"http://img01.slmame.com/usr/miyaoka/20070610_175406.jpg",

"http://img01.slmame.com/usr/miyaoka/20070610_185245.jpg",

"http://img01.slmame.com/usr/miyaoka/20070604_001739.jpg",

"http://img01.slmame.com/usr/miyaoka/20070519_114552.jpg",

"http://img01.slmame.com/usr/miyaoka/20070429_210817.jpg",

"http://img01.slmame.com/usr/miyaoka/20071025_024204.jpg",

"http://img01.slmame.com/usr/miyaoka/20071101_010033.jpg",

"http://img01.slmame.com/usr/miyaoka/20071031_230053.jpg",

"http://img01.slmame.com/usr/miyaoka/20071101_000050.jpg",

"http://img01.slmame.com/usr/miyaoka/20071101_001817.jpg",

"http://img01.slmame.com/usr/miyaoka/20071030_203242.jpg",

"http://img01.slmame.com/usr/miyaoka/20071021_031733.jpg",

"http://img01.slmame.com/usr/miyaoka/snapshot20071011202239.jpg",

"http://img01.slmame.com/usr/miyaoka/20070902_001523.jpg",

"http://img01.slmame.com/usr/miyaoka/20070830_214021.jpg",

"http://img01.slmame.com/usr/miyaoka/20070830_215123.jpg",

"http://img01.slmame.com/usr/miyaoka/20070905_133350-02.jpg",

"http://img01.slmame.com/usr/miyaoka/20070729_210408.jpg",

"http://img01.slmame.com/usr/miyaoka/20070723_184149.jpg",

"http://img01.slmame.com/usr/miyaoka/20070721_001854.jpg",

"http://img01.slmame.com/usr/miyaoka/20070604_230656.jpg",

"http://img01.slmame.com/usr/miyaoka/20070604_000026.jpg",

"http://img01.slmame.com/usr/miyaoka/20070601_205743.jpg",

"http://img01.slmame.com/usr/miyaoka/20070530_215428.jpg",

"http://img01.slmame.com/usr/miyaoka/20070521_224036.jpg",

"http://img01.slmame.com/usr/miyaoka/20070513_211122.jpg",

"http://img01.slmame.com/usr/miyaoka/20070501_011847.jpg",

"http://img01.slmame.com/usr/miyaoka/20070430_230644.jpg",

"http://img01.slmame.com/usr/miyaoka/20070418_151536.jpg",

"http://img01.slmame.com/usr/miyaoka/20070414_015806.jpg",

"http://img01.slmame.com/usr/miyaoka/20070331_183231.jpg"

);

url = imgs[Math.floor(imgs.length*Math.random())];

document.write ('<style type="text/css"><!--#banner {background-image: url("' +url + '");}--></style>');

// -->

</script>

やり方は、表示させたい画像リストを作ってJavaScriptでランダムにCSS生成という形です。テンプレート内に直接書くと画像の追加とかで編集するとき面倒そうなのでプラグインとして読み込むようにしました。

headerタグの中に入れてないから厳密に言えばアレなのかもですが、まあたいていのブラウザではどこに書いてもCSS読んでくれるんで大丈夫でしょう。


こちらはランダム化する前に設定したトップ用画像。

日経BP島（http://mapping.jp/archi/）で行われている建築デモのひとつです。ここではいろんな人がいろんな方向に実験をされていて、SIMとしての調和に面食らうカオス具合ですが、ブログなどを参照しつつじっくり見ていくと制作背景が濃いぶん面白い発見があります。

上記画像の東京マップはhttp://mapping.jp/archi/2007/10/skystylers_13.htmlの記事のものです。
いやーなんか電子基盤っぽいというか、サイバーど真ん中な感じで好きですね。