はてなブログの引用デザインを画像でカスタマイズ

hatenaロゴ

このブログでは、ほかのサイトやブログからなるべく引用しないようにしています。
引用ばかりに頼って、引用だらけになってしまっても困るので...。

最近は、引用したほうがわかりやすいときは、素直に引用するようになりましたが、引用のデザインがシンプルすぎて目立たないので、CSSでカスタマイズすることにしました。

(デザイン→カスタマイズ→デザインCSSにコードを入力)

CSS
.entry-content blockquote {
    margin: 20px 0;
    padding: 50px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20190119/20190119130341.png),
    url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20190119/20190119130342.png);
    background-repeat: no-repeat,
    no-repeat;
    background-position: left 10px top 10px,
    right 10px bottom 10px;
}

/* 引用ボタンを非表示 */
.requote-button {
    display: none !important;
}

はじめは、引用文の背景にフォントの「」「」(ダブルクォーテーション)を拡大表示していたのですが、見た目がいまいちだったので、引用符を画像で表示することにしました。
画像はICOOON MONO白抜きの引用符アイコンを使わせてもらいました。こんな感じ↓

blockquote

背景画像は、CSSで「,」で区切って複数指定できるのですね。知らなかった。

参考になるブログ・Webサイト
Into the Program - CSSのbackground-imageで左右に別々の背景画像を表示する方法

- 追記 -
はてなブログの引用デザインをはてな純正アイコンでカスタマイズを書きました。