記事を投稿する時に使用するタグ

記事を投稿する場合、以下のような状況を想定してタグを設定してあります。ということは、それ以外のパターンで投稿をする方は、テンプレートを修正した方がいいかもしれません。
また、タグを使わずに記事を投稿すると、スペースが空きませんので、非常に読みづらい投稿になります。以下を参考にタグを使用してみて下さい。

1.Pタグを使用する

<p>記事の文章をここに入れる</p>

<p>Pタグを使って段落を表す</p>

記事の文章をここに入れる

Pタグを使って段落を表す

グレーの部分が投稿する場合に使用するタグで、下がその表示結果です。Pタグを使用することで、上に10px、下に16pxスペースが入ります。スペースを調整したい場合は以下のCSSを変更してください。

#box-main p{

margin-top: 10px;

margin-bottom: 16px;

}

2.画像を貼り付ける

<img src="http://blog-imgs-11.fc2.com/t/e/m/templatetube/001.gif" width="60" height="60" alt="画像" /><br />

画像の下、左にはスペースが入る

画像の下、左にはスペースが入る

画像を貼り付けると、自動的に右に16px、下に16pxスペースが入ります。右にスペースが入るのは、画像の右に文章を回りこませる状況を想定しているからです。
多少空き過ぎかもしれませんので、調整される場合は以下のCSSを変更してください。

#box-main img{

margin-right: 16px;

margin-bottom: 16px;

}

3.画像の右に文章を回りこませる

<p>

<img src="http://blog-imgs-11.fc2.com/t/e/m/templatetube/001.gif" width="60" height="60" alt="画像" align="left" />

文章が右に回りこむ。

</p>

<div style="clear: left;"></div>

文章が右に回りこむ。

画像の右側にスペースがあるのは、この状況を想定しているためです。逆に言うと、画像が右で文章が左、画像を上下に重ねる、などの状況には対応できません。常にその投稿スタイルならばスペースの設定を変更、状況によって複数のパターンがある場合には、新規に追加して対応して下さい。
また、align属性を使用する方法は推奨要素ではありませんが、floatで指定できる方はそちらをお使い下さい。気にしない方はこの方法でも大丈夫です。回り込みの解除も他の方法がありますが、この方法でも解除できます。
つまり、img align="left"で文章を右に表示して、＜div style="clear: left;"＞＜/div＞(<と>は半角)で回り込みを解除しています。いずれの方法でも構いませんが、回り込みの解除を忘れないで下さい。

#box-main img{

margin-right: 16px;

margin-bottom: 16px;

}

今日はここまで。次回は続きです。