bloggerで引用ボックスをFontAwesomeとCSSで作成する方法

- April 02, 2019

なぜか上手くできない引用ボックス…
そもそもFontAwesomeを表示させたい位置に現れず、□になってしまい、全く反映されないのです。色々試してみたところ、一応真ん中にこの子がポツーンと出てきたが、どうしたら良いかわからず…。それに二重になって表示される？！

３日間くらい悩みましたが、色々調べてbloggerにも適応するようにアレンジしてみました。

AとBとCの３種類バージョンのCSSを載せます

A版は文章の色とFontAwesomeコンテンツを違う色に指定しています。

B版は文章の色とFontAwesomeコンテンツと同じカラーです。
変更できませんが、指定すればA版と同じようにできます。

C版は文章の色とFontAwesomeコンテンツと同じカラーで変更できません。
それでも良ければ、これが一番シンプルな設定ですよ。

何故このようなことになっているかというと、blogger のテンプレートによっては、SVGでの読み込みしかできないようなのです。

ブログ記事後半で説明致しますが、SVGだとdisplay: none;で疑似要素とiタグを消さねばなりません。２つコンテンツフォントが表示されてしまうのです。しかも本来表示させたい方が□…。

こちらのブログではA版のCSS引用ボックスを使用します。こんな感じで表示されます。

こちらに引用文を載せます。文章をどうぞ。
引用元タイトル

A版の場合は下記をコピーしてブログhtmlに貼り付け

<blockquote>
<p><i class="fas fa-quote-right my-gray"></i>&nbsp;ここに引用文を載せます</p>
<cite><a href=”引用元のURL” target=”_blank”>引用元タイトル</a></cite>
</blockquote>

※<i class="fas fa-quote-right my-gray"></i>はFontAwesome指定コードです。B版との違いはここですね。 はスペースです。

B版とC版の場合は下記をコピーしてブログhtmlに貼り付け

<blockquote>
<p>ここに引用文を載せます</p>
<cite><a href=”引用元のURL” target=”_blank”>引用元タイトル</a></cite>
</blockquote>

※B版でもFontAwesomeコンテンツと文章のカラーを分けることができます。
ちょっと面倒ですが、一応B版の説明下部に載せたので参考にしてみて下さい。

⑴ まずはFontAwesomeをブログに適応させる

FontAwesomeはウェブページ上で文字と同じように表示できるアイコンです。拡大してもぼやけず、色もサイズ・アニメーションなど簡単にアレンジできます。

自分のサーバー負荷を軽減できるCDNを用いて適応させます。
CDNを利用すると、専用サーバーにある画像やフォントなどのデータを読み込み、Webサイト上に表示できます。

セッティング方法

①[テンプレート]⇒[HTMLの編集]にあるファイル中に<head>～</head>の間に下記タグを挿入し、CDNからJavaScriptを読み込みましょう。

<script>
  FontAwesomeConfig = { searchPseudoElements: true };
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>

②公式から好きなデザインを選ぶ。

公式 FontAwesome 5 こちらで検索して、各アイコンの種類を示すコードをコピーします。画像のように２種類あるので気をつけて下さい。

また、濃いグレー色のアイコンが無料です。

⑴ f10d
各デザインの種類を表しており、CSSの疑似要素で使う時に使います。
今回の引用ボックスで使用します。

⑵ <i class〜></i>
囲ったコードは直接ブログ記事のhtmlに、直接貼り付けできます。

<i class="fas fa-cloud-download-alt"></i>この場合は下記のようにクラウドマークです

チェックマークなどもありますよ。

他にもこんな感じにたくさんあります！

大きさや色なども自由に変更できます。下記サイトは大変わかりやすく描いてくださってます。是非参考にしてみて下さい。

参考サイト

FontAwesomeが表示されない？注意点

CSSの疑似要素:beforeや:afterを使用して表示する場合、注意点が必要です。

font-familyは "Font Awesome 5 Solid" にする
display: none;で疑似要素とiタグを消すこと
font-familyで Solid, Regular, Brandsを指定する

font-family指定は使用するフォントの種類によって異なりますので、どの種類か確認した上で指定して下さい。 display: none;で消す理由は、SVGに置換されるため疑似要素があることでアイコンが２重に表示されるためです。

.svg-inline--fa（SVGタグ）に大きさや色を指定すると全コンテンツフォントに適応されます。

⑵ A版引用ボックスを貼る

下記のような感じです。

ここに引用文を載せます
引用元タイトル

CSSはこのように指定して下さい。

/* PC版 引用ボックス*/
@media screen and (min-width: 1200px){
blockquote {
    text-align: start;
    font-size: 18px;
    position: relative;
    padding: 10px 15px 10px 15px;
    box-sizing: border-box;
    background: #f5f5f5;
}

blockquote::before{
    top: 15px;
    left: 15px;
    vertical-align: middle;
}

blockquote p {
    padding: 0;
    margin-top:14px;
    margin-bottom:0px;
    line-height: 1.7;
}

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



/*スマホ版 引用ボックス*/
@media only screen and (min-width:320px) and (max-width:479px){
blockquote {
    text-align: start;
    font-size: 18px;
    position: relative;
    padding: 0.5em 1em;
    margin: -1em 0.9em;
    box-sizing: border-box;
    background: #f5f5f5;
    color: #777777;
}

blockquote::before{
    top: 15px;
    left: 15px;
    vertical-align: middle;
    line-height: 1;
}

blockquote p {
    padding: 0;
    margin-top:14px;
    margin-bottom:14px;
    line-height: 1.7;
}

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

.my-gray {
    color: #d3d3d3;
}

⑶ B版引用ボックスを貼る

下記をカスタマイズに挿入すればOKです。各自調整してみて下さい。

/* PC版 引用ボックス*/
@media screen and (min-width: 1200px){
blockquote {
    text-align: start;
    font-size: 18px;
    position: relative;
    padding: 10px 15px 10px 15px;
    box-sizing: border-box;
    background: #f5f5f5;
    color: #777777;
}

blockquote::before{
    display: none;
    content: "\f10d";
    font-family: "Font Awesome 5 Solid";
    position: absolute;
    top: 15px;
    left: 15px;
    vertical-align: middle;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 0;
    margin-top:14px;
    margin-bottom:0px;
    line-height: 1.7;
}

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

.svg-inline--fa{
　color: #dcdcdc;
}}



/*スマホ版 引用ボックス*/
@media only screen and (min-width:320px) and (max-width:479px){
blockquote {
    text-align: start;
    font-size: 18px;
    position: relative;
    padding: 0.5em 1em;
    margin: -1em 0.9em;
    box-sizing: border-box;
    background: #f5f5f5;
    color: #777777;
}

blockquote::before{
    display: none;
    content: "\f10d";
    font-family: "Font Awesome 5 Solid";
    position: absolute;
    top: 15px;
    left: 15px;
    vertical-align: middle;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 0;
    margin-top:14px;
    margin-bottom:14px;
    line-height: 1.7;
}

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

前半に説明したフォントカラーの件

引用ボックスのFontAwesome を薄いグレー色にしたかったのですが、SVGにきかせているとやはり特定箇所のCSS指定できない…。そのため、B版の場合は全FontAwesomeに同色指定したので、記事文面に挿入する際は、先ほどと同様の下記タグmy-grayを毎回追加して下さい。このような感じです。

<i class="fas fa-quote-right my-gray"></i>

A版用色指定のために追加するCSS

/*FontAwesome 引用ボックスのために色指定*/
.svg-inline--fa{
    color: #d3d3d3;
}

/*FontAwesome 引用ボックスが薄いグレーなので記事と同色指定*/
.my-gray {
    color: #636363;
}

Search This Blog

Daphne