CSSでblockquoteを引用符付きでお洒落にカスタマイズする方法

 ニュースや論文系のブログであれば、ほかのウェブサイトなどの文章を引用する機会が多いと思います。他所からのコピーですよ、ということを検索エンジンにきちんと知らせるために blockquote で囲みますが、枠線を付けたり背景色を変えるだけの単純なデザインではイマイチ味気ないものです。

 今回は引用符を使った blockquote のカスタマイズ方法を紹介したいと思います。引用とはなにか、引用をするにはどうしたらよいのかについては、以前に記事としてまとめていますので、こちらもあわせてよろしくお願いします。

画像などをまったく使わないカスタマイズ

HTML は次のようになるかと思います。cite タグは省略する人も多いですが、あったほうがより便利かと。

スタイルシートは次のとおり。ちなみに、.css ファイルが UTF-8 で保存されていないと文字化けするので注意してください。

このように表示されます。

順番に説明していきます。

position プロパティで relative を指定していますが、これは子要素(?)である before と after で position:absolute; を使うために必要なものです。これがないと表示が崩れます。cite タグを挿入するため、padding-bottom だけは大目にとっています。

共通部分は抜き出して設定。引用符が見づらい場合には、font-family で引用符だけフォントを変更することができます。なくても大丈夫です。

opacity プロパティは要素の透明度を指定するときに使用、透明度は 0.0(完全に透明)~1.0(完全に不透明)の数値で指定しますが、今回は 0.1 とかなり透明にしています。position プロパティの absolute で位置を決めているため、背景画像のようにテキストと重なる部分がでてくるからなのですが、0.2 でも結構濃いです。

after の指定が少し変なことにお気づきでしょうか。before との対称性を考えれば、次のように設定するのが自然だと思うのです。

ところが、このように指定すると表示が崩れてしまいます。Windows 7 の Google Chrome、Firefox、Internet explorer で動作確認を行いましたが、すべてで同じ現象が起きました。原因はよくわからない。

そこでいろいろと調整した結果が先ほどの指定方法です。細かい調整はお好みで。

Webアイコンフォントを使ったカスタマイズ

ブログのデザインカスタマイズにすでに Web アイコンフォントを使っているなら、こちらを利用することもできます。今回は Font Awesome を使用しました。ダウンロードはこちらからどうぞ。

公式ページからアイコンセットをダウンロードしたら、HTML ファイルと同じフォルダに保存してください。今回は CSS というフォルダを作成し、そのなかに入れています。HTML ファイルの冒頭の <head>~</head> 間に次の一行を追加するのを忘れないようにしてください。

バージョンによってフォルダ名が変わるのでダウンロードしたものに合わせてください。

先ほどの CSS を Font Awesome 用に修正します。

このように表示されます。

この方法のメリットは、フォントの設定にかかわらずブラウザ間で表示に違いがでないことです。私はこちらのほうが好きです。

WordPress の場合

WordPress を初期設定のままで blockquote を使用すると、自動で p タグが挿入されてしまいます。当然、p タグの設定が適用されるので、プレビュー画面などを見たときにとんでもない余白になっててビックリするわけですな。

設定を変更してしまうのも方法のひとつですが、個人的にはスタイルシートで対応するほうが楽だと思います。

格好良く引用できるように調整してみてください。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP