Bloggerテンプレート変更時にやったこと、事前準備、カスタマイズ（Orange Zelo→QooQ）

2020/03/21
2021/10/24

先日、BloggerのテンプレートをOrange ZeloからQooQに変更しました。

>>BloggerのテンプレートをQooQに変えました。Orange Zeloと比べての感想

さらに前にテンプレートをVaster2からOrange Zeloに変えたことがあるのですが、手順などのメモを何も残していなかったことを今回後悔したので、

  • Bloggerのテンプレートを変える前に準備したこと
  • テンプレートの変え方
  • 変更後すぐにやったこと
  • カスタマイズの内容と参考にした記事

をまとめました。




テンプレート変更前の事前準備

１．テンプレートをダウンロードする

使いたいテンプレートをパソコンにダウンロードします。

私が現在使っているのは無料の日本語テンプレートQooQです。

>>シンプルで速い日本語bloggerテンプレート「QooQ」の紹介！ - ラムネグ

２．ブログのバックアップをとる

Bloggerのメニュー画面から「テーマ」
↓
右側のメニューアイコンを選んで「バックアップ」


３．ブログの配色を決めておく

QooQはテーマデザイナーでブログ全体の色を設定できます。

私はまずカスタマイズの練習に使っている昔のゴミブログ非公開ブログにQooQを設定し、事前にブログの色を決めました。

非公開ブログはBloggerで新しいブログを作って「設定」→「基本」→「許可」でブログの閲覧者を「限定公開 - ブログの投稿者のみ」にすれば作れます。


Bloggerのテンプレート変更方法

Bloggerのメニュー画面から「テーマ」
↓
右側のメニューアイコンを選んで「元に戻す」
↓
ダウンロードしたテンプレートのファイルをアップロードする

これでブログは新しいテンプレートに変更されます。


テンプレート変更後にやったこと

１．ブログの色を設定する

「テーマ」→「カスタマイズ」でBloggerテーマデザイナーへ
↓
「上級者向け」から文字の色やブランドカラー、背景色を選ぶ


２．アドセンスの自動広告のコードを貼る

Google AdSenseで自動広告を使っている場合は、アドセンスコードを貼り直します。

「広告」→「サマリー」→「コードを取得」でコードをコピー
↓
「テーマ」→メニューアイコンから「HTMLを編集」
↓
<head>と</head>の間にコードを貼る

３．CSSの設定

テンプレートを変更すると、自分で追加していたCSSは消えるようです。

引き続き使いたいCSSは「テーマ」→「カスタマイズ」→「上級者向け」→「CSSを追加」で書き込みます。

４．レイアウトの設定

テンプレートを変更しても前のテンプレートのガジェットは引き継がれます。

なのでテンプレート変更後はサイドバーやフッターにある不要なものを消したり、必要なものを足したりします。

ついでにナビゲーションと記事表示部分など、すぐにできる設定は済ませておきます。


テンプレート変更後のカスタマイズと参考にした記事

ブログの見た目や機能面でいくつかカスタマイズを行いました。

  • ブログ名の文字サイズを大きくする
  • ナビゲーションバーをブログ名の下に移動する
  • トップページのパンくずリストを消す
  • 記事に目次を追加する
  • 関連記事のサムネイル画像を丸から四角にする
  • 人気の投稿に区切り線を入れる
  • 記事に更新日を表示する
  • トップへ戻るボタンを設置する

カスタマイズする時は「テーマ」→メニューアイコンから「HTMLを編集」で作業します。その前にバックアップを忘れずに。

ブログ名の文字サイズ以外は自力でカスタマイズできなかったので、多くのブログを参考にしました。

基本的には記事のとおりにHTMLを編集するだけでカスタマイズが完了したので、大変助かりました。

ブログ名の文字サイズ変更

HTMLの編集画面で「header-title」と検索
↓
#header-titleにある「font-size:」の数字を変える

#header-title{
 font-size: 110%;
 font-weight: bold;
}

ちなみに当ブログはfont-sizeを200%にしました。

ナビゲーションバーをブログ名の下に移動する

QooQの初期設定では、ナビバーはブログ名の上に配置されています。

このナビバーをブログ名の下に置きました。


参考記事：Blogger「QooQ」ナビゲーションバーのカスタマイズ -  moca＊Bloggerメモ

トップページのパンくずリストを消す

QooQでは記事の上にパンくずリストが表示されます。

しかし初期設定ではトップページにも「ホーム」とだけ書かれたパンくずリストが載ります。

うちのブログはナビバーにも「ホーム」があり、同じ単語が上下に２つ表示されることになるのでトップページのパンくずリストは削除しました。

参考記事：【Blogger/QooQ】トップページのパンくずリストは廃止したい - 勉強でもするか

記事に目次を追加する

Bloggerには目次機能がついていません。

以前使っていたOrange Zeloには最初から目次機能がついていて便利でした。

が、簡単に目次をつけられるカスタマイズ方法があったので、どのテンプレートでも目次の心配はいらないことが判明。

参考記事：[Blogger] 目次を見出しから自動生成するプラグイン（忙しい人向け） - スケ郎のお話

関連記事のサムネイル画像を丸から四角にする

QooQでは記事の下に関連記事が表示されます。

初期設定ではアイキャッチ画像が丸く切り取られるので、画像が四角になるよう変更しました。


参考記事：Blogger QooQで関連記事に表示されるサムネイル画像を円形から四角形に変更する方法 – せかつぶ！

人気の投稿に区切り線を入れる

サイドバーに設置した「人気の投稿」（当ブログの「よく読まれている記事」）に薄い区切り線を入れました。


参考記事：QooQカスタマイズ：人気の投稿ガジェットの記事ごとに区切り線をつける方法 - BloggerMaster！

記事に更新日を表示する

ブログの最終更新日は、古い記事でもちゃんとアップデートしていることをアピールできる大事な要素だと思って入れました。

ただ、更新日は誤字を直したとか装飾を変えたとかの些細な修正でも変わってしまうので、たまに更新詐欺な気分になる。

最終更新日をマークで表示するカスタマイズもありますが、当ブログではシンプルに「更新」と表示するものを選びました。

参考記事：コピペでかんたんQooQカスタマイズ！最終更新日を表示する- BloggerMaster！

こちらの記事のコードをそのままコピーすると日付の表記が「yyyy年mm月dd日」になるので、「yyyy/mm/dd」になるようコードの一部を変更しました。

var up_text ="　更新：" + up_y + "年" + up_m + "月" + up_d + "日";
↓
var up_text ="　更新：" + up_y + "/" + up_m + "/" + up_d + "";

コードの「年」と「月」を「/」に変えて「日」を削除です。

トップへ戻るボタンを設置する

トップに戻るためのアイコンが、記事を少しスクロールすると表示されるようにしました。

Vaster2とOrange Zeloを使っていた時と同じ方法でカスタマイズしています。

参考記事：Bloggerにてページ先頭にスクロールして戻るボタンを設置してみた ｰ 日々のメモ帖 by holidaybuggy1980


やらなくていいこと：アナリティクスのトラッキングコード

「なに当然のこと言ってるの？」と思われそうですが、BloggerのHTMLにアナリティクスのトラッキングコードを入れる必要はありません。

以下、思い出話。

テンプレートを変えた翌日、Googleアナリティクスの直帰率に異常が起きていました。

直帰率まさかの８％。

さすがにありえんと思ったものの原因が分からず２日ほどそのままにしていましたが、調べたら理由が分かりました。

アナリティクスのトラッキングコードをHTMLに貼っていたのです。

おそらくアドセンスの自動広告と同じく、アナリティクスのコードもテンプレートを変えたら貼り直さないといけないと思い込んだのでしょう。

Bloggerにアナリティクスの設定をしていればHTMLにコードを貼る必要などないのです。

（「設定」→「その他」→「Google Analytics」にアナリティクスのトラッキング IDが入っていればOK。UA-XXXXXXXXX-Xのやつ）

参考：Blogger でアナリティクスを使用する - Bloggerヘルプ

HTMLに貼ったアナリティクスのコードを消したら直帰率は元通りになりました。

わざわざアナリティクスの管理画面に行ってトラッキングコードをコピーした私の行動は全くの無駄どころか弊害だった。


困ったこと：アドセンス自動広告が消えた

最初はちゃんと表示されていたのですが、テンプレートを変えた翌日からアドセンスの自動広告が表示されなくなりました。

コードは正しく貼ったし、ポリシーセンターで問題は検出されるわけでもない。

前述のアナリティクスの異常を直したら解決されるかなと思いましたが変化なし。

考えられる原因は、スマホで自動広告の表示を確認していた時にうっかり広告に触れてしまったこと。

１回だったら問題なかったのでしょうが、２回か３回やってしまったので誤クリックか自己クリック扱いになってしまった可能性が。

自動広告でない広告は表示されているので、しばらく放置して様子を見ます（2020/11/05追記：その後も変化なかったので自動広告はオフにしました）。


まとめ

以上、当ブログで行ったBloggerのテンプレート変更の手順とカスタマイズの紹介でした。

まだ変えたい部分があるので、今後もカスタマイズについては調べていくつもりです。


Next Post Previous Post