「wordpress」タグアーカイブ

blockquoteタグをデザインする

WordPressで記事を書くときに、引用して書くことって

よくあることだとは思いますが、引用タグ　blockquote　を、

そのまま使うのもありではありますが、色んなサイトを見て

みると、引用された部分がデザインされているわけですよ。

かっこいいわけですよ。

そこで、はっきりと引用しているとわかりやすくするには

どうしたらよいか、グーグルで調べてみると、CSSでデザインで

できるということがわかったわけです。

だけど、CSSでデザインなんてはっきり言って敷居がかなり

高くなってます。

昔ほんのちょっとかじってはみたけど、すっかり

忘れてます（汗）

いいデザインはないものかと探していたところ、

このサイトに当たりました。

CSSで作る！魅力的な引用デザインのサンプル30（blockquote）

30もの魅力的な引用デザインが有り、印象はどれも

「かっこいい」！

CSSだけでこんなデザインができるんだと思うと、すごいと

同時に、このサイト様のデザインセンスに感謝したいと

思います！

もちろん、どれもいいとは思うのですが、それぞれのサイトの

雰囲気や色などデザインもあるので、私が選んだのはこれ！

サイト全体が黒が多いのでこのデザインに。

ただ、このデザインを使用する際には、FontAwesomeという

WEBアイコンを使用する必要があります。

Fontawesomeとは？

どうやって適用するのか？ってのもくわしく、さるワカさんに

掲載されていました。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

このページをじっくり読めば、WEBアイコンをサイト上に

適用させることができます。バージョンもどんどん上がって

いるようで、フリーで使用することができますが、有料になると

アイコンにも幅が広がって、いろんなアイコンを数多く

使うことができるようになります。

WordPress上に引用デザインを適用させる

そのためには、

blockquote {
position: relative;
padding: 7px 16px;
box-sizing: border-box;
font-style: italic;
color: #585858;
border: solid 3px #585858;
}
blockquote:before{
display: inline-block;
position: absolute;
top: -20px;
left: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
vertical-align: middle;
text-align: center;
content: “\f10d”;
font-family: FontAwesome;
background: #585858;
color: #FFF;
font-size: 22px;
}

blockquote:after{
display: inline-block;
position: absolute;
bottom: -20px;
right: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
vertical-align: middle;
text-align: center;
content: “\f10e”;
font-family: FontAwesome;
background: #585858;
color: #FFF;
font-size: 22px;
font-weight: 900;
}

blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
}

blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}