Bloggerテーマ「QooQ」の導入と基本カスタマイズ

※この記事は公開から時間が経っているため、現在の環境とは内容が異なる場合があります。

Bloggerを使い始めると、最初に迷いやすいのがテーマ選びです。

標準テーマだけでもブログは作れますが、日本語で使いやすく、カスタマイズしやすいテーマを選ぶと、その後の調整がかなり楽になります。

このブログでは、Bloggerを使っていたときに QooQ（クーク） というテーマを使っていました。

シンプルで表示が軽く、日本語の情報も見つけやすかったので、Bloggerをカスタマイズしながら使いたい人には扱いやすいテーマだと思います。

この記事では、QooQの導入から基本的なカスタマイズまでをまとめます。

配色の変更、CSSやHTMLの編集、更新日の表示、設定が崩れたときの初期化まで、QooQを使ううえで見ておきたい作業を順番に整理します。

QooQで整える流れ

まずは、QooQを使うときの全体の流れを確認しておきます。

QooQテーマの設定の流れを6つの手順でまとめた図。バックアップ、QooQ導入、見た目調整、HTMLとCSS編集、更新日表示、初期化の順番を示している

QooQを導入して調整するときは、次の順番で進めると分かりやすくなります。

変更前のテーマをバックアップする
QooQのテーマファイルを導入する
色や文字など、見た目を調整する
必要な場合だけHTMLやCSSを編集する
更新日を表示する
設定が崩れたときは初期化を検討する

テーマを変更すると、見た目だけでなく、レイアウトやガジェットの状態も変わることがあります。
そのため、最初にバックアップを保存してから作業するのがおすすめです。

QooQを選んだ理由

QooQは、ラムネグさんが公開しているBlogger向けの日本語テーマです。

シンプルで軽く、Bloggerでもブログらしい見た目に整えやすいところが使いやすいと感じました。

テーマの設定方法やカスタマイズ方法が詳しく紹介されています。

QooQを選んだ理由は、主に次の点です。

日本語のテーマなので扱いやすい
デザインがシンプルで読みやすい
表示が軽い
レスポンシブ対応でスマホでも見やすい
HTMLやCSSをカスタマイズしやすい
関連記事やパンくずリストなど、ブログ運営に必要な要素がそろっている

テーマは好みもありますが、Blogger標準テーマだけでは少し物足りないと感じる場合、QooQは試しやすい選択肢です。

配布元の情報やダウンロード方法は変わる可能性があるため、導入前に配布元の最新情報を確認してください。

テーマを変更する前にバックアップを取る

テーマを変更する前に、今のテーマをバックアップしておきます。

テーマを変更すると、デザインやHTMLだけでなく、ガジェットの状態にも影響することがあります。

うまくいかなかったときに戻せるように、作業前の状態を保存しておくと安心です。

Bloggerの管理画面で テーマ を開き、カスタマイズボタン横の▼ボタンをクリックします。

Bloggerのテーマ画面でテーマメニューを開く場所を赤枠で示したスクリーンショット

表示されたメニューからバックアップを選択します。

Bloggerのテーマ画面でバックアップなどのメニューを示したスクリーンショット

バックアップファイルを保存しておけば、設定を戻したいときの保険になります。

HTMLを直接編集する前にも、同じようにバックアップを取っておくと安心です。

QooQのテーマファイルを導入する

QooQを使うには、配布元からテーマファイルをダウンロードし、Bloggerにアップロードします。

こちらが作者のラムネグさんのサイトです。

ラムネグ

シンプルで速い日本語bloggerテンプレート「QooQ」の紹介！ blogger日本語テンプレート「QooQ（クーク）」紹介！SEO対策から関連記事までオールインパックになった表示の速いテンプレートです

作者のラムネグさんのサイト「QooQ」ダウンロードページで、QooQのテーマファイルをダウンロードします。

テーマファイルは、QooQ.xml のようなXMLファイルです。

Bloggerの管理画面で テーマ を開き、「カスタマイズ」の右側の三角ボタンをクリックします。

「元に戻す」をクリックして、テーマファイルをアップロードします。

Bloggerのテーマ画面でバックアップや元に戻すメニューを開いているスクリーンショット

Bloggerにアップロードすると、ブログのデザインがQooQに切り替わります。

テーマを適用したあとは、トップページ、記事ページ、スマホ表示を確認します。

見た目が崩れていないか、メニューやサイドバーが想定どおり表示されているかを見ておきます。

QooQでカスタマイズするときに見る場所

QooQを入れたあとに調整する場所は、大きく分けると次の5つです。

テーマ

テーマの変更、バックアップ、HTML編集を行う場所です。
QooQの導入や、HTMLを直接編集する場合に使います。

カスタマイズ

色や文字など、見た目を調整する場所です。
大きな構造を変えずに、まず雰囲気を整えたいときに使います。

HTMLを編集

CSSを追加したり、テンプレート内の一部を書き換えたりするときに使います。
変更前には必ずバックアップを取っておきます。

レイアウト

ガジェットや表示位置を調整する場所です。
テーマを変更したあとに、不要なガジェットが出ていないか、必要なガジェットが表示されているかを確認します。

バックアップ

テーマを変更する前やHTMLを編集する前に保存しておくと、失敗したときに戻しやすくなります。

色や文字の設定を変更する

QooQは、Bloggerのカスタマイズ画面から色などを変更できます。

Bloggerの管理画面で テーマ を開き、カスタマイズ を選びます。

詳細設定を開くと、文字色や背景色などを調整できます。

ただし、背景、幅、レイアウトなど、すべての項目をこの画面だけで変更できるわけではありません。

まずはカスタマイズ画面で調整できる範囲を見て、足りない部分だけCSSやHTMLを編集する方が進めやすいです。

CSSを追加してテーブルを整える

デザインをもう少し細かく調整したい場合は、CSSを追加します。

CSSを追加する場所が見当たらない場合は、テーマのHTMLを開き、<b:skin><![CDATA[ と ]]></b:skin> の間に追加します。

テーマのHTMLを編集する場合は、Bloggerの テーマ からメニューを開きます。

メニューの中から HTMLを編集 を選びます。

Bloggerのテーマ画面でHTMLを編集メニューを赤枠で示したスクリーンショット

たとえば、テーブルをシンプルに表示したい場合は、次のようなCSSを追加します。

table.table02 {
  border-collapse: collapse;
  margin: 0 auto;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
}

table.table02 td,
table.table02 th {
  border-top: 1px solid #666;
  padding: 10px;
  text-align: left;
}

テーブル側では、table02 クラスを指定します。

<table class="table02">
  <tbody>
    <tr><td>ホスト名</td><td>タイプ</td><td>コンテンツ</td></tr>
    <tr><td>www.mydomain.com</td><td>CNAME</td><td>ghs.google.com</td></tr>
    <tr><td>xxxxx.mydomain.com</td><td>CNAME</td><td>xxxxx.dv.googlehosted.com</td></tr>
    <tr><td>mydomain.com</td><td>A</td><td>216.239.32.21</td></tr>
    <tr><td>mydomain.com</td><td>A</td><td>216.239.34.21</td></tr>
  </tbody>
</table>

CSSを適用すると、縦線のないシンプルなテーブルになります。

QooQテーマでテーブルにCSSを適用し、縦線をなくしたシンプルな表にした表示例

CSSを追加したら、保存して表示を確認します。

更新日を表示する

QooQでは、デフォルトの表示だと公開日だけが表示される場合があります。

QooQテーマの記事ページで公開日だけが表示されている状態を示したスクリーンショット

記事を更新している場合は、更新日が分かる方が、読者にとっても情報の新しさを判断しやすくなります。

QooQテーマの記事ページで更新日を表示している状態を赤枠と矢印で示したスクリーンショット

更新していない記事では公開日だけを表示し、更新している記事では更新日を表示するようにすると、日付の意味が分かりやすくなります。

QooQテーマの記事ページで公開日をアイコン付きで表示している状態を示したスクリーンショット

更新日表示のコードを追加する

更新日や公開日の左側にアイコンを表示したい場合は、Font Awesomeを使います。

テーマのHTMLで </head> の前に、次のコードを追加します。

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

次に、テーマのHTML内で次の記述を探します。

<p id='single-header-date'><data:post.dateHeader/></p>

見つけたら、次のコードに置き換えます。

<!-- 更新日 公開日 表示 -->
<!-- <p id='single-header-date'><data:post.dateHeader/></p> -->
<p id='single-header-date'>
<span id='update-date' style='margin-right:1em;'><i class='fas fa-sync-alt'/> 更新日：
<time expr:datetime='data:post.lastUpdatedISO8601' itemprop='dateModified'>
<script>document.currentScript.insertAdjacentHTML('beforebegin',"<data:post.lastUpdatedISO8601/>".substr(0,10).replaceAll('-', '/'));</script></time></span>
<span id='release-date'><i class='far fa-clock'/> 公開日：<time expr:datetime='data:post.timestampISO8601' itemprop='datePublished'>
<script>document.currentScript.insertAdjacentHTML('beforebegin',"<data:post.timestampISO8601/>".substr(0,10).replaceAll('-', '/'));</script></time></span>
<script>if("<data:post.lastUpdatedISO8601/>".substr(0,10) == "<data:post.timestampISO8601/>".substr(0,10)){ document.getElementById('update-date').style.display="none";
} else { document.getElementById('release-date').style.display="none"; }</script>
</p>

<time>タグ

記事の更新日や公開日を検索エンジンに伝えるために、コンピューターが理解できる<time>タグを使用します。

更新日

<time expr:datetime='data:post.lastUpdatedISO8601' itemprop='dateModified'>表示する日時</time>

公開日

<time expr:datetime='data:post.timestampISO8601' itemprop='datePublished'>表示する日時</time>

expr: は、指定した項目の内容を属性値を設定するBloggerの制御タグです。

datetime属性には、次のようなISO 8601 形式の日付を指定します。

更新日：	lastUpdatedISO8601	例：2021-01-06T07:25:54Z
公開日：	timestampISO8601	例：2020-06-18T21:30:00+09:00

「T」は、日付と時刻の区切り文字です。

時刻以降は、タイムゾーンを表しています。

「Z」は、協定世界時(UTC)であることを示します。

「+09:00」は、協定世界時(UTC)より9時間進んでいる日本時間であることを示しています。

datetime属性を指定すると、表示する文字の形式を自由に表記することができます。

itemprop属性は、検索エンジンにそのアイテムの意味を伝えます。

更新日： itemprop=’dateModified‘

公開日： itemprop=’datePublished‘

日付の形式を変更

そのあとのJavaScriptの部分で、表示する日時を「yyyy/MM/dd」の形に変更しています。

更新日の場合、lastUpdatedISO8601(2021-01-06T07:25:54Z)の0文字目から10文字取得し、全ての’-‘を’/’に変更して、「2021/01/06」という形に変更します。

document.write()は、非推奨ということで、document.currentScript.insertAdjacentHTML()で、表示する日付のHTMLを追加しています。

新しいテーマの場合、<data:post.lastUpdated.iso8601/>、<data:post.lastUpdated.year/>といったタグを使用して、JavaScriptなしで書式を変更できるようです。

更新していなければ更新日を非表示に

ブログ記事を更新していなければ公開日を、更新していれば更新日を表示します。

JavaScriptで、更新日と公開日を比較し、日付が同じ場合display=”none” で更新日を非表示に、日付が異なる場合は公開日を非表示にする処理をしています。

テーマを初期化する

テーマをいろいろ変更していると、不要なガジェットが出てきたり、設定が思ったように戻らなくなったりすることがあります。

その場合は、テーマを入れ直して整理する方法があります。

作業の流れは次の通りです。

現在のテーマをバックアップする
適用したいテーマのXMLファイルを用意する
テーマのHTMLを開く
既存のHTMLをすべて選択して、XMLの内容に入れ替える
レイアウトで必要なガジェットを再調整する

HTMLをまるごと入れ替える作業になるため、バックアップは必ず保存しておきます。

また、テーマを入れ直すとガジェットがクリアされることがあります。

テーマを初期化したあとは、Bloggerの レイアウト を開き、必要なガジェットだけ追加し直します。

QooQをカスタマイズするときの注意点

QooQはカスタマイズしやすいテーマですが、HTMLやCSSを直接触る場合は、少し慎重に進めた方が安全です。

特に、次の点は確認しておきます。

作業前にテーマをバックアップする
コードは一度に大きく変えすぎない
変更後はパソコンとスマホの両方で確認する
表示が崩れたら、直前に変更した部分から戻す
配布元の最新情報も確認する

Bloggerの管理画面やテーマの仕様は変わることがあります。

うまくいかない場合は、無理に古い手順に合わせようとせず、現在の画面で近い項目を探しながら確認する方が進めやすいです。

まとめ

QooQは、Bloggerをシンプルに整えたいときに使いやすい日本語テーマです。

導入後は、まずカスタマイズ画面で色や文字を調整し、必要な部分だけCSSやHTMLを編集していくと進めやすくなります。

流れをまとめると、次のようになります。

変更前のテーマをバックアップする
QooQのテーマファイルを導入する
色や文字を調整する
必要に応じてCSSやHTMLを編集する
更新日を表示する
設定が崩れた場合は、テーマの初期化や入れ直しを検討する

テーマを触る作業は、慣れるまでは少し緊張します。

ただ、バックアップを取ってから少しずつ変更すれば、落ち着いて進められます。

まずは見た目を整えるところから始めて、必要になった部分だけカスタマイズしていくのがおすすめです。

次は、Bloggerのラベル・パンくず・ナビゲーション設定を紹介します。