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;
}

この上記のCSSを、WordPressのメニューから、

外観→CSSの編集　を開いて、

流し込んであげればいいわけです。

これでOK！

 

と思いきや・・・・・

アイコン部分、つまり　”　ダブルクオーテーション部分は

表示されてなかったんです。

 

アイコンが表示されない

 

悩みに悩んだ結果、調べてみるとこんなサイトに記載してありました。

 

Font Awesomeがうまく表示されない。

 

引用デザインサンプル集のページ更新日が2018/08/09となって

いるので、全く古いページではないのですが、FontAwesomeの

バージョンがどんどん更新されている状況の中なので、

あり得ることなんだろうとは思いますが、

 

表示されない理由がわかった

 

 

font-family の部分の、

「5 free」がなかったために、すぐに修正したところ、無事

アイコンが表示されるようになりました。

（多分このページでもちゃんと表示されれていると思います）

これでまた一歩、このブログもデザイン化され、カスタマイズ

することができました。

参考にさせていただきましたサイト様には感謝したいと

思います。ありがとうございました。

 

参考ページ：

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

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

Font Awesomeがうまく表示されない。

 

[amazonjs asin=”4295000795″ locale=”JP” title=”いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)”]