「Blogger」無料のテンプレートQooQを試してみた

新しい年を迎えて、だいぶ時間が経ってしまったのですが、せっかくだしBloggerで使用しているテンプレートを変更して、気持ちを新たにやっていこうかなと思い、「QooQ」というテンプレートを試してみることにしました。


日本語に対応したBloggerのテンプレートは数が少ないように感じますが、やはり海外のテンプレートが多く、中には本当にコレ使って良いのかなと心配になるテンプレートもありますよね。

今回は、「QooQ」という日本語にも対応し、レスポンシブ、SEO、一部CSSをテーマデザイナーで対応、パンくずリスト、など色々対応しているテンプレートで、だいぶ以前から気になっていたテンプレートです。

ダウンロードや仕様などは以下のリンクに記載されているので、興味があったら試してみてはいかかでしょうか。
  • 【外部URL】https://qooq.dododori.com/blogger/qooq-download/

なお、カスタマイズは可能ですが、再配布、再販売は禁止されていますので注意してください。


QooQテンプレートを使用してみる

今回はカスタマイズも可能ということなので、テストページでテンプレートを適用させて、一部レイアウトやCSSを調整してみました。

使用方法は、Blogger管理画面にある「テーマ」から「カスタマイズ」ボタンの横にある下向き▼のアイコンをクリックし、「元に戻す」をクリックします。


「元に戻す」をクリックすると、「アップロード」とリンクがあるので、クリックして、ダウンロードしたテンプレートファイル「QooQ.xml」を選択して、アップロードします。


テンプレートの適用を方法は、慣れてしまえば、いたって簡単です。
問題は、レイアウト調整やCSSなどの変更です。


テーマデザイナーで一部のスタイルシートを変更する

テンプレート「QooQ」では、ありがたいことに一部のCSSを、テーマデザイナーで変更することができます。

テーマデザイナーとは、先ほどテンプレートでアップロードする際に、「テーマ」ページにある「カスタマイズ」というボタンがありましたが、「カスタマイズ」をクリックすることで、比較的簡単にCSSを変更することができます。


ただし、一部のCSSだけなので、テーマデザイナーですべてのCSSを変更することができないので、注意してください。

「カスタマイズ」ボタンをクリックすると、下の画像のように設定メニューが左側に表示され、現在のテンプレートの状態(プレビュー)が右側に表示されます。

設定メニューの一番下にある「詳細設定」をクリックすると、メニューが展開されます。


「詳細設定」を展開させると、下の画像のように、「QooQ」の一部のCSSをへんこうすることができるメニューが表示されます。

下の画像のように「詳細設定」と表示されたしたに「文字の色」と表示されたプルダウンメニューがあります。「文字の色」「ブランドカラー」「背景色など」の3つのカテゴリーに分かれていますので、必要な変更を行ってください。


「文字の色」を変更する

プルダウンから「文字の色」を選択します。
「普通の文字色」「リンクの色」「うす文字の色」と3つの設定があります。
実際に、プレビュー画面を見ながら、色を変更してみましょう。


  • 「普通の文字色」は、「本文のテキスト」「投稿記事の見出し」の色が変更されます。
  • 「リンクの色」は、そのままリンクの色が変更されます。
  • 「うす文字の色」は、「パンくずリスト」「日付」「コピーライト」の色が変更されます。

変更後は、ページ右下にある「保存」ボタンをクリックし、保存し忘れないように注意してください。変更しただけでは、変更は適用されません。


「ブランドカラー」を変更する

こちらもプルダウンから「ブランドカラー」を選択し、「ブランドカラー」「ブランドカラー部分の文字色」「ブランドサブカラー」「ブランドサブカラーの文字色」の4つを変更することができます。

言葉の通り、ブランド(ブログのタイトルなど)に関わる色の変更が行えます。


  • 「ブランドカラー」は、「ブログタイトルの背景色(ヘッダー部)」「ラベル背景色」「サイドメニュータイトルの背景色」の色を変更できます。
  • 「ブランドカラー部分の文字色」は、「ブランドカラー」内のテキストの色を変更できます。
  • 「ブランドサブカラー」は、「ブログタイトルの上部にあるページメニューの背景色」「ページ送り」の色を変更できます。
  • 「ブランドサブカラーの文字色」は、「ブランドサブカラー」内のテキストの色を変更できます。
こちらも、変更を行った際は、保存を忘れないようにしてください。


「背景色など」を変更する

プルダウンから「背景色など」を選択し、「最背景色」「コンテンツの背景色」「関連記事などのうすい枠線」の色の変更が行えます。


  • 「最背景色」は、一番後ろの背景の色を変更できます。
  • 「コンテンツの背景色」は、「投稿記事の背景色」「サイドメニューの背景色」の色を変更できます。
  • 「関連記事などのうすい枠線」は、適用したブログによって見え方が異なる場合があります。テストページでは、プレビューで確認することができません。メインページで適用する際に、確認するのが良いでしょう。無難なところで「透過」を有効にするか「市背景色」と同じ色を選択するのが良いでしょう。


自動目次作成機能はないよ

今回「QooQ」テンプレートを使用してみて、目次の自動生成は別でテンプレートに追加する必要がありました。

以前、別の記事で「目次の自動生成」を試してみた記事がありますので、参考にしていただければ幸いです。


色々直したいところは、いっぱいありますが、少しずつ様子を見ながら、調整していきたいと思います。

人気の投稿記事