BloggerへのZenbackの導入

広告

Google社が提供している無料ブログサービスであるBloggerへZenbackのコードを設置する方法について解説します。記事下及びサイドバーへ設置する方法となります。

1.Bloggerの記事下へ設置
2.Bloggerのサイドバーへ設置

事前に「新規ブログを追加」及び「コードの確認方法」を参考にあらかじめBloggerで作成したブログをZenbackに追加して使用するコードを取得しておいて下さい。

Bloggerにログインしてダッシュボードを表示して下さい。

p10-1

対象のブログの「レイアウト」メニューをクリックして下さい。

p10-2

レイアウト画面が表示されます。

p10-3

それではまずは記事下にZenBackを表示するように設定します。今回はガジェットを使用するので個々の記事だけではなくメインページでも表示されますが、メインページで複数の記事が表示される時に記事毎にZenbackが表示されるのではなく全体のフッター部分に1つだけ表示されます。

使用しているテンプレートによっても異なるとは思いますが、フッター部分にある「ガジェットを追加」と書かれたリンクをクリックして下さい。

p10-4

「ガジェットを追加」ウィンドウが表示されます。

p10-5

「HTML/JavaScript」ガジェットのところに表示されている「+」と表示されたリンクをクリックして下さい。

p10-6

「コンテンツ」のところにZenbackのコードをそのまま入力して下さい。入力が終わりましたら「保存」ボタンをクリックして下さい。

p10-7

これでコードの設定は完了です。

p10-8

ではブログを見てみます。メインページをまずは見てみると、複数の記事が表示されていますが記事毎にはZenbackは表示されず、ページの一番下にだけZenbackが表示されています。

p10-9

p10-10

次に個々の記事を見てみると、記事の一番下にZenbackが表示されています。

p10-11

次にサイドバーに設置する方法です。先ほど記事下に設置した場合と同じく、レイアウトの画面で今度はサイドバー部分にある「ガジェットを追加」と書かれたリンクをクリックして下さい。

p10-12

記事下の場合と同じく「HTML/JavaScript」ガジェットを追加し、「コンテンツ」にZenbackのコードを追加して下さい。(手順は記事下の時とまったく同じなので省略します)。ガジェットが追加されると次のように表示されます。

p10-13

現在サイドバーの一番上にガジェットが追加されていますので、このままですとサイドバーの一番上にZenbackが表示されます。そこで「HTML/JavaScript」ガジェットをドラッグ&ドロップで一番下へ移動します。移動が終わりましたら画面右上の「配置を保存」ボタンをクリックして下さい。

p10-14

これでコードの設定は完了です。

ではブログを見てみます。メインページも個々のページもサイドバーにZenbackが表示されています。

p10-15

BloggerブログにZenbackを導入する方法について解説しました。テンプレートのHTMLを編集することで個々の記事にだけZenbackを表示させることも可能ですが、Bloggerの場合はメインページに表示されても1つだけなので手軽に行えるガジェットを使う方法を今回はご紹介しました。

( Written by Tatsuo Ikura+ )