はじめに
※この記事は、Bloggerにて運営した時に書いたものです。そのため、現在WordPressで運営しているため、見え方が異なっています。予めご了承下さい。
このGoogleBloggerでブログを開設してから、テンプレートはBloggerで予め用意されていたものから適当にチョイスして使っていました。これで特に不満があったという訳ではありませんでしたが、他のBloggerブログを見ていくうちに、QooQ（クーク）というテンプレートがある事を知りました。このテンプレートのいい所は、シンプルかつスッキリしたデザインになっていて、SEO対策もされているという事です。そこで、QooQを実際に導入してみました。また、これに付随する形で、いくつかのカスタマイズをしました。本記事では、以下の内容ついて解説していきます。
- QooQの導入
- 目次の自動生成
- ナビゲーションバーの固定
- ナビゲーションバーに検索ボックスを埋め込み
QooQ（クーク）の導入
導入に当たっては、以下のサイトを参考にしました。
Bloggerテンプレート「QooQ」の導入・カスタマイズ方法
QooQは、くうく堂という所で作成されたテンプレートです。特徴としては、日本語対応、SEO最適化、表示速度最適化といったものが挙げられます。見た目のデザインとしては、導入後の私のブログを見て頂ければおわかりかと思いますが、シンプルかつスッキリとしたデザインになっております。
それでは、導入ステップを解説していきます。
テンプレートのダウンロード
テンプレートは、以下のサイトからダウンロード出来ます。
blogger日本語テンプレート「QooQ」ダウンロードページ
通常版とlist版の2種類があります。それぞれどのように見えるのか、ダウンロードページでデモンストレーションを見る事が出来ますので、お好みの方を選んで下さい。私は通常版を選びました。
既存のBloggerテンプレートのバックアップ
万が一失敗した時に元の状態にすぐ戻せるよう、既存のテンプレートはバックアップしておくようにして下さい。特に、GoogleAnalytics、GoogleAdSenseに関するソースコードを反映している場合は、必ずやっておくようにして下さい。以下に手順を記載します。
- Bloggerの管理画面から、テーマを選びます。
- カスタマイズの隣にある▽ボタンをクリックして、バックアップを選びます。
- ダウンロードをクリックして、保存先フォルダを指定して、保存します。
GoogleAnalytics、GoogleAdSenseに関するソースコードを反映
QooQのテンプレートに、GoogleAnalytics、GoogleAdSenseに関するソースコードを反映しておきます。これは、Bloggerへアップロードしてから実施しても問題ないのですが、ローカル環境でメモ帳やテキストエディタを使って編集する方が、やりやすいと思います。実際、私もこのタイミングで編集しました。
どこに何を反映するのかは、個々の環境にもよりますが、基本的には、既存のテンプレートとQooQテンプレートを並べてみて、既存に反映されているGoogleAnalytics、GoogleAdSenseに関するソースコードをQooQに反映する事になります。
尚、QooQのテンプレートは、コピーを作ってから反映する事をお勧めします。不具合があった際に、どこを変更したのかわからなくなってしまう事を避ける為にも、オリジナルは残しておきたいものです。
Bloggerへのアップロード
前節にて編集したテンプレートファイルを、Bloggerへアップロードします。以下に手順を記載します。
- Bloggerの管理画面から、テーマを選びます。
- カスタマイズの隣にある▽ボタンをクリックして、元に戻すを選びます。
- アップロードをクリックして、編集したテンプレートファイルを選択して、開くを推します。
サイトの表示確認
この状態で、Bloggerのテンプレートは、QooQに置き換わっています。GoogleAnalytics、GoogleAdSenseに関するソースコードも反映されています。ここで、サイトを開いてみて下さい。新しいテンプレートになり、AdSense広告も表示されます。GoogleAnalyticsの方にも、自分がアクセスした様子が反映されているはずです。ここまで確認出来たら成功です。
モバイル設定の変更
最後に、モバイル設定を変更します。以下の手順を記載します。
- Bloggerの管理画面から、テーマを選びます。
- カスタマイズの隣にある▽ボタンをクリックして、モバイルの設定を選びます。
- デスクトップにチェックを入れて、保存します。
QooQの場合、パソコン、スマートフォン、タブレットのどの端末から見ても、きれいに表示してくれます。このため、わざわざモバイル用に何か設定をしておくといった必要がありません。
設定が終わったら、スマートフォンやタブレットでの表示確認をしておきましょう。
目次の自動生成
手順については、以下のサイトを参考にしました。
[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）
上記のサイトにて手順が詳細に記載されております。
尚、テンプレートのHTMLソースを編集する事になりますので、事前にテンプレートのバックアップを忘れないようにして下さい。
ナビゲーションバーの固定
以下のサイトを参考にしました。
【 QooQ カスタマイズ 】 ナビゲーションバーをカスタマイズする
尚、テンプレートのHTMLソースを編集する事になりますので、事前にテンプレートのバックアップを忘れないようにして下さい。
ヘッダーとナビゲーションバーの入替
QooQのテンプレートは、最初は上からナビゲーションバー、ヘッダーの順になっております。ここは好みもあるかと思いますが、私はナビゲーションバーとヘッダーの順序を入れ替える事にしました。マジェブログも、ヘッダーの下にナビゲーションバーを設置しているスタイルでしたので、この方がしっくるくるかなと思いました。
ナビゲーションバーの固定
サイトをスクロールしても、ナビゲーションバーが丈夫に固定されるようにしました。これで、ユーザビリティの向上にも繋がると考えております。
ナビゲーションバーに検索ボックスを埋め込み
以下のサイトを参考にしました。
ブログ内の検索は、元々サイドバーに設置していましたが、ナビゲーションバー内に設置する事で、スッキリした見栄えになりました。
尚、テンプレートのHTMLソースを編集する事になりますので、事前にテンプレートのバックアップを忘れないようにして下さい。
終わりに
BloggerにQooQの導入と、それに付随する形でカスタマイズした内容について解説してきました。これまでも、なるべくシンプルかつスッキリとしたブログを目指してきましたが、QooQの導入とそれに付随するカスタマイズにより、より良いデザインになったと思われます。これからも、ユーザビリティの良いブログ作りをしていきますので、よろしくお願いします。
コメント