はてなブログの引用デザインをはてな純正アイコンでカスタマイズ

hatenaロゴ

以前に、はてなブログの引用デザインを画像でカスタマイズしたのですが、はてなの純正アイコンにある引用符のアイコンをなんとか利用できないかといろいろやってみました。

参考になるブログ・Webサイト
ZENO-TEAL - カスタマイズに便利な、はてなブログで使えるアイコンフォント一覧

(設定→カスタマイズ→デザインCSSにコードを入力)

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

/* 引用符のアイコン */
.entry-content blockquote:before,
.entry-content blockquote:after {
    position: absolute;
    font-family: blogicon; /* 引用符のアイコンの設定 */
    font-size: 18px;
    font-weight: normal;
    content: "\f704";
    color: #fff;
    display: inline-block; /* 引用符のアイコンの背景 */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ddd;
    line-height: 32px;
    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サイト
mororeco - before, after 擬似要素でblockquoteを表現する

ウィキペディア(英: Wikipedia)は、ウィキメディア財団が運営しているインターネット百科事典である。コピーレフトなライセンスのもと、サイトにアクセス可能な誰もが無料で自由に編集に参加できる。世界の各言語で展開されている。

引用:ウィキペディア

はてなの純正アイコン(Webフォント)より画像のほうがコードがすっきりしている...。