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

・はてなブログで、引用タグ部分のカスタマイズをしたい。
・具体的なやり方を簡単に分かりやすく教えてほしい。

こういった疑問に答えます。

本記事の内容

はてなブログのblockquote引用タグ部分のデザインをカスタマイズする方法

この記事を書いている私は、2006年から始めて、アフィリエイト歴は13年ほど。
当ブログの他にも複数ブログを運営していて、毎月コンスタントに収益が発生しています。

こういった私が、解説していきます。

本記事の内容
blockquote引用タグ部分のデザインをカスタマイズする方法

blockquote引用タグ部分のデザインをカスタマイズする方法

デザイン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;
    font-family: "blogicon";
    content: "\f704";
    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;
    font-family: "blogicon";
    content: "\f704";
    transform: rotate( 180deg );
    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;
}