カラーひよこのブログ

週休5日のセミリタイア暮らし 🍵🐤

ブログ記事の「引用」部分のデザインをコピペで簡単にカスタマイズ

この前、当ブログの見出しと目次、関連記事部分のカスタマイズを行いました。

このブログで使っているデザインテーマを選んだのは、かなりシンプルであまりいじる必要がないだろう・・という理由なんだけども(めんどくさそうだから)、少しいじってみたらダンチ良くなってカスタマイズも面白いな、と。

上の記事を見返してみると、次は「引用」部分かな・・と、カスタマってみました。カスタマイズの記事ではコピペするコード部分、読書感想のエントリーなんかでは著者の文章を引っ張ってきて用いる「引用」という機能を頻繁に使います。

HTML コードの中の引用タグ「blockquote」 を CSS でいじりました。例によって、細かい部分をお好みで修正する以外はコピペです。  

✅  「はてなブログ」でのカスタマイズです

✅  CSS を修正する際、復元できるようにバックアップを取っておいてください

✅   はてなブログのデザインテーマによっては再現できない例もあり

当ブログにインストールしているのは「Blank」というテーマ。

 

こちらがカスタマイズ前。

ブログ・引用・カスタマイズ前

カスタマイズ後。

ブログ・引用・カスタマイズ後

元のイタリック体(斜体)も引用っぽいのですが、かっちり傾きを外してます。背景の座布団部分は薄いグレーから、当ブログの目次部分のデザインでも使用している薄い黄色に。引用部分内冒頭に付く「引用符」の記号も変更してます。

以下のコードを CSS 部分に貼り付けるとこうなります。

.entry-content blockquote {
position: relative;
padding: 10px 15px 10px 50px;
box-sizing: border-box;
background: #fffacd;
color: #808080;
font-style: normal;
border-radius:8px;/* 数字が大きいほど丸くなる */
}
.entry-content blockquote:before{
display: inline-block;
position: absolute;
top: 18px;
left: 10px;
content: "“";
font-family: MS PGothic;
color: #a9a9a9;
font-size: 65px;
line-height: 1;
}

.entry-content blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
}

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

コード内の日本語の説明文はほぼ省略・・解読してお好みで余白やサイズを調整してくだされ。。

今回もサルワカさんの記事を参考にしました。

「引用符」記号のフォント選びはこちらであれこれ試して決めました。

ブログは結局コンテンツで決まると思うのですが「内容が無いよー!!」的なブログなので、 せめて見てくれは気にしてちょくちょくいじっていきたいと思います 🐤

 

にほんブログ村 ライフスタイルブログ セミリタイア生活へにほんブログ村 ライフスタイルブログ ゆるい暮らしへにほんブログ村 地域生活(街) 東京ブログ 多摩地区情報へ

↓ 読者登録と Twitter その他 SNS のフォローはこちらから(^人^)