2022年6月9日木曜日

03【Blogger Materiapollo】引用のブロックをカスタマイズする

event_note6月 09, 2022

Materiapollo標準の引用だと、少し見にくいのでカスタマイズしようかと思います。

 

引用のカスタマイズ

変更前

何も囲われていないので、引用という事がわかりにくい。



変更後


変更方法

追記する場所

 Posts(記事のCSSがある所?)の一番下、/* Sidebar Content---- というコメントの上に追記します。


 

 追記する内容

.post-body blockquote {
  background-color: #fafbfc;
  border: 1px solid #ccc;
  margin: 2em 0;
  padding: 20px 3.5em;
  position: relative;
}

.post-body blockquote::before, .post-body blockquote::after {
  color: #C8C8C8;
  font-family: serif;
  position: absolute;
  font-size: 300%;
}
.post-body blockquote::before {
  content: "\201C";
  line-height: 1.1;
  left: 10px;
  right: 10px;
  top: 0px;
}
.post-body blockquote::after {
  content: "\201E";
  line-height: 1.1;
  right: 10px;
  bottom: 0px;
}

引用文の前後にダブルクォーテーションのマークを表示させるようにしました。