【はてなブログ CSS カスタマイズ】デフォルトで表示される引用の ”枠” を消したい件

どうも、こんにちは。

時々気が向いた時に、はてなブログのCSSをカスタマイズしています。

今日は、引用の CSS のデザインを変更したものの、もともと表示されていた枠が消せなくて、ちょっと困って、解決した話。

”引用” の CSS を書き足した

私は現在、はてなブログの「ミニマリズム」のテンプレートを使用させてもらっています。

今回、デフォルトの ”引用” の見た目が、シンプルでいいものの、ちょっと寂しいので、変えてみることにしました。

参考にさせていただいたのはこちら。

こちらのサイトにあるデザインで、気に入ったもののコードをコピペして、自分のブログのCSSに貼り付けました。

あれ…？なんか違う。(-"-)

マークの上に字重なってるし。

上のサイト内で案内されていた通り、もともとのテンプレートの影響を受けないように、

.entry-content というのも書き足してみた。

(※CSSの指示を優先させたい時に使う「!important」を記載する方法もあります。これでもできました。)

出来上がったのがこれ。

おお。文字の配置はちゃんといい感じになった。

でもなんか違う…。

まわりの灰色の枠いらない…。(-""-)

私は枠がないのを作りたいんだ。

この灰色の枠は、テンプレートの方にある指示が残っちゃってるんですね。

でも、「.entry-content」の指示をすり抜けてるのは何でなんだろう…。

書き足した CSS を確認。

…あれ？私が選んだコードには、周囲の枠を指定する指示 (border) がない。

これか！

新たなCSSの方に、border の指示を出しているのがないから、書き換えることができていなかったんですね。

ということで…

CSSの

blockquote {～} の中に、「border: none;」を追加しました。

これは、border (周囲の枠) がないよ、という意味。

その結果、、

できたああ °˖✧ (*´▽｀*)

おしまい。