blog*citron

• 050310
• のん

CSS見易くなりましたねー。
イイ感じですよう^^
カスタマイズする方にもわかりやすくなった感じでは^^
#おいらも二日目。職場で貧血で死にそうですたw｣w｣w｣。
身体冷やさないように乗りきりましょうー(>д<)

• 050311
• 椿

はじめまして。
素敵なテンプレお借りしました。
おととい一度いろいろカスタマイズ中に、ギブアップしてたんですが、今回のバージョンアップですんなり行きました！
ありがとうございました。
これからも楽しみにしています♪

• 050311
• ユヅ

●のんさん
昨日はメッセでどうもでした～。
ちょっと前のが見辛すぎたっていう…（笑）
自分で開いてなんじゃこりゃーてなったのは内緒です（笑）

●椿さん
こんにちは。
良いタイミングでveruupできたかしら（笑）
カスタマイズもやりやすくなってると思いますのでたのしんでくださいねー＾＾

• 050311
• さなえ

ユヅさん、お知らせありがとうございましたーー
早速DLして　簡単なカスタマもさせていただきました＾＾ありがとうございます。
カスタマがとてもしやすくなってますね！ありがたいですーー！！
そしてそしてアマゾンの3秒で出来るカスタマも参考にさせていただきました。本当にわかりやすくて助かります。
これからもユヅさんにどこまでもついて行きますーー（ぺこり）
どうぞ　よろしくお願いいたします。。

• 050314
• あさひ

はじめまして。以前のタイプから使わせていただいております。感謝感謝です。
今回、バージョンアップなさったということで、ついでにいろいろいじってみたのですが…RECCOMANDの画像が、下のCATEGORIESの見出しにかぶってしまい、文字が邪魔だとばかりに右のほうへ追いやられてしまっています。
前はこのようなことはなかったのですが…なにか対処法などありますでしょうか…。

• 050314
• ユヅ

●さなえさん
こんにちは～。
verupお疲れ様でした＾＾
前のが激しくカスタムしにくくてごめんなさい・・・(ノ∀｀)
アマゾン系はもうちょっと色々遊べるのでまた紹介していこうと思います＾＾

●あさひさん
こんにちは。
CSSを拝見したところ、すべての画像にテキストの回り込みを設定されているようで、そのためだと思います。
↓この部分
img,
img.pict,
img.thumb {
border:none;
margin:5px 5px 5px 5px;
float:left;
}
imgにも適用されているので、すべての画像にテキストが回り込むようになっています。
エントリー内に関してはテンプレートのCSSの方で回り込みを解除するようにしていますが、アマゾンリストの方は元々回り込み指定をさせていませんので、回り込みの解除がされていない状態です。

ベースHTMLテンプレートを、
<!-- BEGIN amazon -->
<dl class="recommend">
<dt id="recomname">RECOMMEND</dt>
<dd id="recomlist">
<a href="{amazon_url}" target="_blank" title="{amazon_ProductName}"><img src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName}" /></a>
<br clear="both" />
</dd>
</dl>
<!-- END amazon -->
と、解除してやれば直ると思います。

余計なお世話になりますが、img全体にfloat指定してしまうと、使用されている画像すべてに回り込みが適用されて予想外の表示崩れを起こすこともありますので、アマゾン用のclassm名をつけてあげるとか、#recomlist imgにしてみるとか区別することを私はおすすめします～；

• 050314
• あさひ

お早いレスありがとうございます。
ベースHTMLテンプレートを
<!-- BEGIN amazon -->
<dl class="recommend">
<dt id="recomname">RECOMMEND</dt>
<dd id="recomlist">
<a href="{amazon_url}" target="_blank" title="{amazon_ProductName}"><img class="amazon" src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName}" /></a>{amazon_ProductName}<br />{amazon_comment}
<br clear="both" />
</dd>
</dl>
<!-- END amazon -->
とし、CSSを
img{
margin:5px 5px 5px 5px;
border:none;
}
img.amazon,
img.pict,
img.thumb,{
margin:5px 5px 5px 5px;
float:left;
}
としたのですが、直りませんでした…。classの設定の仕方がおかしいのでしょうか？

• 050314
• ユヅ

●あさひさん
すみません、激しく検証ミスってました…(´Д⊂
アマゾンの画像が右にきてもよければ、これで直ります。
<!-- BEGIN amazon -->
<dl class="recommend">
<dt id="recomname">RECOMMEND</dt>
<dd id="recomlist">
<a href="{amazon_url}" target="_blank" title="{amazon_ProductName}"><img src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName}" align="right" /></a>
<br clear="right" />
</dd>
</dl>
<!-- END amazon -->
CSSのfloatは不要です。

・下のリスト名に重なってしまうのは、floatが解除されていないため。
（最初の段階）
・記事の段組でもfloat:leftを使っているので、リストのところでclearすると２つまとめて解除されてしまい、アマゾン以降のリストが下に落ちてしまう。
（これが今の段階）
・現在のCSSではfloatを同一方向に入れ子にすることはできても個別に解除が出来ないため、すべてのflaot:leftがその時点で解除される。

段組に使っていないrightを使用することで回避しています。
画像をどうしても左側に…ということであれば、段組の方をrightで組めばできるかなと思います～。

• 050315
• あさひ

とりあえず、画像を右側に、コメントを左側に表示させることで落ち着きました。何度もすみません、丁寧に教えていただき、ありがとうございました^^;