本ブログでは多くの情報を参考に成り立っています。そんな情報の出所を明確にしたいので引用符（blockquote）を多用しています。そんな引用符を「MICRO5」に書き溜めたメモに関しても適用したい・・・通常の引用符とは違ったデザインで。

色々とネットを検索して、公開されている投稿記事「CSS3 を使って blockquote をちょっとおしゃれに Unformed Building」がとっても参考になる！

先ずは出力結果を下記に。

【0010】MICRO5 / システム手帳（2017.12.26）
ASHFORD の「ディープ（ノートタイプ）という商品で、リング径が 11mm。ペリカンの「スーベレーン 400 シリーズ」をホールドできるペンホルダーがありながらワイシャツの胸ポケットに収まる大きさ。

どうでしょう！？自分で言うのもなんですが、なかなか良い感じで表現できているような気がしているのですが。最初の 1 行目は、メモのタイトルで「【通し番号】+ タイトル + 日付」で表現しています。2 行目以降は単純にメモを。

上記のための style.css は以下の通り。

ポイントは、「blockquote:before」の設定でしょうか。content として文字表示ができる！正に上記の参考サイトがとっても参考になっています。

【追記：2018年3月11日】
通常の引用符（blockquote）とメモを視覚的に違うように見せるために「box-shadow」を追記しました！上記コードの 15 行目。単純に標準的な影を付けただけですが。