あきなふすきぃ

いつも上位にある育児系ブログ★鮎魚★ほわほわ日和は、オリジナルデザインに凝った素敵なページ。他サイトのデザインとか見て、これどうやっているんだろうってよく思うことがあるのだけど、ここでも気になるところをひとつ発見。さっそく分析してみました。

どういうことが気になったかというと、この★鮎魚★ほわほわ日和、コメントした人がURLも入力してあるとそのURL先がサムネイル画像で表示されるようになっていたりする。

どんな感じの表示かというと、こんな感じ　

そんな設定TI-DAにあったっけ、と管理画面を彷徨ってみたものの見当たらず。どういう仕組みなんだろうと、サムネイル画像のプロパティを開くと、共通して”http://img.simpleapi.net/small/”の記述。

どうもこれがヒントらしいと、そのURL先にいってみるとビンゴ！でした　 http://img.simpleapi.net/

ただ問題は、コメント入力した人がURLも入力したら、それが自動で反映されるようにする必要があるわけで、オリジナルデザイン画面とにらめっこ。。。個別記事のHTMLの設定を試行錯誤してみました。

URLが反映される記述部分を探し、その先頭に前述のURLを記述 ⇒ 反映は成功。けど、なんかレイアウトがおかしい。サムネイル画像下に posted by ~~ at 2006年mm月dd日としたいのに、真横に来てしまう。。。

スタイルシートのコメント欄に関する記述を探し、回り込みの設定を追加。こんどはコメントが複数あるときに、互いのレイアウトが崩れる現象発生。特にコメントの記述行数が少ないと崩れ方がひどい。。。コメント欄の幅（width）を100%にすることで、崩れをなくすことができました。ふぅ。

お気に入りも同じように表示することできるか、今度試してみようかな～。