画像を使用しないで引用表示するCSSカスタマイズ

引用符で不具合を見つけた、あきら（@akrwnet）です（＾ｖ＾）

以前書いた記事
ブログテクニック２：見やすくなるような引用符カスタマイズ

ここで、CSSを変更して引用表示を見やすくしたつもりでしたが、Windows Live Writerを使用していると、投稿記事に自動でPタグが挿入されてしまいます。

すると、引用文が変なことななってしまうんですね。

Pタグ開始時に、全て引用符がついてしまいます。

これじゃイケてないということで、解決方法を探ってみたがわからず・・・

 

ならば画像を作成して対応させてみたらどうだろうと

こんな画像を作ってみたのですが、レスポンシブ対応させるとちょっとおかしなことになりそうだったので、コレも却下！

 

では画像を使わないほうが楽なのではないかという結論に達し、ググって見ることにしました。

 

CSSサンプルを発見

やっぱり調べてみるとあるもんですね。

 

こちらの記事で、このCSSソースを拝借させて頂きます。

blockquote:before{
content:"“";
float: left;
font-weight: bold;
font-size: 500%;
display:block;
height:30px;
color: #666;
}

blockquote:after{
content:"”";
text-align:right;
display:block;
height:30px;
font-weight: bold;
font-size: 500%;
color: #666;
}
blockquote>p{
margin:0;
padding:1em;
}
blockquote>p:first-child{
text-indent:2em;
}
blockquote{
margin: 0 2em;
padding: 1em 2em;
background-color: silver;
}

IEでは表示されないと記載されていますが、この記事は2006年の記事のようなので、当時は対応していなかったのでしょうね。

確認してみたところ、今のIEなら大丈夫のようです。

 

CSSを編集してみる

そのまま利用すると、なんだか表記が大きく感じるので編集して見ることにします。

blockquote:before{
content:"“";
float: left;
font-weight: bold;
font-size: 300%;
display:block;
height:0px;
color: #666;
}

blockquote:after{
content:"”";
text-align:right;
display:block;
height:15px;
font-weight: bold;
font-size: 300%;
color: #666;
}
blockquote>p{
margin:10px 20px;
padding:3px;
}
blockquote>p:first-child{
text-indent:0px;
}
blockquote{
margin: 20px;
padding: 10px 10px 0px 5px;
background-color: #ffffff;
}

 

5行目と17行目を、フォントサイズが大きかったので変更

font-size: 500%; → font-size: 300%;

 

7行目、書き出しに影響を与えるためゼロに（もしくは削除可）

height:30px; → height:0px;

 

15行目、最下部に余白ができてしまうため調整

height:30px; → height:15px;

 

21、22行目、引用文のバランスを撮るため微妙に変更

margin:0; → margin:10px 20px;

padding:1em; → padding:3px;

 

25行目、書き出しを揃えたかったのでゼロに変更（ゼロにするなら24～26行目を削除でもOK）

text-indent:2em; → text-indent:0px;

 

28、29行目、余白のバランス調整

margin: 0 2em; →margin: 20px;

padding: 1em 2em; → padding: 10px 10px 0px 5px;

 

30行目、最後に背景色を白に変更

background-color: silver; → background-color: #ffffff;

 

これでちょっとは見やすくなったのかな？

 

参考に(＾‐＾)ゝ