WordPerss Archive

技術系のメモに使用していたBloggerのブログをやめて、nubobo.netで動かす事にしました。

もさもさくん
http://mosa.nubobo.net/

写真の表示サイズが長辺480pxと小さかったのでもう少し大きくしようと思い、とりえあず3ペインから2ペインなデザインにしようと思いましたが、テンプレートいじくるのが面倒なのでせっかくなのでテーマごと変更しようと考えました。

今まではWordPress MEに付属していたEasyAllというテーマをカスタマイズして長期間使用していましたが、さすがに飽きてきたところなので丁度良かったです。

今回はwp.Vicunaというテーマのninjaスキンに変更してみました。ほとんどいじっていませんが、なかなかよさげな感じです。
但し、かみさんから英語表記な部分（Continue reading等）が不評だったので、そのうちgettextのファイルいじって日本語にするかも。

それより大変だったのが写真のサイズ拡大化でした。
まず現在の長辺480pxを600pxにしようと考えて、行った作業は下記の通り。
◆wp_postmetaテーブルから変換対象の画像ファイル名の一覧を抽出
select * from wp_postmeta where meta_key = '_wp_attached_file';
◆wp-includes/media.phpのimage_resize()を用いて長辺600pxに変換するphpを書いて実行。
　※なおmedia.phpのimage_resize()はImageMagickを使うパッチ当てています。
　　参考：もさもさくん: WordPressの画像縮小にImageMagickを使う方法
◆wp_postmetaテーブルのメタデータを書きかえ。手で書き変えました。。（大変だった）
select * from wp_postmeta where meta_key = '_wp_attachment_metadata';
◆WordPressの管理画面より再度貼り付け。（これも面倒）

wp_postmetaのメタデータが怪しい構造だったのでwp_postmetaの書き換えを手でやりましたが、自動化すれば良かったと後悔。とりあえずK20D購入後の写真は全て拡大化しました。
しかしサイズが大きくなると見栄えも変わりますねえ。

前回の続きです。似たような写真が続きます。。

続きを読む

http://vikjavev.no/highslide/

画像をクリックすると拡大してくれるAjaxライブラリです。

似たようなものにLightboxというものがありますが、試用したところIE7だけ背景が透けずに真っ黒になってしまったりしてしまった為やめました。

その後色々調べているうちにHighslide JSを発見。こちらの方が気に入ったので導入してみました。

下の画像をクリックしみると動作がわかります。2007年12月の高幡不動の紅葉です。

開いたウィンドウはドラッグして移動できます。右上のコントロールボックス内の矢印で次の画像や前の画像へ移動したりできます（キーボードのカーソルキーも使えるっぽい）。×か画像をクリックすると元の大きさに戻ります。

面白いので全部の画像に適用しました。難点はタグの要素を追加しないといけないこと。これが結構面倒です。気が向いたら自動で設定されるようにしたいですなぁ。

なんとなく変えてみた。WordPressMEのテーマ「EasyAll」をベースにいじくっています。
主な変更は下記の通り。
　・横幅を950pxへ広げた
　・２カラムから３カラムへ
　・最近のコメントを表示するようにした。
その他細かいところを修正・変更。

幅950pxというのはYahoo!JAPANがそれくらいらしい。解像度XGAなユーザは横にお気に入りとか表示させていたら横スクロールバーが出るやもしれんなぁ。。

これだけの変更でも随分時間がかかっちまったわい。もっと変えたいような気もするけどモチベーションが低下してきたのでここまでとしよう。

最近仕事でWeb系の開発をしたのでスタイルシートを忘れていないということと、結構前にphpを覚えたのが役に立ったかもしれない。

Windowsだけだけども下記ブラウザでも変にならないことをチェックした。IE6だけXPで他はVista。
　・IE7
　・IE6
　・FireFox　2.0.0.12
　・Opera 9.25
　・Safari 3.0.4β