「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」テンプレートを使用してみて、目次の自動生成は別でテンプレートに追加する必要がありました。
以前、別の記事で「目次の自動生成」を試してみた記事がありますので、参考にしていただければ幸いです。
色々直したいところは、いっぱいありますが、少しずつ様子を見ながら、調整していきたいと思います。