Bloggerテンプレート「QooQ」のカスタマイズ方法と参考にしたサイト一覧

Bloggerブログのカスタマイズについて、実際にカスタマイズを行った方法や、参考にさせていただいた情報サイトやブログをまとめています。

ブログテンプレート

ブログデザインは、ラムネグさんのテンプレート「QooQ（クーク）」を利用していました。

これ以降でご紹介するカスタマイズ方法は、全てQooQのテンプレートに対して実施したものとなります。

シンプルで速い日本語bloggerテンプレート「QooQ」の紹介！

見出しデザインの変更

（2019/11/7 更新）

見出し（h3,h4タグ）を、QooQテンプレートで初期設定されているデザインから変更しました。

デザインは、サルワカさんの見出しデザイン例を参考にさせていただきました。

サルワカさんのサイトでは、デザイン例と一緒にCSSコードも公開いただいており、コードをコピペで入力するだけでデザイン変更ができてしまうという、初心者には大変優しいサイトです…！！！

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

QooQテンプレートでは、「#single-content h3」や「single-content h4」がそれぞれ見出しに該当するコードなので、このコードの中をサルワカさんのCSSコードをコピペで変更する方法で実施しました。

目次自動生成

記事を作成すると、記事本文に自動で目次が表示される機能をカスタマイズで追加しました。

一度設定してしまえば、あとは記事を書くだけで目次ができあがってしまうという超優れモノ…！

このカスタマイズについては、以下の個別記事にまとめましたのでご覧ください。

パンくずリストと関連記事にラベルの全項目を表示

QooQ標準の仕様では、複数のラベルを設定した場合でも、パンくずリストには最後のラベルのみが表示されます。

そのため、記事欄最下部に表示される関連記事についても、1つのラベル項目のみに紐付いており、関連記事に上手く表示されないことがあります。

当ブログでも、1つの記事に複数のラベルを設定していますので、パンくずリストと関連記事にラベルの全項目を反映させるように変更しました。

【 QooQ カスタマイズ 】 パンくずリストと関連記事にラベルすべての要素を追加する

トップへ戻るボタンの設置

記事を読み進めて下にスクロースした時に、すぐにページのトップまで戻れるよう、トップへ戻るボタンを右下に表示しました。

簡単に設置できる！Blogger ブログでトップへ戻るボタンを設置する

ブログカードの表示

リンクを貼り付ける際、アイキャッチ画像・記事タイトル・テキストなどの要素を含めて1枚のカードのように表示できるブログカード。

キャッチーな見た目で読者の目にとまりやすく、クリックされやすいというメリットがあります。

しかしながら、Bloggerの標準機能ではブログカード表示機能は備わっていません。

そんなBloggerでもブログカードの表示させる方法がありましたので、詳細を別記事にまとめました。

記事下に表示される関連記事のサムネイル画像を円から四角形に変更

QooQテンプレートの初期設定では、記事下に表示される関連記事のサムネイル画像は円形で表示されています。

円形では隠れる部分が多くなることがかねてより気になっていましたが、サムネイルに文字も入れるようになり、文字が見切れてしまうため、円形であることが更に顕著に気になってしまっていました…。

サムネイルの表示を円形から四角形にすることで、見切れることがなくなりました。

なお、この記事の公開当初は正方形に変更する方法しかわからず長方形表示ができなかったので、サムネイル画像は依然見切れていました。

公開後に記事を読んでいただいた方からコメントで長方形にする方法をご教示いただき、今は正方形、長方形どちらにも変更する方法を載せています。

このカスタマイズについては、以下の個別記事にまとめましたのでご覧ください。

記事の最終更新日を表示させるようにカスタマイズ追加

Bloggerテンプレートの「QooQ」では、記事を公開後に後日内容を更新しても更新日は表示されず、常に初回公開日のみが表示されます。

リライトして定期的に内容をアップデートさせても、更新日が記載されていないと、読み手にはそれは伝わらず、古い記事・古い情報と認識されてしまいます…。

せっかく更新した記事を長く読んでもらうためにも、最終更新日を表示させて記事の鮮度を保つことは重要です。

そこで、初回公開日の横に最終更新日も表示されるようにカスタマイズしました。

このカスタマイズについては、以下の個別記事にまとめましたのでご覧ください。

まとめ：Bloggerブログを自分好みにカスタマイズしてみよう！

以上、Bloggerブログのカスタマイズについて、実際にカスタマイズを行った方法のまとめでした。

Bloggerブログは完全無料なため、その分機能も限られていますが、カスタマイズすることによって機能やデザインを広げることができるので、ぜひ試してみてください。