FC2公式ブログのように、記事本文の文字の下部に縦横の罫線を引くには？

FC2ブログを利用しています。
下記のFC2公式ブログのように、文中の見出しを目立たせたいと思っています。

FC2総合インフォメーション
http://blog.fc2.com/info/

上記ブログの記事本文中、各話題の見出し部分に

┃＿＿＿＿＿＿＿＿＿＿＿

↑こういう感じの、鍵カッコ型・オレンジ色の下線が付いています。（7/20現在）


同ブログより
http://blog.fc2.com/info/blog-entry-416.html
「新テンプレートを2種類追加！」の文字下部に付いている下線です。


同じ下線を引きたくて、ブログ記事を書く欄にこのように書いてプレビューしました。

<div style="padding: 4px 0px 2px 4px; border-left: 5px solid #FF9900;border-bottom: 1px solid #FF9900;">ここに見出し</div>

一応似たような感じになりました。


この場合<div></div>と<p></p>のどちらがふさわしいでしょうか？
上記の記述はおかしいですか？
また、こういう記述を「ブログテンプレートの編集」（HTML、CSS）ではなく
ブログの本文を入力する欄に書くのは間違いでしょうか？

（この罫線が画像か文字か何なのかもわからない所からここまでは来ました
上に書きました「FC2総合インフォメーション」のブログテンプレートは
見た目は公式テンプレートの「niziiro」ですが
ソースを見たら公式テンプレート「neko_can」でした。
罫線と全く無関係でしたらすみません）

No.1 ベストアンサー 回答者： SortaNerd_ 回答日時： 2009/07/20 15:23

そのページのcssを見てみたところ、以下のようになっていました。

h3{margin:5px 0; padding:5px; border-left:6px solid #ffa500; border-bottom:1px solid #ffa500; font-size:120%}

内容はあなたの書いたstyleとだいたい同じですね。
これをタグ内のstyleに書くのは別に構いませんが、毎回その長いstyleを書くのが面倒なのであまりお勧めしません。
やはり公式のようにcssに書くのが楽です。そうすれば本文には<h3>～</h3>などとだけ書けば済みます。

なお、pタグは「段落;paragraph」を意味するので、見出しに使うのは意味的に間違っていて好ましくありません。
divは汎用なので悪くはありませんが、「見出し」用のタグとしてh1,h2,…が存在しますので、これを使うのが意味的に最も正しいです。
ただ、h系はデフォルトで文字サイズ・行間・文字飾りなども設定されてしまいますので、これが気に食わない場合はこの設定を上書きせねばならず少々面倒です。その意味ではdivが一番楽だと思います。

この回答へのお礼

どうもありがとうございます！とてもよく分かりました。

記事内にh1,h2,h3…を使ってみると、おっしゃる通り
特定の文字サイズなどが設定されていました。
この設定を上書きするのは今の自分には無理なので、今は本文書き込み欄にdivで書き、
CSSに手を加えることを追々勉強して行きたいと思います。

pタグやh1,h2…の使いどころもよくわかりました。
とても助かりました。勉強になりました。

上のブログのCSSも教えていただいてありがとうございました！

お礼日時：2009/07/21 01:58