記事内引用枠のカスタマイズ
ブログ書いていてよく使うのが”引用枠”
以前はリンク先だけ貼っておくだけだったが、内容も一部引用で先に紹介しておく事にしている
引用枠も上級者の方の記事みていると、カッコよく装飾しているのをよくみる。
ライオ
以前から思っていたが、デフォルトの引用枠って少し暗すぎない？
デフォルトの引用枠って少し暗すぎない？
引用枠、カスタマイズ紹介記事
引用枠のカスタマイズ手順など紹介している記事を探してみる。
CSSを少しカスタマイズするだけで簡単に引用枠の見た目を変更できるようだ。
CSSで作る！魅力的な引用デザインのサンプル30（blockquote）
画像を使わずにHTMLとCSSだけで実装できる「引用ボックス」のデザインを30個紹介します。シンプルなものからカッコイイものまで。
saruwakakun.com
実際に引用枠をカスタマイズしてみる。
ライオ
これなんか今までのと全然違って明るい
どれにするか迷うな・・・
色は最終的には自分の記事のイメージの色と合わせたいかな
ん？CSSが上手く反映されない
簡単に終わるかと思ったら引用枠のカスタマイズ、CSSをを普通に貼り付けてみると・・・
デフォルトから変更⇩
ライオ
なんかイマイチ上手く反映されていない・・・
できればFontAwesomeを使用したコードの方を使うことをおすすめします。また、一部のデザインではFontAwesomeが必須となっています。
これが原因かな・・・
https://saruwakakun.com/html-css/basic/font-awesome
Font Awesomeを入れてみる
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
上手く訂正できたかな？
ライオ
背景色とかカラーにしてみたら、慣れたいないのか？やっぱり違和感がある・・・
センスある引用枠見つけたらまた訂正する予定
コメント