reading WordPress

引用 "blockquote" のデザインを変えてみた。サイト全体の雰囲気と調和しつつ、引用の言葉がビシッとかっこよく引き立つデザインのCSSをググって…オッとこれだ(*☻-☻*)

投稿日:

IMG_0508

今日は前々から気になっていた引用 "blockquote" のデザインを変えてみることにしました。ブログを書くとき、TEDプレゼンターの言葉やRSSの記事からの引用を多用しているのに、通常タグによるなんかあまりにも素っ気ない真ん中寄せレイアウトだけではつまんなくなってきていました。もっと引用部分を引き立たせるようなデザインにしたいということで、あれこれググッて参考にさせてもらったのが以下のサイトです。

CSS-Tricks

Blockquote Examples by CSS-Tricks


オシャレなblockquoteのCSSが掲載されています。じーっと眺めているうちにちょっと引用のデザインが引き立ちすぎるかなということで次へ。

Creazy!

第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法 [C!]


最初のサイトに掲載されていたものよりも、引用マークのデザインが控えめでとりあえず試してみよということで、CSSのソースを貼っつけてみたのですがどうも私のサイトではしっくりこなかったのでまたまた次に。

ネット・在宅ワークで稼ぐアフィリエイト講座

引用(blockquote)をCSSで指定する方法


もうこのサイトが目に入った瞬間!(◎_◎)

決まったー!

上記サイトの1番上に掲載されているコードのバックグラウンドカラーを私のサイトのベースカラーグリーンの薄いのに変えて、枠線のボーダーも太くして立体感を出してみました。
こんな感じ。

IMG_0989

IMG_0987

IMG_0986

サイト全体の雰囲気と調和しつつ、引用部分がしっかりと引き立ってる感じでいいんじゃないでしょうか。まー当面はこれで行くことにしましょう( ^ ^ )/□

-reading, WordPress
-

Copyright© 英語×Mac≒時々Monetize , 2017 All Rights Reserved Powered by AFFINGER4.