Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!

--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2006年10月09日

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

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

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;
}

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

スポンサーサイト
タグ : エントリ

コメント

絵文字の位置が変になる(記事の中です)

blogtubeさんのテンプレートが使いやすそうでダウンロードさせていただきました。記事の中で絵文字を使うとバランスがくずれるのは、このmarginの取り方の問題なのでしょうか。

まず記事の中で絵文字を使う前に、ここらへんを訂正してからのほうがいいんでしょうか。教えていただけたらうれしいです!

このmarginの取り方です

Deannaさん、こんにちは。
その通りでこのmarginの設定があるため、画像を貼り付ける
と右と下にスペースができてしまいます。

エントリでも紹介しましたのでご覧下さい。簡単に言えば
この一番下にある#box-main imgを全部削除すれば
スペースが入らなくなります。

ありがとうございます!(絵文字の件)

blogtubeさん、こんにちは。
絵文字も画像なので、同じようにスペースが
できてしまうんですね。

アドバイスありがとうございました!v-222

改行について

初心者ですが少しずつ理解できるようになりました
1つおききしたいのですが、
表を作成したのですが出来上がりは随分下になってしまったんです
回り込みではなく単なる表なんですが、どこをいじればいいんでしょうか?
この記事のところなのかなと推測したのですがよろしくお願いします

tabeleの記述に誤りがあります

ローズさん、こんにちは。お返事が遅れまして申し訳ありません。

ご質問の表ですが、ブログを見たところ、tableの記述に誤りがあります。

ソースを見る限り、おそらく何かのソフトをお使いかと思いますが、正しくは以下のような記述になります。

<table border="1">
<tr>
<td>ランク</td>
<td>月額報酬額</td>
<td>報酬率</td>
</tr>
<tr>
<td>a</td>
<td>10万以上</td>
<td>基本+15%</td>
</tr>
<tr>
<td>b</td>
<td>1万以上10万未満</td>
<td>基本+6%</td>
</tr>
<tr>
<td>c</td>
<td>1万未満</td>
<td>基本報酬率</td>
</tr>
</table>

該当のエントリと見比べて見てください。詳しく説明すると
長くなりますが、とりあえずtable内でbr(改行)は使えませんし、
trが正確に閉じられていません。

これを参考に、HTMLについて解説しているサイトなども利用して
tableの記述を見直してみてください。

ありがとうございました

よく見たら全部閉じていませんでした
混乱していたみたいです
訂正したところ随分よくなりました
日々勉強ですね 助かりました 
今後もいろいろ勉強させてください

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://templatetube.blog78.fc2.com/tb.php/3-167ecf91
プロフィール

templatetube

Author:templatetube
FC2ブログへようこそ!

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

Appendix


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。