【Blogger】QooQカスタマイズ記事まとめ
Bloggerのテンプレートをお探しですか?「日本語の無料テンプレートで、使っている人がいろいろカスタマイズ情報を解説してくれているのがいいな」という方には「QooQ」がおすすめです。
オリジナルがシンプルなつくりになっているので、いろいろ必要な機能を追加していく必要がありますが、そこがまた楽しい!
以下、当ブログ内の QooQ カスタマイズ記事のまとめです。
作業前には必ず、現状のバックアップをとることを忘れずに。完成までは、過去数回分のバックアップ(上書きしないで段階的にバックアップする)と良いですよ。
Blogger日本語テンプレート、QooQ
くうく堂さんで製作(2019年)された無料日本語テンプレートです。Blogger公式テンプレートではありません。
2022年11月現在で最新版は v2.00(1.31・1.32・2.00は同じもの・今後のバージョンアップ予定なし)となっており、利用規約が変更され再配布OK(販売NG)となりました。
QooQカスタマイズ記事まとめ
※今はJetThemeという海外の無料テンプレートを使っています。
初期設定から順番に、当ブログのカスタマイズ記事をまとめてみました。HTMLもCSSも全く知識がなくて…という方は少し勉強しないと難しい部分もあるかもしれませんが、分からない事はネット検索をしつつ、頑張ってみましょう!
トップページ関連のカスタマイズ
自分のブログのURLにアクセスした時に1番最初に表示されるページです。QooQの場合はPCでもスマホでもタブレットでも同じテンプレートを使う、レスポンシブデザインになっています。
リスト型を使いたい場合の記事一覧(新着記事一覧)部分のカスタマイズについては、こちらでピックアップして説明しています。
記事にアイキャッチを設定していない場合でも、共通の代替画像(no-image)を設定することでトップページの記事一覧(新着記事一覧)・人気の投稿などのレイアウトが崩れるのを防ぐことができます。※代替画像は自分の好きな画像にすることができます。
カスタマイズしていたら、サーチコンソールでエラーが出るようになってしまいました。
記事ページのカスタマイズ
その他、404エラーページなど
以下は必須ではありませんので、ひと通りカスタマイズが終わった後にどうぞ。
記事をいくつか書かないと表示エラーが分からないのですが、Bloggerの仕様のせいで、何が原因なのかと数時間頭を悩ませました。
記事にはしていませんがサイトマップはふじろじっく/ふじやんさんが改良・日本語化されたソート機能付きのものを採用しています。
HTML サイトマップウィジェット (2022/07/10 一部を改良したコードを公開しました)
CSSのカスタマイズ
基本的にどんなテンプレートを使っていても、CSSでの装飾については同じように使えます。以下はテンプレート;JetTheme のカスタマイズで使用したCSSですが、QooQでも同じように使えるものもあるので、ご参考まで。(あわせて読みたい・蛍光マーカー・文字のグラデーションなど)
いろいろ試行錯誤して、思った通りの色・デザインで表示されるとうれしくなりますよね。HTMLもCSSも、小さなミス(タグのタイプミスなど)でエラー・CSSが効かないということに繋がってしまうのでご注意を。
※現在はJetThemeという海外製のテンプレートをカスタマイズして使っています。表示されているデザインはQooQのものではありませんのでご了承ください。