https://simadzu.hatenablog.com/entry/blockquote

はてなロゴ

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

最近は、引用したほうがわかりやすいときは、素直に引用するようになりましたが、引用のデザインがシンプルすぎて目立たないので、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;
}

コードを短くするならこんな感じです（backgroundのショートハンドを使う）

CSS
background: url(右の画像のURL) no-repeat left 10px top 10px,url(左の画像のURL) no-repeat right 10px bottom 10px;

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

背景画像は、CSSで「,」で区切って複数指定できるのですね。知らなかった。
Into the Program｜CSSのbackground-imageで左右に別々の背景画像を表示する方法
 Webクリエイターな備忘録｜CSSで左右で違う背景画像を表示したい！

－追記－
はてなブログの引用デザインをはてなのアイコンフォントで表示