【Blogger】引用部分を見やすくカスタマイズ

文中で他の記事やサイトから引用する時には「引用」を使いますが、できるだけいい感じに見せたいものです。
テーマによっては、引用すると文字が大きくなったり、斜体になったり、中央揃えになったり、ただまとまるだけで見分けがつけづらかったりします。

ということで、引用部分をカスタマイズしてみました。

参考にさせていただいた記事

ふりむけばコウホウ様の
Bloggerの引用blockquoteのCSSレイアウトデザイン方法
という記事を参考にさせていただきました。

やったこと

テーマ>カスタマイズ>CSSの追加 で、

.post-body blockquote {
 border: 1px solid #cbd4d7;
 padding: 15px 10px 15px 40px;
background-color:#f0f8ff;
 margin:20px;
}

というコードを貼り付けただけ。

こんな感じになります。

※わたしの場合(Awesome Inc というテーマを使ってます)はこれで通りましたが、テーマによってはCSSエリアに直接記述するとか「post-body blockquote」に追記するとかになるかもしれません。


その他

Blogger の blockquote はちょっと癖があるそうで、blockquoteしたあと改行を入れると分割されてしまうそうです。参考にさせていただいた記事に詳しい説明がありますので、一読されることをお勧めします。

0 件のコメント:

コメントを投稿