公開日 ブログ

Blogger【Vaster2】引用ボックスのデザインをCSSでカスタマイズ【blockquote】

Vastar2で引用ボックスを使ってみると
他のブログと比べて、少し殺風景な
感じになっているのが気になっていました。

もう少し「これは引用です」って
分かる様に、主張したくなったので
調べて変更してみました。

Vaster2標準の引用とは

気になっていた、標準の引用を

使ったのがこちらです。

テスト用のブログで引用使ってみました。

▲引用を使うと、枠で囲って他の文とは

違う感じになりますが、少し殺風景ですね。

こんな感じが理想なのです

▲こちらはCSS変更後の引用ボックスです

「これ！引用です」って主張していますよね。

こんな引用ボックスの方が引用だとわかりやすいですね

この様に「かっこいい引用」に出来る
CSSを頂いたブログがこちらです。
https://saruwakakun.com/html-css/reference/blockquote
▲すごくわかりやすく、丁寧なブログです

頂いたCSSに変更する

CSSの変更はBloggerの管理のページで
テーマからHTMLの編集へ進み

Ctrl+Fを押して「検索」します。

検索窓に「blockquote」と入力して
Enterで検索します。

▲「検索」するとこの部分が表示されます

▲選択している部分が標準の引用部分ですので
この部分を削除します。

削除した部分にサルワカさんのブログから
頂いた、お好みのCSSを貼り付けて
保存すると完成です。

すごくサルワカさん任せな記事になっていますが
結構、簡単にかっこよくする事が出来ますので
是非、お試し下さい。