本記事ではお洒落な引用CSSを掲載しているサイトの紹介。
そして、CSSを書く際の注意点について述べます。
CSSだけで引用を変えてみる
参考にしたのはこちらのサイト
画像を使うパターンと両方あります。
引用のCSSを扱ったサイトは結構あるのですが、意外なほど種類がないんですよね。
こういうのはCSSをどう組むかというよりデザインをどう組むかが重要。
こちらのは一目見て真似たいなあと思いました。
よかったら見に行ってみて下さい。
で、私が改良したのがこちら。
See the Pen 引用 by 天満川鈴 (@kimoota) on CodePen.
背景と文字色を微妙に変えて、ほんのりと背景から区分け。
beforeに引用符をつけてます。
あと幅が固定なのを可変に変更します。
記述にはHTML特殊文字を使う
参考記事のCSSは、そのままだとブラウザがEDGEだとクォーテーションマークが文字化けします。
そのため16進数表記に変更する必要があります。
HTML特殊文字の一覧表はこちら。
CSSに記述する場合は最初の３文字を「\00」に変更して；を除去します
参考記事はこちら
まとめ
有名テーマの引用CSSは、多くがグレーでシンプルなもの
それで用は足すのだけど……
作りが凝っているサイトは他の記事にも興味惹かれるもの。
ちょっとだけ手間かけて、他のサイトと差をつけませんか？
私はConoHa以外を勧めない。
2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。
レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。
※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。