はてなブログの引用デザインを画像で表示

hatenaロゴ

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

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

（デザイン→カスタマイズ→「デザインCSS」にコードを入力）

CSS
.entry-content blockquote {
    margin: 20px 0;
    padding: 50px;
    border: 1px solid #ccc;
    border-radius: 6px;
    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の白抜きの引用符アイコンを使わせてもらいました。こんな感じ↓