FrickrとWordPressでモブログ

用意するもの：

・Flickrアカウント。そしてブログに投稿できるまでの作業
アカウントを取得したらこちらから設定（もちろん英語）

・IE PNG fix（最新）ー　PNGが扱えるようにするため。
使い方はこちらを参考に（書くのメンドい） via? 独学WEBデザイナーの覚書

・画像の枠部分画像
（構造はこの後の説明を見てください）

完成した構造を図解で把握

Flickr側の設定

自分のアカウント→ Extend Flickr → Your Blogs→ edit → Layoutで送信したメールをブログに掲載する時のレイアウトを決めれます。

[html]
<div class="frickr_frame"><a title="{photo_title}" href="{photo_src}"><img class="frickr_framewaku" src="枠画像へのパス.png" alt="" /></a><br />
<img src="{photo_src}" alt="" /></div>
<p>
<div class="frickr_frame">
<a href="{photo_src}" title="{photo_title}"><img class="frickr_framewaku" src="枠画像へのパス.png" /><a/><img src="{photo_src}" />
</div>
<p>
{description}
</p>
[/html]

CSSは”frickr_frame”が2つの画像（重なる2つの画像）の表示範囲用、”frickr_framewaku”が枠画像の重なりを指定します。んで、こうなりました。

[css]
.frickr_frame {
padding-left: 11px;
margin-bottom: 1em;
height: 212px;
overflow: hidden
}
.frickr_frame img {
border-width: 0px;
border-style: none;
}
.frickr_framewaku {
z-index: 1;
position: absolute;
}
[/css]

heightの部分、padding-leftの部分、margin-bottomの部分は今の勝手な設定なので変更。これで、ふたつの画像が重なって表示されるので、titileタグ部分やらaltタグやらは任意で設定してくださいね。
でも、「重なってる」と言うのを念頭に置いてFlickr側の画像はクリック対象ではないのを注意してください。クリックされるのは枠画像PNGです。だから、lightboxなんかの設定をする場合は枠画像PNGにしましょう。

んー。
できなかったらコメントでもください。
助言もうまくできませんが。。