人気ブログランキング | 話題のタグを見る

お散歩、独り言など、思いつくままに、、 ♪>゜))))彡
by snow_ny
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
  ☆紐育 & 東京☆

   Click for New York, New York Forecast
  Click for Tokyo, Japan Forecast
   [縫] American Quilt
スキン編集...引用枠 <blockquote> の作り方
ブログを始めて半年、少しずつスキンの編集に手を出しています。
最近、複数の方に、「引用枠の作り方」を質問されましたので、
できるだけわかりやすく説明してみようと思います☆

さて、この枠ですが、「引用」を表す「blockquote」の定義をCSSに加えるだけなのです。
以前、xiaoxiaさんに教えて貰ったCSSに、色を少し変えて使っています。
ちなみに、私の使っている引用枠は以下の青い枠囲いデス。

(1)CSS編集:「BODY」の定義の下に以下を挿入します。[赤字は説明]
BLOCKQUOTE {
  MARGIN: 5px 5px -15px 20px; /* [1] */
  PADDING: 5px 5px 5px 20px; /* [2] */
  BACKGROUND:#F0F8FF;     /* [3]枠内の背景色 */ 
  BORDER: 1px 1px 1px 1px;   /* [4] */
  BORDER-COLOR: #29669F;   /* [5]線の色 */
  BORDER-STYLE:DOTTED;    /* [6]線の属性 */
          }

(2)投稿画面にて、囲み記事にしたい部分をblockquoteタグの間に入れる。
 ⇒投稿画面の上、「」マークをクリックすると、タグが自動的に表示されます。




(1)の要素ですが、
 [1]MARGIN    ... 枠の「外」の余白を "上 右 下 左" の順で指定
 [2]PADDING    ... 枠の「中」の余白を "上 右 下 左" の順で指定
 [3]BACKGROUND ... 枠内の背景色。["white"だと白、16進数でも指定できます]
   ⇒こんなサイトを参考にしました...色見本・セーフカラー / RGB editor
 [4]BORDER      ... 点線の幅...を "上 右 下 左" で指定...だと思う...
 [5]BORDER-COLOR ... 囲み線の色。私は文字色(青)に合わせました。
 [6]BORDER-STYLE ... 囲み線の種類 [DOTTEDは点線。実線はSOLID]

※上記の他にも指定の仕方は色々あるようです。soulwriterサンのブログのように、引用枠の角を丸くしたり、題名をつけるというのもblockquoteの応用なのだと思いますが、私にはわかりません(ーー;)

---追記---
mitsukenさんの〆 スキン編集塾#9を参考にして、引用枠を複数設定してみました!mitsukenさん、ありがとうございます!
by snow_ny | 2004-07-31 12:56 | etc...
<< 自然史博物館_1 Sound of Music >>