ニュースや論文系のブログであれば、ほかのウェブサイトなどの文章を引用する機会が多いと思います。他所からのコピーですよ、ということを検索エンジンにきちんと知らせるために blockquote で囲みますが、枠線を付けたり背景色を変えるだけの単純なデザインではイマイチ味気ないものです。
今回は引用符を使った blockquote のカスタマイズ方法を紹介したいと思います。引用とはなにか、引用をするにはどうしたらよいのかについては、以前に記事としてまとめていますので、こちらもあわせてよろしくお願いします。
引用を活用してWordPressの記事の品質をアップしようぜ！ | Naokix.net
画像などをまったく使わないカスタマイズ
HTML は次のようになるかと思います。cite タグは省略する人も多いですが、あったほうがより便利かと。
1 2 3 4 5 6 | <blockquote> から揚げにする食材により下処理として使用するまぶし粉には違いがある。一般的には小麦粉（薄力粉）や片栗粉（スターチ）がベースになる。食材によりあるいは各店舗や家庭のレシピによりスパイスや食塩などを加えたものを使用する。 <cite> <a href="#">から揚げ - Wikipedia</a> </cite> </blockquote> |
スタイルシートは次のとおり。ちなみに、.css ファイルが UTF-8 で保存されていないと文字化けするので注意してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | blockquote { position: relative; padding: 25px; padding-bottom: 40px; border: 1px solid #CCC; } blockquote::before, blockquote::after { font-family: ＸＸＸＸＸ; font-size: 120px; position: absolute; opacity: .1; } blockquote::before { content: '“'; top: 0px; left: 0px; } blockquote::after { content: '”'; line-height: 0em; bottom: -15px; right: 0px; } cite { position: absolute; bottom: 15px; right: 30px; } |
このように表示されます。
順番に説明していきます。
1 2 3 4 5 6 | blockquote { position: relative; padding: 25px; padding-bottom: 40px; border: 1px solid #CCC; } |
position プロパティで relative を指定していますが、これは子要素(？)である before と after で position:absolute; を使うために必要なものです。これがないと表示が崩れます。cite タグを挿入するため、padding-bottom だけは大目にとっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | blockquote::before, blockquote::after { font-family: ＸＸＸＸＸ; font-size: 120px; position: absolute; opacity: .1; } blockquote::before { content: '“'; top: 0; left: 0; } blockquote::after { content: '”'; line-height: 0em; bottom: -15px; right: 0; } |
共通部分は抜き出して設定。引用符が見づらい場合には、font-family で引用符だけフォントを変更することができます。なくても大丈夫です。
opacity プロパティは要素の透明度を指定するときに使用、透明度は 0.0（完全に透明）～1.0（完全に不透明）の数値で指定しますが、今回は 0.1 とかなり透明にしています。position プロパティの absolute で位置を決めているため、背景画像のようにテキストと重なる部分がでてくるからなのですが、0.2 でも結構濃いです。
after の指定が少し変なことにお気づきでしょうか。before との対称性を考えれば、次のように設定するのが自然だと思うのです。
1 2 3 4 5 | blockquote::after { content: '”'; bottom: 0; right: 0; } |
ところが、このように指定すると表示が崩れてしまいます。Windows 7 の Google Chrome、Firefox、Internet explorer で動作確認を行いましたが、すべてで同じ現象が起きました。原因はよくわからない。
そこでいろいろと調整した結果が先ほどの指定方法です。細かい調整はお好みで。
Webアイコンフォントを使ったカスタマイズ
ブログのデザインカスタマイズにすでに Web アイコンフォントを使っているなら、こちらを利用することもできます。今回は Font Awesome を使用しました。ダウンロードはこちらからどうぞ。
Font Awesome, the iconic font and CSS toolkit
公式ページからアイコンセットをダウンロードしたら、HTML ファイルと同じフォルダに保存してください。今回は CSS というフォルダを作成し、そのなかに入れています。HTML ファイルの冒頭の <head>～</head> 間に次の一行を追加するのを忘れないようにしてください。
1 | <link rel="stylesheet" type="text/css" href="./css/font-awesome-4.7.0/css/font-awesome.min.css"> |
バージョンによってフォルダ名が変わるのでダウンロードしたものに合わせてください。
先ほどの CSS を Font Awesome 用に修正します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | blockquote { position: relative; padding: 25px; padding-bottom: 40px; border: 1px solid #CCC; } blockquote::before, blockquote::after { font-family: 'FontAwesome'; font-size: 30px; position: absolute; opacity: .1; } blockquote::before { content: '\f10d'; top: 10px; left: 10px; } blockquote::after { content: '\f10e'; bottom: 10px; right: 10px; } cite { position: absolute; bottom: 15px; right: 30px; } |
このように表示されます。
この方法のメリットは、フォントの設定にかかわらずブラウザ間で表示に違いがでないことです。私はこちらのほうが好きです。
WordPress の場合
WordPress を初期設定のままで blockquote を使用すると、自動で p タグが挿入されてしまいます。当然、p タグの設定が適用されるので、プレビュー画面などを見たときにとんでもない余白になっててビックリするわけですな。
1 2 3 4 5 6 7 8 9 10 | <blockquote> <p> (引用文) </p> <cite> <a href="#"></a> </cite> </blockquote> |
設定を変更してしまうのも方法のひとつですが、個人的にはスタイルシートで対応するほうが楽だと思います。
1 2 3 | blockquote p { margin: 0; } |
格好良く引用できるように調整してみてください。
Comment