小春日和の陽射しの中で:引用の囲み罫をさらに直す

2005年07月31日 12:50

引用の囲み罫をさらに直す

引用スペースのCSSですが、ふつうは BLOCKQUOTE を使うのですが、どこかで、いや「Q」を使うんですよみたいなのを見て以来（2004/2/17の記事）、それの方がいいのかなと思いずっとそうしてきました。
しかし、これだとFireFoxでご覧の方は３カラムトップページで見てると引用スペースが真ん中の記事の幅を突き抜けてしまっていて読みづらかったかと思います（最近はFireFoxもかなり利用されてきているようですし）。
いままでは↓こうでした。

Q {
PADDING-RIGHT: 0.9em;
DISPLAY: block;
PADDING-LEFT: 0.9em;
PADDING-BOTTOM: 0px;
MARGIN: 10px 15px 10px 25px;
BORDER-LEFT: 5px solid #A0522D;
WIDTH: 100%;
COLOR: #A52A2A;
LINE-HEIGHT: 1.5;
PADDING-TOP: 0.3em;
BACKGROUND-COLOR: #FFEBCD;
}
Q SPAN.quotetitle {
FONT-WEIGHT: bold; BORDER-BOTTOM: #000 1px solid
}

それで何がおかしかったのかよくわからなかったのですが、とりあえず
MARGIN は LEFT のみにして、WIDTH を 100% から auto にしてみました。
そしたらFireFoxで見てもはみ出さずにうまくいったようです。
それがこちら↓

Q {
PADDING-RIGHT: 0.9em;
DISPLAY: block;
PADDING-LEFT: 0.9em;
PADDING-BOTTOM: 0px;
MARGIN-LEFT: 1.5em;
BORDER-LEFT: 5px solid #A0522D;
WIDTH: auto;
COLOR: #A52A2A;
LINE-HEIGHT: 1.5;
PADDING-TOP: 0.3em;
BACKGROUND-COLOR: #FFEBCD;
}
Q SPAN.quotetitle {
FONT-WEIGHT: bold; BORDER-BOTTOM: #000 1px solid
}

で、これをどのように使っているかというとタグとしては

<q> </q>

これをIMEの単語登録にでもしておいてすぐに出せるようにして実際には

<q>タイトル 本文だよーーーーー
つづき
おわり</q>

と書けば
タイトル
本文だよーーーーー
つづき
おわりのように見えます。

まぁ、いまさらですが、ちゃんと見えた方がいいですよね。
Macではどうだかは確認できてませんが。。
WinのOperaでも大丈夫です。

※フォントを青字にしてる部分も本来ははCSSでそれ用に指定してタグで囲むべきなんでしょうが、面倒なので直接 なんて書いちゃってます。

コメント(5)│トラックバック(3)
カスタマイズ・ツール

トラックバックURL

トラックバック一覧

1. 実験 [ Cyber-Walk ] 2005年07月31日 14:18

小春日和の陽射しの中でさんの、「引用の囲み罫をさらに直す」の記事を参考に、引用部分を簡単に囲うcssを入れてみました。ちゃんとできてるかなー。できるといいなこんな感じうまくできてるかなドキドキ

2. ■スタイル的に [ ■GUIな時代のぱそ事情 ] 2005年08月07日 11:03

ほんと，最近フットワークが重くなった。体重の増加とともに・・（笑）でも，自分のスタイルは，もう云々言うお年頃はとうに過造，健康第一・安全第一をモットーに余〓を送るしかないと腹をくくっている（笑） …自然の成り行きに任せ，なちゅらるに～っと。せめて，blo

3. 引用文 [ Happy☆Days ] 2005年08月25日 20:40

引用文に囲み罫をつけるというカスタマイズに挑戦！できるかな？うまくできているといいのですが・・・どう？＼(^o^)／ワーイ、できたようです。「小春日和の陽射しの中」junikeさんの、「引用の囲み罫をさらに直す」の記事を参考にさせていただきました。

コメント一覧

1. Posted by 桜花 2005年07月31日 14:17

初めまして。
いつも参考になる記事をありがとうございます。
ヤプログですが、うまくできました。
ありがとうございます。
トラックバック入れさせていただきます。

2. Posted by junike 2005年07月31日 17:59

>桜花さん
はじめまして。
背景に絵を入れるとかわいくなっていいですね。
できてよかったです。

3. Posted by +Lhaca 2005年08月07日 10:29

ご無沙汰致しております。
引用枠のCSS，参考にさせて頂きました。
・・・というより，そのままコピ・ペさせて頂き，使わせてもらいました。

今まで，引用があまり際だたず，
文字色を変えていたのですが，
本当に助かりました。
ありがとうございます。

4. Posted by junike 2005年08月07日 15:52

>+Lhacaさん
どうもご無沙汰してます。
お役に立てたようでうれいしです。
色がかわいらしくていいですね。

5. Posted by +Lhaca 2005年08月07日 19:04

あ，本当にありがとうございます。
これからもよろしくお願いします。

コメントする

名前
	情報を記憶評価顔星

お知らせ

★データの入れ替え作業で全記事が二重存在します。修正前のものと後のものが混在しています。
（2007/11/14以前のもの）

■画像について
個別ページで画像が表示されていないページでは記事右上の「次の記事」リンクをクリックすると同じ内容の記事で画像が表示されます。（「ImgRedを利用した引用」の画像はリンクが切れました）

プロフィール

中年男性、北関東在住、未婚。05年５月にうつ病発症。現在も療養中。17年11月より午後だけの勤務。補聴器使用者。

Blogカスタマイズネタはこちらにまとめました。

□自己紹介兼足跡帳

小春日和の意味：「晩秋から初冬にかけての暖かく穏やかな晴天」（こちら[外部リンク]が詳しいです）

※記事やこのブログに関係のないトラックバックやコメントはこちらで削除することがあります。

近況報告

19/3/21up

０８年３月よりうつ病。
いくつかの職を経て、１７年１１月より午後だけの４時間勤務。事務。

小春日和の陽射しの中で