1. ホーム
  3. 【QooQカスタマイズ】引用（blockquote）タグのデザイン変更

【QooQカスタマイズ】引用（blockquote）タグのデザイン変更

本ページはプロモーションが含まれています

 


久しぶりにBloggerのテンプレートのカスタマイズをします。今回は自分が使っているテンプレート、「QooQ」のカスタマイズをします。「QooQ」の引用タグ（blockquote）はデフォルトの状態だと非常にシンプルで、引用している感じが分かりづらかったので、他のサイトでもよく見るようなデザインに変更してみたいと思います。


カスタマイズの前に必ず確認してください

Bloggerのテンプレートをカスタマイズする前にかならずバックアップを取ってください。思わぬ不具合や表示崩れになったときにもとに戻せるようにしておくことが大切です。

今回のカスタマイズはBloggerテンプレート「QooQ」で行います。バージョンにより若干の差異がある場合がありますが、ご了承ください。

引用タグ（blockquote）のカスタマイズ

こちらのデザインはサルワカさんの「2. 引用符を横につけた場合」のカスタマイズを参考にさせていただきました。

管理画面 ＞ テーマ ＞ HTMLの編集 と進み、[Ctrl+F]、もしくは[Command+F]で「blockquote」と入力し、「変更前」の箇所を見つけたら以下のように変更します。

変更前

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

変更後

#single-content blockquote{
    position: relative;
    padding: 10px 15px 10px 50px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}
#single-content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: -3px;
    content: '\201D';
    font-family: sans-serif;
    color: #cfcfcf;
    font-size: 90px;
    line-height: 1;
}

引用（blockquote）タグ カスタマイズの補足

サルワカさんのサイトのCSSをそのまま適用すると引用符「"」の部分が文字化けしてしまいました。そのため、以下のようにアレンジしました。
※QooQのデフォルトの引用タグのCSS記述がこのようになっていたので書き換えた感じです。

#single-content blockquote:before{
content: "“";
}

#single-content blockquote:before{
content: '\201D';
}

また今回はFontawesomeを使用しない場合でカスタマイズしてみました。すでにFontawesomeを導入済みの方はそちらを活用しても良いかもしれません。

まとめ

今回はQooQの引用（blockquote）タグをカスタマイズしてみました。引用タグをちゃんとカスタマイズしないといけないなーと思いつつ後回しにしていましたが、サルワカさんのサイトを参考にしながらやってみたらめちゃくちゃ簡単にできました。同じように引用タグのカスタマイズをしようと思っていた方がいましたら参考になれば幸いです。