パーツ番号 06-02-06 ・ CSSのみ

引用ブロック(pullquote)

大きな引用符の装飾と左の色ラインで、本文中の印象的な一節を強調するプルクオート。WordPress記事の見せ場や名言の抜き出しに。静的な装飾です。

blogcss

プレビュー

ソースコード

HTML

<blockquote class="d06-02-06-quote">
          <p>本当に伝わる文章は、書き手が読み手の疑問を先回りして解消している。技術ではなく、その姿勢こそが読まれる記事の核心だ。</p>
          <cite>— 編集者インタビューより</cite>
        </blockquote>

CSS

.prev.d06-02-06{background:#f7f8fc}
        .d06-02-06-quote{position:relative;margin:0;max-width:320px;background:#fff;border-left:5px solid #5b3df0;
          border-radius:0 12px 12px 0;padding:26px 24px 20px 30px;box-shadow:0 6px 18px rgba(40,50,90,.08)}
        .d06-02-06-quote::before{content:"\201C";position:absolute;top:-6px;left:14px;font-size:56px;line-height:1;
          color:#5b3df0;opacity:.22;font-family:Georgia,serif}
        .d06-02-06-quote p{margin:0 0 12px;font-size:14px;line-height:1.8;color:#2a3042;font-weight:600}
        .d06-02-06-quote cite{font-size:11px;color:#8a90a4;font-style:normal}

クラス名 .d06-02-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。