引用タグをデザインする
他から文章を引用した場合は、
blockquoteタグを使用しますが、
現在、何もスタイルを指定していないので、
blockquoteタグで引用文を追加しても何も装飾がありません。
そこで、今日は引用タグのスタイルを変更してみようと思います。
style.cssにblockquoteのスタイルを追加
blocquoteタグのスタイルをstyle.cssに追加します。
私は、 before擬似要素、after擬似要素を使って、
引用符のマークをつけました。
・before擬似要素・・・要素の直前に内容を挿入
・after擬似要素・・・要素の直後に内容を挿入
あとは、背景色や配置などを自分の好みにあったデザインに調整してあげれば
完成です。
（以下、私が追加したスタイル）
|
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 |
/* 引用 */ blockquote{ background-color: #ddd; padding: 1em 1em 0.5em; position: relative; border: 2px solid #d7d7d7; margin: 0 1em 1.5em; } blockquote:before{ content: "“"; font-size: 400%; line-height: 1em; font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif; color: #999; position: absolute; left: 5px; top: 0; } blockquote:after{ content: "”"; font-size: 400%; line-height: 0em; font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif; color: #999; position: absolute; right: 5px; bottom: 0; } |
以下が完成した引用タグのデザインです。
テスト、テスト、テスト、テスト
まとめ
以上、引用タグのデザイン方法でした。
参考になれば幸いです。
スポンサーリンク
飲食店用WordPress無料テーマ「InomaRestaurantBasic」
飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。
ブログ用WordPress無料テーマ「chameleon(カメレオン)」
WordPressテーマ（chameleon）は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。 初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください！
士業用WordPress無料テーマ「InomaExpertBasic」
士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。
