【blogger設定】コピペでできる！QooQの引用デザインのカスタマイズ

bloggerテンプレート「QooQ」を使用しています

今回は引用のデザインをカスタマイズしようと思います

引用のデザインはデフォルトの状態だと、とてもシンプルで少しわかりにくいかなと思いました

そこで文章を引用したときのカスタマイズを行いました

Enterキーを何回か押すと以下の画像のように黄色くハイライトされた箇所が出てくるかと思います

この箇所が引用のデザインに関係する箇所です

ここを変更すれば表示が変わります

以下のようにblockquoteの箇所は二つありますので注意です

#single-content blockquote{
margin: 1em;
display: flex;
}
#single-content blockquote:before{
content:'\201D';
font-size: 400%;
margin-top: -.25em;
line-height: 1;
}

今回もネットから引用デザインを探しました

サルワカさんの
CSSで作る！魅力的な引用デザインのサンプル30（blockquote） 

このサイトを参考にしました

余談ですが、はじめサルワカではなくでサルカワだと思ってこのサイトを見ていましたが
よく見たら違っていてびっくりしました
かわいいサルからとっているのかと思いました

そんなわけでサイトに載っているコードをコピーします

コピーするのは｛　　｝の中のみです
コピーしたものを下記の黄色いところに張り付けましょう

#single-content blockquote{
margin: 1em;
display: flex;
}
#single-content blockquote:before{
content:'\201D';
font-size: 400%;
margin-top: -.25em;
line-height: 1;
}

サイトを見てると「blockquote p」や「 blockquote cite 」のコードが乗っていますが
私は使わなかったので無視しました

以下が今回私が張り付けたコードです

#single-content blockquote {
    position: relative;
    padding: 10px 15px 10px 60px;
    box-sizing: border-box;
    background: #efefef;
    color: #555;
}
#single-content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 18px;
    left: 15px;
    content: "\f10d";
    font-family: FontAwesome;
    color: #cfcfcf;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
}

さあこれで引用のカスタマイズが終わりました
自分の好きなデザインに変更しましょう

ちなみに

ちなみにCSSに追加でもデザインを適用できますが、
試したところ上記のHTMLコードが残っていると、「”」このマークのフォントが変わってしまうようです

私にはよくわからなかったので、HTMLのコピペで今回は対処しました

まとめ

今回は引用のデザインのカスタマイズを行いました

コピペで色々なデザインにできるので、自分の気に入ったものを見つけてみてください

どんどんカスタマイズをしていくと自分のサイトという感じが出てきますね

これからも工夫していきたいと思います