2006年02月11日

背景色つき引用文の作り方

強度偽装物件のまとめをする、風刺画問題の時系列を追う、あるいは、紀子様ご懐妊と皇室典範改正問題のまとめをする・・・あたりが当BLOGに求められているのだろうと思うわけですが、それとはまったく関係ない話題です。申し訳ありません(汗
とにかく時間がなくて本業も滞っております。体調も完全ではありません。そういうわけなので、本来の話題の方はもうしばらくご猶予ください。

今回は、ある訪問者の方から寄せられたご質問に関して手短に。その質問とは


ついでにお知恵を貸してください。
実は引用文(特に長い文の場合)を水無月さんみたいに背景色つけて、囲いたいのですが、
やり方がわかりません。一体あの技は如何?
Posted by 建つ三介 at 2006年02月11日 18:03



↑これってどうやるの? というもの。そういう意味でしょう、建つさん?(笑
わかります、わかります。私もほかの方のBLOGを見て羨ましく思い、一生懸命(でもないか)、技を工夫したのです(笑
結論から言えば、その前提にはHTMLの知識が必要です。ただ、私もそれを体系的に学んだわけではないですし、理解しているわけでもありません。ネット上を適当に検索してそれの解説をしているサイトさんへ行き、見よう見まねでやってみて・・・という、実にありがちな経路で今に至っています。
そういうわけで、そんな私でもよいから教えて、という方のみ、以下はご覧ください。そしてこの記事中以上の詳しい内容は、ご自分で調べてみてください。ネット上で表現方法を多彩にするためには(たとえばテーブル形式だけでなく、絵を貼りたいとか、音楽をつけたいとか、いろいろあろうかと思います)、ネット上でその解説サイト(必ずあります)を探し、自分で試してみる・・・という開拓者精神(?)というか、失敗を恐れぬ前向きさ(?)が大事なのだろうと思います。





上記の背景色つき囲み部分は、HTMLのテーブルを利用しています。具体的には、以下のように記述しています。


<div style="text-align:center;"><TABLE border="0" cellspacing="0" cellpadding ="10" width="80%"><TD style="background:#DFDFff"><span style="font-size:12px;"><span style="line-height:18px;"><span style="color:#333333;">
ついでにお知恵を貸してください。
実は引用文(特に長い文の場合)を水無月さんみたいに背景色つけて、囲いたいのですが、
やり方がわかりません。一体あの技は如何?
Posted by 建つ三介 at 2006年02月11日 18:03

</span></span></span></TD></TABLE></div>


大文字と小文字が入り混じってますが、気にしなくて大丈夫です。TABLE は table と記述しても同じ結果になります。ほかのものも同じ。ただし、全角文字と半角文字ではまったく意味が異なります。HTMLは必ず半角文字でなければいけません。
各タグの意味を知るのが面倒臭いという方は上をそのままコピー&ペーストしてご利用ください。たぶん、それでテーブルが表示できると思います。もし表示されないのであれば、それはご利用のBLOGサービス(建つさんの場合は【LOVELOG】)が、記事本文でのHTML使用に対応していないのです。その場合は諦めてください(汗)。しかし今時そういうBLOGサービスがあるとは思えませんけども。

各タグの意味は以下の通りです。タグとはこの場合 <div> とか <TABLE> など、< と > で囲まれた記述です。各タグは必ず括弧の関係になっています。つまり、<div> には </div> が、<TABLE> には </TABLE> が、必要です。囲み記事の中に入れたい文字列が終わったら、必ず終了タグを逆順で書き、タグを完結させてください。
上のタグを分解しながら意味を書いてみます。

<div style="text-align:center;">   ←@
  <TABLE border="0" cellspacing="0" cellpadding ="10" width="80%">  ←A
    <TD style="background:#DFDFff">  ←B
      <span style="font-size:12px;">  ←C
        <span style="line-height:18px;">  ←D
          <span style="color:#333333;">  ←E

ついでにお知恵を貸してください。
実は引用文(特に長い文の場合)を水無月さんみたいに背景色つけて、囲いたいのですが、
やり方がわかりません。一体あの技は如何?
Posted by 建つ三介 at 2006年02月11日 18:03

          </span>  ←F
        </span>  ←G
      </span>  ←H
    </TD>  ←I
  </TABLE>  ←J
</div>  ←K


<意味>
@ 「ここからの内容(TEXT)は中央部分に表示しますよ」
 (この記述がない場合、デフォルトの左寄せ表示になります)
A 「ここからテーブルが始まりますよ。枠線(BORDER)はありません。各テーブル要素(CELL)の間はゼロ(=無し)です。各テーブル要素内での記述はテーブル要素を作る枠線から10の距離を取ります。テーブル全体の大きさは画面(BLOG本文欄)の80%とします」
※ このテーブルは、テーブルではありながら一要素しか使っていません。従って行の定義をしていません。行の定義をする場合はAとBの間に <TR> が必要となります(もちろん、閉じるための </TR> も必要です)。そういう表を作りたい方はどうぞご自分で調べてみてください。
B 「ここからテーブル要素の一番目が始まりますよ。その背景色は #DFDFff ですよ」
 (色の定義についても同様に、調べてみてください。色見本のサイトさんはたくさんあります)
C 「ここからの文字の大きさは12pxです」
 (これがないとデフォルトの大きさになります)
D 「ここからの行間は18pxです」 (省略時はデフォルトになります)
E 「ここからの文字の色は #333333 ですよ」

F 「Eの有効範囲はここまでですよ」
G 「Dの有効範囲はここまでですよ」
H 「Cの有効範囲はここまでですよ」
I 「Bのテーブル要素はここで終わりです」
J 「Aのテーブルはここで終わります」
K 「@の有効範囲はここまでですよ」


このような感じです。色や文字の大きさなどはいろいろ試してみるとよいと思います。
では、頑張ってみてください(笑

posted by 水無月 at 23:28| Comment(4) | TrackBack(0) | 当BLOGに関して | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。