Facebox で Lightbox 風に画像ポップアップ (要jQuery 1.2.*)

画像のポップアップ用では Thickbox や Lightbox が有名ですが、「写真を角丸に表示するLightBoxスクリプトの種類まとめ」で見つけた「Facebox」がなかなか素敵です。

下記の通り Faceboox 風に画像外枠に半透明の角丸が付きます。

window.onload のタイミングでも以下のコマンドで適用できるようになっているので、このブログでも問題なく採用できました。

$('a[rel*=facebox]').facebox();

Read more

京の路、Flickr API を利用してデザインリニューアル!

ふと、以前読んだ「Flickr の JSON フィードで自作ブログパーツ | METAREAL」を思い出し、このブログのデザインを一新することにしました。

以前テンプレートの整理を行っていたので、メインの作業は30分ほどで終了。やはりこの辺りは、慣れもあってか Wordpress より MovableType の方が速くできますね。

新デザインのポイント

幅を 800px から 1000px に

以前はユーザビリティを考えて幅 800px を基準にしていたのですが、今回は思い切って 1000px にしました。小さいノートパソコンをお使いの方は若干見にくいかも知れませんが、やはり画面が広いとデザインの幅も広がってやりやすいです。

ユーザビリティも考慮して可変幅も検討中ですが、可変幅レイアウトをうまく扱える程 Web Design には精通してないので、ちょっと時間かかりそうです。

ヘッダー画像を Flickr の画像に置き換え

これは METAREAL の記事を参考にしていますが、Feed ではなく Photo Search API (要 API KEY) を利用しています。API を利用すると per_page をパラメータとして使えるので、Feed (常に 20 item) よりも使いやすいです。

取得している画像は、"kyoto" タグの付いている Public 画像です。hover で画像サイズが変更されるのは、RAILS PRESS*nov is just tweeting と同様です。なお画像は以下のように window.onload のタイミングで読み込んでいます。

Read more