「引用」のスタイルがイマイチなので、色々と変えてみた

初期設定の引用スタイル

文字に斜体がかかって見づらい、加えて明朝体。どれも好みに合わないので、Webクリエイターボックスさん の記事を参考にCSSをいじくり、変更しました。

引用,スタイル,変更

こちらが初期設定のコード

モダンな感じの引用スタイル

背景色をつけて、フォントはゴシック&ノーマルに変更

引用,スタイル,変更

文頭と文末に“ ”に入れた引用スタイル

“ ”のマークは、画像で。左頭と右下に入れました。

引用,スタイル,変更

下のコードは、右下部分のカッコを表示させるCSS。

htmlのタグ表記も若干変え、<blockquote>に加え、<span>を追加して書きます。

まとめ

この作業で、ワードプレスでアイコンなどの画像を、背景に使用する技を学ぶことができ、引用スタイルの変更で、多くのことを学べました。