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

引用テキストの型

左に太い縦線を添え、斜体で組んだ引用文のスタイルです。WordPressの記事内での他媒体からの引用や名言紹介に使えます。

staticcss

プレビュー

ソースコード

HTML

<blockquote class="d02-03-06-quote">
          良いデザインとは、できるだけ少ないデザインのことである。
          <cite class="d02-03-06-cite">— ディーター・ラムス</cite>
        </blockquote>

CSS

.d02-03-06{background:#f8fafc;text-align:left}
        .d02-03-06-quote{max-width:280px;margin:0;padding:4px 0 4px 18px;border-left:4px solid #94a3b8;font-family:"游明朝","Yu Mincho",serif;font-style:italic;font-size:14.5px;line-height:1.8;color:#334155}
        .d02-03-06-cite{display:block;margin-top:10px;font-style:normal;font-size:11.5px;color:#94a3b8}

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