はてなブログの「引用デザイン」をほぼコピペだけでカスタマイズ
今使用中のはてなブログのデザインテーマは、引用時のデザインが非常にシンプルで飾り気のない標準タイプなので何時かはカスタマイズしようと思いつつ、先延ばしにしていたので手を付けることにした。
引用デザインの仕方
blockquote {
position: relative;
padding: 10px 10px 10px 32px;
box-sizing: border-box;
color: #464646;
background: #F9F9F9;
}blockquote:before{
display: inline-block;
position: absolute;
top: 0;
left: 0;
content: "\f10d";
font-family: FontAwesome;
color: #e0e0e0;
font-size: 22px;
line-height: 1;
z-index: 2;
font-weight: 900;
}blockquote:after{
position: absolute;
content: '';
left: 0;
top: 0;
border-width: 0 0 40px 40px;
border-style: solid;
border-color: transparent #ffffff;
}blockquote p {
position: relative;
padding: 0;
margin: 10px 0;
z-index: 3;
line-height: 1.7;
}blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
このコードをデザインのカスタマイズにある『デザインCSS』にコピペ。そうすると上記のような形で引用がデザインされる。
今回使用している引用デザインには、Font Awesomeというのを使用している。なので、表示させるために下記のコードを設定の詳細設定にある『headに要素を追加』に書き足す必要があります。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
以上で引用デザインの仕方は終わりです。他のデザインの仕方などを知りたい場合は、
こちらの方でたくさん紹介されているので参考になると思います。
最後にFont Awesomeについて詳しく知りたい場合は、検索して調べることをおすすめします。