引用符デザインをカスタマイズ

当ブログはMinimalismというテーマを使っています。今まで、ちょこちょことカスタマイズしてきましたが、今回は引用符のデザインを変えることにしました。

「引用符カスタマイズ」等の言葉で検索すると必ずと言っていいほど登場するサイトさん（↓）。このサイトさんのデザインを参考又は使用されている方も多いと思います。 saruwakakun.com

そういう私も参考にさせて頂きました。

また、はてなブログの場合は以下のコードを書き加えるといいとまで書いてあり、本当に感謝です。

f:id:tsukisai:20190124093938p:plain

ということで、今回、実際に貼り付けたコードがこれ（↓）。

やったことと言えば、
１）背景色と文字色を変更
２）上記コードを書き加える
３）cssに貼り付ける
の三つだけ。

.entry-content blockquote {
position: relative;
padding: 5px 12px 5px 56px;
box-sizing: border-box;
font-style: italic;
color: #464646;
background: #fff0f0;
}

.entry-content blockquote:before{
display: inline-block;
position: absolute;
top: 50%;
left: 10px;
width: 36px;
height: 36px;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
text-align: center;
content: "\f10d";
font-family: FontAwesome;
color: #FFF;
font-size: 20px;
line-height: 36px;
background: #ff9d9d;
border-radius: 50%;
font-weight: 900;
}

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

.entry-content blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}