注意書きに「blockquote」を入れてみたら WordPress.com リーダーでもボックス表示される?

私自身は、ブログの記事に注意書きをつけるときには、以下のようなボックスを使っています。

!

(ここに注意書きの内容を記載します。)

これまでは div 要素を使っていたのですが、WordPress.com リーダーでの表示が他の文章と区別がつきにくかったので、試しに blockquote を使ったところ、多少は改善されたので、その覚え書きです。

注意書きボックスで使っている記述は以下のとおりです。これまでは div 要素を使っていましたが、今後は blockquote 要素を使っていこうと考えています。blockquote とは本来、引用するときに用いるものだと思うのですが、pre や code を使ったとしても同じ矛盾を抱えますので、とりあえず、blockquote を使うこととしました。

<!-- blockquote 要素で作成した注意書きボックス(新版) -->
 <blockquote class="caution">
 <div class="superscriptionicon">
 <div>!</div>
 </div>
 注意書き(blockquote)</blockquote>
 &nbsp;
 <!-- div 要素で作成した注意書きボックス(旧版) -->
 <div class="caution">
 <div class="superscriptionicon">
 <div>!</div>
 </div>
 注意書き(div)
 </div>

上記の記述を記事に追加すると、例えば、テーマ「Twenty Twelve」では以下のような感じで表示されますが、

テーマ「Twenty Twelve」
テーマ「Twenty Twelve」での注意書きボックスの表示

適宜、 CSS を追加することで、他の領域と明確に識別することができるようになります。

t demo | WordPress.com のデモ用-1
注意書き用の CSS を追加した場合の注意書きボックスの表示

この注意書きボックスを WordPress.com リーダーで閲覧すると、以下のような感じになります。blockquote を使った方にはグレーの背景色がうっすらと入り、他の部分と識別がつきやすくなっていることがわかると思います。

注意書きのリーダーでの表示確認(その3) — WordPress.com

一方、最近、よく見かける Feedly という RSS リーダーでの閲覧チェックもしてみました。こちらの方では背景色は入らず、他の領域と区別がつきにくくなっていますが、そのかわりに段落下げが行われており、まったく識別ができないというわけではありません。

t demo
Feedly 上で注意書きボックスの表示

なお、Bloglovin という RSS リーダーもありますが、こちらの方はブログ・サイトと同様の表示なので、こういった配慮は必要ありません。

iPad のアプリ「Bloglovin」での注意書きボックスの表示
iPad のアプリ「Bloglovin」での注意書きボックスの表示