引用のCSSを整える&記号はHTML特殊文字を使いましょう

この記事は約2分で読めます。

2017-03-20WordPressカスタマイズ

OpenClipart-Vectors / Pixabay

pixabayで「引用」と打って検索したら、なぜか「陰陽」が出てきました。
どういう検索アルゴリズムしているんだろう……。

本記事ではお洒落な引用CSSを掲載しているサイトと、使うときの注意点について述べます。

CSSだけで引用を変えてみる

参考にしたのはこちらのサイト

画像を使うパターンと両方あります。
引用のCSSを扱ったサイトは結構あるのですが、意外なほど種類がないんですよね。
こういうのはCSSをどう組むかというよりデザインをどう組むかが重要。
こちらのは一目見て真似たいなあと思いました。
よかったら見に行ってみて下さい。

で、私が作ったのがこちら。

See the Pen 引用 by 天満川鈴 (@kimoota) on CodePen.

背景と文字色を微妙に変えて、ほんのりと背景から区分け。
beforeに引用符をつけてます。
あと幅が固定なのを可変に変更します。

HTML特殊文字

参考記事のCSSは、そのままだとブラウザがEDGEだとクォーテーションマークが文字化けします。
そのため16進数表記に変更する必要があります。

特殊文字の一覧表はこちら。

CSSに記述する場合は最初の3文字を「\00」に変更して;を除去します。

参考記事はこちら

まとめ

解答者の写真
有名テーマの引用CSSは、どれもグレーでシンプルなもの
はっきり引用部分と示すことが著作権法上大事だからそれでいいんだけど……
作りが凝っているサイトは他の記事にも興味惹かれるし、ちょっとだけ手間かけてみない?

Author:天満川 鈴

小説家になりたい駄文書き、元公安調査庁職員。
国家一種経済職→入庁。イスラム過激派などの国際テロ、北朝鮮を担当。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを は週刊誌で紹介され、さらに文壇から「江戸川乱歩賞獲れた」と絶賛。素人の小説としては異例の反響を呼びました。
無料公開してますので是非読んでみてください!