はてなブログの引用デザインをはてなのアイコンフォントで表示

hatenaロゴ

以前に、はてなブログの引用デザインを画像で表示したのですが、はてなのアイコンフォントにある引用符のアイコンをなんとか利用できないかといろいろやってみました。

（設定→カスタマイズ→「デザインCSS」にコードを入力）

CSS
/* 引用全体 */
.entry-content blockquote {
    position: relative;
    margin: 20px 0;
    padding: 16px 52px;
    border-radius: 6px;
    background: #fff;
}

/* 引用符のアイコン */
.entry-content blockquote:before,
.entry-content blockquote:after {
    position: absolute;
    /* 引用符のアイコンの設定 */
    font-family: blogicon;
    font-size: 18px;
    content: "\f704";
    color: #fff;
    line-height: 36px;
    /* 引用符のアイコンの背景 */
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ccc;
    text-align: center;
}

/* 引用符のアイコン（左上） */
.entry-content blockquote:before {
    top: 10px;
    left: 10px;
}

/* 引用符のアイコン（右下） */
.entry-content blockquote:after {
    right: 10px;
    bottom: 10px;
    transform: rotate(180deg);
}

/* 引用ボタンを非表示 */
.requote-button {
    display: none !important;
}

まず、引用符のアイコン（）が左しかないので、そのアイコンを180度回転させて（transform:rotate(180deg)）、右の引用符として使うことにしました。

参考になるブログ・Webサイト
コピペで簡単 CSS で要素を回転させる方法 - by Takumi Hirashima

次に、引用符のアイコンの背景を丸くして、その真ん中にアイコンを表示します。
幅（width）と高さ（height）を指定するので、（display:inline-block）にします。

参考になるブログ・Webサイト
クルーデザイン - CSS 丸、正円の中に数字・文字を書く！（サンプル付き）

最後に、引用符のアイコンの配置ですが、引用全体（blockquote）を相対位置（position:relative）に、アイコンを絶対位置（position:absolute）にします。

参考になるブログ・Webサイト
Web白描 - 擬似要素：before / after