QooQ カスタマイズ前の初期設定【Blogger】
Bloggerの無料日本語テンプレートとして人気のある、QooQをカスタマイズして使ってみる事にしました。今回はテンプレートのダウンロードから、カスタマイズをする前の初期設定についてです。
QooQとは
くうく堂さんで製作（2019年）された無料日本語Bloggerテンプレートです。
2022年10月現在で最新版は v2.00（1.31・1.32・2.00は同じもの・今後のバージョンアップ予定なし）となっています。また、同じく10月に利用規約が変更され再配布OK（販売NG）となりました。
くうく堂 blogger日本語テンプレート「QooQ」ダウンロードページ
シンプル・軽量なQooQは、使っている人が多くカスタマイズ情報も豊富です。少しHTML/CSSを学べば、便利な機能を追加したりお好みのデザインに変えたりすることができるので、カスタマイズを楽しみましょう！
作業前に必ずバックアップをとる
テンプレートの変更をする場合、投稿済み・下書き保存の記事は消えませんが、それ以外のデザイン（設置ガジェットも含む）は全てリセットされます。
「やっぱり元に戻したい」という場合に備えて、必ず今使っているテンプレートのバックアップをとってから作業をしましょう。
テンプレートの変更だけでなく今後カスタマイズを行う時も、コツコツやってきたカスタマイズを無駄にしないように、こまめにバックアップをとりましょう。
バックアップは テーマ＞カスタマイズ＞バックアップ より.xmlファイルとしてダウンロードすることができます。元に戻したい時は テーマ＞カスタマイズ＞元に戻す でダウンロードした.xmlファイルをアップロードして下さい。
BloggerテンプレートをQooQに変更
- まずは、くうく堂さんのページでQooQのノーマル版（カード型）かリスト版のどちらかを選んでテンプレートをダウンロードしてきます。（.xmlファイル）
- 左サイドメニューから テーマ＞カスタマイズ＞元に戻す で、ダウンロードしてきたQooQの.xmlファイルをアップロードします。
これでブログのテンプレートがQooQに変更されました。
レイアウトの初期化
新しいブログの場合には初期化の必要はないので、次の項目へ飛んで大丈夫です。
空のテンプレートでリセット
テンプレート（特に海外製）を既にいろいろ試している方は要注意。レイアウト画面で見てみると違うテンプレートのガジェットが混在している事があります。
何を消したら良いのか分からなくなってしまって「どうしよう！」という時には、空のテンプレートでBloggerレイアウトの初期化を行うといいです。
記事がいくつか書いてあっても大丈夫。テンプレートの枠組みだけが初期化されるので記事の内容は消えません。※ガジェットはリセットされます
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin></b:skin>
</head>
<body>
<b:section id='main' showaddelement='yes'/>
</body>
</html>
Bloggerの空テンプレートを作成する（バグ取りの日々）より
上記コードをコピーし、テーマ＞カスタマイズ＞HTMLを編集 より、表示された既存のHTML部分に丸ごと消して、上記コードを丸ごと貼り付け（ペースト）して保存。入れ替えるわけですね。
これで表示してみると、レイアウトはmainのみ。ブログを表示しても真っ白のはずです。
この後に使いたいテンプレートの.xmlファイルを テーマ＞カスタマイズ＞元に戻す でUPして保存すれば、新しいテンプレートでレイアウトが綺麗な状態のブログに戻ります。
モバイル表示をデスクトップに切り替え
Bloggerの場合、PCとスマホで使うテンプレートが別々に設定されています。
QooQは1つのテンプレートでどんなデバイスにも対応できるレスポンシブデザインなので、左サイドメニュー テーマ＞カスタマイズ＞モバイルの設定 より、この設定を「デスクトップ」に変更します。
これでデスクトップ（PC）とモバイルで使うテンプレートが1つ（QooQ）に設定されます。
レイアウトからガジェットの整理と設定
次はレイアウトから各ガジェットの整理と設定です。ここでデザインの大枠を先に決めてしまいます。
実際のデザインでどこに表示されるのかと合わせて説明していきますが、それぞれ不要なものは削除・非表示（OFF）にします。
位置については後から移動（例：ナビゲーションをタイトルの下にもってくるなど）できるので、まずはその項目がいるか・いらないかの選択だけしてしまいます。
ナビゲーション ＞ ページ
濃いピンクの部分：メインメニューになります。
先に設定をしないと、ブランク（メニューなし）扱いになり、濃いピンクのラインしか表示されないので、まずはブログのトップページへのリンク（カテゴリなどでもOK・後から修正できるので、何をメニューに入れるかは気にしなくて大丈夫）を設定します。
最上部のナビゲーション ＞ ページ「ページガジェット」の右下端の「編集」をクリック。新しいアイテムを追加より、ページ名の欄をクリックすると「ホーム」が下に候補として表示され、URLも自動でブログのTOPページが設定されます。
ヘッダー ＞ ページヘッダー
薄いグリーンの部分。ブログのタイトルと説明が表示されます。
ブログタイトルは必須項目なので空欄のまま保存することはできませんが、説明については省略することができます。
記事表示部分 ＞ ブログの投稿
ここで記事ページの表示項目を設定します。記事がないと表示ができないので、見出し・本文・ラベル（カテゴリー）・画像なども入れてサンプル記事いくつか書いてから確認してください。
SEO的に日付ヘッダー（記事公開日）は表示させておくほうが良いので、設定をするのはトップで表示する投稿数（新着記事の数）・日付の形式・コメント・ラベル（カテゴリー/タグ）・共有ボタン（SNSボタン）ぐらいになります。
なお、投稿者・公開時刻・投稿を共有するメールリンク・場所・投稿者のプロフィールなど一部の表示設定はQooQでは有効になりません。また表示位置の移動もここでは設定できません。
QooQリスト版のサンプル記事ページ ※サンプルでは共有ボタン非表示
サイドバー・フッター1～3
ここは細かなカスタマイズに入ってからでも各ガジェットの追加・削除が自由にできる（ガジェットのあり・なしでデザインが大きく崩れることがあまりない）ので、じっくり考えて大丈夫です。
何もないとCSSなどの表示確認ができないので、人気の投稿・ラベル（カテゴリー/タグ）・検索あたりを設置しておきます。
まずはここまで
ブログの大枠のデザインを決める設定はこれくらいで、ようやく細かなカスタマイズ作業に入れます。
次回からは表示させた項目の移動（HTMLの書き換え）や、新しい機能の追加（ブログカードや目次など）、CSSを設定して見た目の変更などになります。
8-stars.blogspot.comBlogger + QOOQ のカスタマイズ記事はこちらでまとめて確認できます。
8-stars.blogspot.com
