1. ホーム
  3. 【QooQカスタマイズ】お知らせ・注意事項・チェックのBOX要素を追加する

【QooQカスタマイズ】お知らせ・注意事項・チェックのBOX要素を追加する

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

今回もBloggerの人気テンプレート「QooQ」のカスタマイズをやっていきます。他の有名なブログやデザインが凝っているサイトによく実装されている「お知らせ」、「注意事項」、「チェック」のBOX要素を実装してみたいと思います（言い方がわからないので、このような表現にしてしまいました・・・）このカスタマイズをすることでより読者の方に記事の内容を理解してもらいやすくなると思います。

QooQのテンプレートに実装するにあたり、サルワカさんのWordPressテンプレート、「SANGO」のデザインを大いに参考にさせていただきました。自分はカスタマイズ素人ですがそれっぽいものが作れたので、作成方法を記事にまとめたいと思います。


具体的にどのようなものが作れるの？

以下のようなものを作れます。サンプル兼記事の注意事項として確認いただけると幸いです。
記事の内容
  • Bloggerテンプレート「QooQ」でも、この記事に書いてある「記事の内容」、「注意事項」、「check」のようなパーツを追加することができます。
注意事項
  • Bloggerのテンプレートをカスタマイズする前にかならずバックアップを取ってください。思わぬ不具合や表示崩れになったときにもとに戻せるようにしておくことが大切です。
  • 今回のカスタマイズはBloggerテンプレート「QooQ」で行います。バージョンにより若干の差異がある場合がありますが、ご了承ください。
Check
  • このパーツを利用するためには「HTMLビュー」の画面へのコピペが必要です。
  • フォントサイズをカスタマイズしていたり、QooQのバージョンによって、表示崩れする場合がありますので適宜フォントサイズを変更してください

カスタマイズ方法

FontAwesomeの追加

このパーツを追加するには「FontAwesome」というものを追加する必要があります。head内に以下の1行を追加してください（アイコン用です）

<link href='https://use.fontawesome.com/releases/v5.6.4/css/all.css' rel='stylesheet'/>

CSSの追加

テンプレートのCSS部分に以下を追加してください。QooQのテンプレートだと「個別記事」と書いてあるエリアの一番下あたりが良いと思います（自分はそこにしました）
注意事項
  • フォントサイズを変更している場合はアイコンが若干崩れる場合がありますので、適宜黄色塗りつぶしをしている部分の値を変更して調整してみてください
/* お知らせ */
#single-content .notice {
position: relative;
padding: 1em;
background-color: #fff9e5;
margin: 3em 0;
}
#single-content .notice-title:before{
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f304';
color: #ffb36b;
padding: .5rem;
font-size: 2.5rem;
line-height: 1;
}
#single-content .notice-title {
font-weight: bold;
color: #ffb36b;
margin: 3em 0;
}
/* 注意事項 */
#single-content .attention {
position: relative;
padding: 1em;
background-color: #ffebeb;
margin: 3em 0;
}
#single-content .attention-title:before{
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f071';
color: #ff8376;
padding: .5rem;
font-size: 2.5rem;
line-height: 1;
}
#single-content .attention-title {
font-weight: bold;
color: #ff8376;
margin: 3em 0;
}
/* チェック */
#single-content .check {
position: relative;
padding: 1em;
border: solid 1px #eaebf2;
background-color: #f3f6fc;
margin: 3em 0;
}
#single-content .check-title:before{
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f14a';
color: #5ba9f7;
padding: .5rem;
font-size: 2.5rem;
line-height: 1;
}
#single-content .check-title {
font-weight: bold;
color: #5ba9f7;
margin: 3em 0;
}

記事作成時にHTMLビューで以下を追加

記事を作成する際に以下をHTMLビューに追加してください。うまくいくと表示されると思います。

<div class="notice">
  <span class="notice-title">記事の内容</span>
    <ul>
      <li>本文1</li>
    </ul>
</div>

<div class="attention">
  <span class="attention-title">注意事項</span>
    <ul>
      <li>本文2</li>
    </ul>
</div>

<div class="check">
  <span class="check-title">check</span>
    <ul>
      <li>本文3</li>
    </ul>
</div>

カスタマイズするにあたりつまづいたこと 

FontAwesomeのCSSをちゃんと追加しないとアイコンが文字化け（□表示）してしまいました。head内に正しく記述されているかを確認しましょう。

またCSSですが、適当な位置に追加したらうまく反映されませんでした。そのためQooQに最初から記載されている通り「個別記事」のエリアにCSSを追加したほうがベターです。自分は最初うまく行かなかったのですが、ちゃんと「個別記事」のエリアに追加することで解消されました。

アイコンのサイズも調整が必要でした。最初テストブログに実装してからこのブログにコピペしたのですが、アイコンが巨大になってしまいました。QooQのバージョンによるものか、自分でフォントサイズを変更していたかは忘れてしまいましたが、フォントサイズの調整でうまいこといきましたので、やってみてください。

カスタマイズの補足（アイコンの差し替え）

ちなみにですが、アイコンが気に入らないという方は変更することも可能です。FontAwesomeのFreeとなっているものなら無料で好きなアイコンに差し替えることが出来ます。その場合は以下の黄色塗りつぶし部分を変更してください。

#single-content .attention-title:before{ 
content: '\f071';
}

CSSのcontentの値をどのように変更すればよいかは以下のキャプチャを参考にしてください。FontAwesomeで利用したいアイコンをクリックするとキャプチャにあるようなページが表示されるのですが、中央部分に小さく文字コードが記載されています。この値に差し替えることで表示させることができます。
 

参考にしたサイト

今回、Bloggerテンプレートの「QooQ」にいい感じのBOX要素を追加するにあたり、以下のサイトを参考にしました。

まとめ

今回はおしゃれなサイトによくある「お知らせ」、「注意事項」、「チェック」のパーツを追加するカスタマイズ方法を紹介しました。追加するときだけHTMLビューで編集しないと行けないのがネックですが、もしHTMLビューでの編集がそれほど苦にならない方はぜひ参考にしてみてください。自分はカスタマイズの勉強をしながらですが、少しずつ記事に取り入れてみようと思います。