【はてなブログ】<blockquote>引用タグのデザインをカスタマイズするCSS

引用タグのデザインをカスタマイズするCSS

【はてなブログ】blockquote引用タグのデザインをカスタマイズしたCSSのメモ

引用タグblockquoteで囲んだ部分のデザインをカスタマイズしたCSSのメモです。 Awesome フォントを使う方法も簡単に紹介します。

はてなブログのデザインCSSに追加するだけで簡単にできます。
Awesomeフォントは、head要素に1行追加するだけです。

【はてなブログ】blockquote引用タグのデザインをカスタマイズしたCSSのメモ

準備（Awesomeフォントを使えるようにする）

設定　＞　詳細設定　＞　headに要素を追加
に1行追加します。

<link href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">

Awesomeフォントの「ダブルクォーテーション」アイコンの確認

Awesomeフォントのページを開きます。

https://fontawesome.com/

icon　＞　Free　＞「q」で検索すると、「quote-left」と「quote-right」がすぐ見つかります。

アイコンのUnicodeを確認します。

「quote-left」のUnicodeは、「f10d」
「quote-right」のUnicodeは、「f10e」

デザインCSSに追加

デザイン　＞　カスタマイズ　＞　デザインCSS
に下記コードを追加します。

/* -----引用タグ----- */
.entry-content blockquote {
    position: relative;
    padding: 10px 55px;
    box-sizing: border-box;
    color: #000000;
    background: #B9EDF8;
}

.entry-content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 10px;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    color: #39BAE8;
    font-size: 40px;
    line-height: 1;
    font-weight: 900;
}

.entry-content blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 15px;
    tex-align: center;
    content: "\f10e";
    font-family: "Font Awesome 5 Free";
    color: #39BAE8;
    font-size: 40px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

blockquote cite {
    position: relative;
    z-index: 3;
    display: block;
    text-align: right;
    color: #1F6ED4;
    font-size: 0.9em;
}

実際の表示イメージ

Markdown記法の場合

> 引用タグテストあああああああああああ
> 引用タグテストいいいいいいいいいいい

引用タグテストあああああああああああ
引用タグテストいいいいいいいいいいい

HTMLタグの場合

<blockquote>
<p>
引用タグテストあああああああああああ<br>
引用タグテストいいいいいいいいいいい
</p>
</blockquote>