デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

引用タグをデザインする

他から文章を引用した場合は、
blockquoteタグを使用しますが、
現在、何もスタイルを指定していないので、
blockquoteタグで引用文を追加しても何も装飾がありません。

そこで、今日は引用タグのスタイルを変更してみようと思います。

スポンサーリンク

style.cssにblockquoteのスタイルを追加

blocquoteタグのスタイルをstyle.cssに追加します。
私は、 before擬似要素、after擬似要素を使って、
引用符のマークをつけました。

・before擬似要素・・・要素の直前に内容を挿入
・after擬似要素・・・要素の直後に内容を挿入

あとは、背景色や配置などを自分の好みにあったデザインに調整してあげれば
完成です。
(以下、私が追加したスタイル)

以下が完成した引用タグのデザインです。

テスト、テスト、テスト、テスト

まとめ

以上、引用タグのデザイン方法でした。
参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン