Geeklog実験室 Geeklogのテストや改良のためのサイトです    

2010-09-08 00:42
 記事を友人にメールする 印刷用画面 

GeeklogRでのテーマ開発

ひとりごと

なかなかよい感じで仕上げられたかな。テーマをイチから起こしたのは今回初めてだったので少々手こずってしまったけど、細かなデバッグが必要になるところは別として1日もあれば作れそうな感じ。
オーバーライド前提で作られているのでファイルサイズもかなり抑えることができた。

開発テストしているサイト(2,3日は置いておきます)
今回作成したのはブロックの部分が固定サイズなのでリキッドレイアウトにすると表示がおかしくなります。GeeklogRサイトのJavascriptをそのまま流用させていただきましたが、このままでの使用はちょっと無理がありそうです^^;通常はレイアウト可変で使用することはないと思うので決めてしまえばそれに合わせて#Mainは可変#Secondaryは固定などといった具合にすればリキッドでも対応できます。このテーマ本来のレイアウトは「固定サイズ・2カラム・反転配置」が標準です。

変更したファイル
functions.phpを除けば(こちらの変更は必須なので)header.thtml storytext.thtml footer.thtml custom.css の4ファイルのみです。headerは固定リンクメニュー用に少々手を加えていますがstorytextとfooterは配置とメッセージをほんの少しいじくっただけです。ほとんどのことをCSSで済ませているのでテンプレートファイルを変更する必要がなかったのです。

フリーのCSSテンプレートからの移植なら(気力さえあれば)大量生産できそうですね

 記事を友人にメールする 印刷用画面 

MediaGalleryプラグイン1.5.0をアップロードしました

ひとりごと

非常に強力なプラグインです。画像だけでなく映像や音楽も貼り付けられますが画像でしかテストしていません。

先にアップロードされたjpr1にはタグが閉じられていない問題があるためアップし直しました。手修正するには<geeklog>/plugins/mediagallerytemplate/confirm.thtmlの最後に</form>を追加してください。

ダウンロードはこちら

【変更したところ】

jpr1
・アルバム一覧やブロックに表示される画像の表示位置がおかしい問題を修正
・スライドショーのリンクを改行されてしまわないようにしました
・注目アルバムのタイトル表示をProfessionalCSSでうまく表示されるようにしました
・ボタンの位置がおかしい問題を修正しました
・CANON製カメラで撮影した画像のシャッタースピード表示がおかしい問題をある程度修正しました
・PHP中に含まれる英語の文章を一部日本語にしました
・デジカメで撮影された画像のF値表記を変更しました
・シャッタースピードの表記を日本語にしました
・Geeklogを本名表示にしている場合にもユーザー名で表示されてしまう問題を修正しました
・文字化けする箇所をいくつか修正しました
・日本語表記を拡充しました(まだまだ訳せてないところがあります。私の英語力じゃ限界が・・・)
・透かし処理をする際の注意を入れました(オリジナル画像を維持する設定にしている場合でも透かし処理されてしますため)
・バッチ処理のテーブルサイズを540px固定から90%の可変にしました

jpr2
・template/confirm.thtmlでformタグが閉じられていない問題を修正しました

 記事を友人にメールする 印刷用画面 

IEでアルファチャネル透過PNGを正常に表示させる・・・その後

ひとりごと

導入してから気になっていたけど、メールとプリンタのアイコン。他にもあるけどトップページに表示されるので目に付く。なにが目に付くのかというと、数ドット間延びしてしまっている。どうしてこうなるのか探っていたが、どうやらJavascriptに問題があるようだ。中で何をやっているかというとIMGタグをすべてSPANタグに置き換えてDirectXで処理したものを表示している。

置き換えられたコード



<SPAN title="" style="DISPLAY: inline-block; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://geeklogtest.maryn.jp/layout/FixPCSS/images/mail.png', sizingMethod='scale'); WIDTH: 16px; CURSOR: hand; HEIGHT: 16px"></SPAN>

 

なぜ間延びしてしまうかというと、IEの場合1文字もない場合でもこのタグに指定されているフォントのサイズよりも小さいサイズにはできないのがそもそもの原因らしい。おまけにsizingMethod='scale'が指定されているので拡大されてしまっている。この条件が重なり合って間延びした気持ち悪い画像が表示されている。

解決するにはいくつか方法がある。
1.IMGタグに戻す
2.sizingMethod='scale'を取り除く
3.font-size:0;を挿入する

やはりまずIMGタグのまま使用できればそれに超したことはないので1の方法から試してみた。しかしどうにもうまくいかない。なぜか左の画像のようになってしまう(笑)これではさすがに使い物にならないので、残る手段は2か3ということになる。2の場合はそのものを取り除くだけなので楽なのだが、画像の高さと「ないテキスト」の高さが違うため空白部分ができてしまう。このためそれを意識したレイアウトにしないと崩れてしまう可能性があるのでやめた。そこで結局3のfont-sizeを0にするのが一番無難なので3の方法で表示させることにした。
ところがこれでも問題があることがわかった。元々のIMGタグにpaddingが指定されていると、これまた伸びてしまう。そこでsizingMethodについて調べてみるとimageという値にしてやれば要素のheightやwidthに関係なく要素を画像の大きさにあわせてくれるらしいので、最終的にその方法にした。

pngfix.js 35行目
            + "(src='" + img.src + "', sizingMethod='image');"></span>"

IMGタグをすべてSPANタグに置き換えているのでSPANタグ全体に適用されるスタイルがある場合その影響を受ける。注意しておかないとツボにハマりそうだ。

透過PNGの対応

なんてこったい!(透過PNG)