引用をグレーボックスにしたい!

いやー、格闘して2時間かかりました。

引用部分をどうしてもグレーボックスにしたいのです。
そうしないと、もともとはこういう感じだから。

これをもっと目立たせたいのです。

こちらのサイトが参考になりましたので、掲載しておきますね。
blockquoteタグにCSSだけで引用符つけたりオシャレにしたい

ここで出てきたのがCSSという言葉。そういえば、ものくろ師匠が、外観では文字や飾りは入れず、CSSで対応しましょう、とおっしゃっていました。

ですけど、素人で特にコードも書けない私にとっては一苦労。とりあえず、プラグインだろうとCSS関連のプラグ「 Custom CSS & JS」を入れてみました。でも。。。どのように使えばいいかわかりません。断念です。

次に恐ろしいことを考えました。外観➡テーマ編集スタイルシート (style.css)にアプローチ。blockquoteの部分を、先ほどのサイトからコピペして、書き換えてみました。でも、何も変わらないのです。なぜ??

ということで、結局は外観➡カスタマイズ➡追加CSSに書き込む、で落ち着きました。

変更後の引用です。グレーボックスになったでしょう?

上のサイトのコピペだと、「”」の部分が文字にかぶって、どうしてもうまくいかず。そこで、もともとのコードの数値をいろいろ変化させて、どこを変えれば色や位置がどう変化するのかをアナログにチェック。それで最終的に以下で落ち着きました。

blockquote {
position: relative;
margin: 2.0em 0;
padding: 1.2em;
font-size: .9em;
border: 2px solid #CCC;
border-radius: 6px;
background: #DFDFDF;
}
blockquote:before{
position: absolute;
top: -20px;
left: 20px;
content: ‘“’;
font-size: 4em;
font-family:’お好きなフォント’;
color: #FFF;
}

きっとこれは邪道です。外観のテーマを変えるたびに打ち込まなければならないのですから。でも、どうしても手っ取り早くグレーボックスにしたい!!という人にはオススメです。

そしてどちらにしてもプラグインで処理すべきだと思うので、どこかのタイミングでものくろ師匠に教えていただこうと思います!

(*後日CSSを変えてピンクにしてしまいました。ものくろ師匠に教えてもらい、CSSを変えるので正解でした!)