ブロプー Blog

こんにちは！さいとうです
先週ブログで書いたとおり、土日で北陸に行ってきました～
海がキレイで海の幸がおいしくて最高でした～！！

さて今回は、テンプレート作成時の注意点についてです。
実際に私の作ったテンプレートで見つかったバグと、
そのバグをどうやって修正したのかを書きますので、参考にしてください

livedoorブログでは、本文に画像を挿入すると自動でimgタグ内にalign="left"が入るようになっています。これはどういうことかといいますと・・・

こんな風に勝手に文字が回りこみ、画像が左、文字が右になるということです。この回り込みは解除するまでずっと回り込みになります

回り込みを解除しないと下の図のような状態になってしまうことがあります

デザインが崩れていますね・・・ひよこの画像が次の画像にかぶって、しかも外の枠線が切れてしまっています

回り込みを解除するには、記事内の回り込みを解除したいところに<br clear="all" />を記述すればいいのですが、毎回記述するのも面倒ですし、テンプレートを使ってくださる方にHTMLの知識がない場合、この方法は適当とはいえないでしょう

この場合は、記事の次の要素、例えば「続きを読む」や「投稿日時や投稿者が表示される欄」（この図では「さいとう」と書いてある灰色のボックス）のCSSにclear:both;を記述すればです

clear:both;を記述するとこんな感じに・・・

これで<br clear="all" />を記述しなくてもデザインがくずれなくなります

私は「imgタグ内にalign="left"が入る」ということを知らなかったので、テンプレートを作って画像を入れてみたら、デザインが崩れてしまいビックリしました

次回もテンプレート作成時の注意点です。更新は１０月２７日（月）の予定です。お楽しみに

ブログ用テンプレートのサイトです↓↓↓↓↓↓↓↓↓全部無料で使えますょ