Someday Somewhere

A little something to say in my everyday life

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

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

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

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

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

f:id:tsukisai:20190124093938p:plain

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

やったことと言えば、
1)背景色と文字色を変更
2)上記コードを書き加える
3)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;
}

サルワカさんのサイトにあるコードを利用して、自分のサイトにあった色やデザインに作り変えてみても楽しいかもしれませんね。