はてなブログへのZenbackの導入

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

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

「はてなブログ」にログインしダッシュボードを表示して下さい。

Zenbackを設置したいブログ名をクリックして下さい。

ブログの管理画面が表示されます。

左側に表示されているメニュー一覧の中から「デザイン」メニューをクリックして下さい。

画面左上に「デザインテーマ」と「カスタマイズ」というタブが表示されており現在は「デザインテーマ」が表示されていますので「カスタマイズ」タブをクリックして下さい。

次のように表示されます。

Zenbackをどこに表示するかで設定する場所が異なります。今回はメインページのフッターではなく個別の記事を表示した時にフッターの部分にZenbackを表示させてみます。その場合は「記事」と書かれたメニューをクリックして下さい。

個別の記事が表示される時のカスタマイズ可能な項目が表示されます。下の方へスクロールして下さい。

一番下あたりに「記事下」という箇所があります。ここに表示されているテキストエリアをクリックして下さい。

すると編集エリアが拡大表示されます。この中にZenbackで取得したコードをそのまま貼り付けて下さい。

どこか別のところをクリックすると元の画面に戻ります。「記事下」のテキストエリアにコードが貼り付けられていることを確認し、画面上部の「変更を保存する」と書かれたリンクをクリックして下さい。

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

ではブログを見てみます。記事の一覧が表示されるメインページでは何も表示されませんが、個々の記事を開いた時はフッター部分にZenbackが表示されています。

次にサイドバーにZenbackを設置する場合です。記事下に設置する場合と同じ手順で進めていき、カスタマイズする場所を選択する画面で今度は「サイドバー」をクリックして下さい。

サイドバーに関するカスタマイズ可能な項目が表示されますので一番下に表示されている「モジュールを追加」をクリックして下さい。

追加するモジュールの種類を選択する画面が表示されますので「HTML」を選択して下さい。すると右側にタイトルと追加するHTMLを入力するエリアが表示されますのでZenbackで取得したコードをそのまま貼り付けて下さい。(現時点では少し変更が必要です。この後説明します。)。入力が終わりましたら「適用」ボタンをクリックして下さい。

ここで注意点があります。現時点でコードをそのまま追加するとZenbackが表示される代わりに次のような表示がされてしまいます。

*1:new Date()*1)*Math.random(

将来的には改善されているかもしれませんが、現時点ではコードを次のように変更されて下さい。URLや「nsid」の値は実際と異なります。

<script type='text/javascript' src='http://widget.zenback.jp/?base_uri=http%3A//www.example.com/&nsid=00000000000000000000000000&rand='+Math.ceil((new Date()*1)*Math.random())></script>

追加したモジュールが表示されていることを確認して下さい。(モジュールはドラッグして位置を移動させることができますので必要であれば他のモジュールと位置を入れ替えて下さい)。そして画面上部に表示されている「変更を保存する」ボタンをクリックして下さい。

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

ではブログを見てみます。今回はサイドバーに設置しましたので個々の記事だけではなくメインページのサイドバーにもZenbackが表示されます。

はてなブログにZenbackを導入する方法について解説しました。サイドバーの方は少しコードの修正が必要なため、現時点では簡単に設置が可能な個々の記事の下に設置する方法がお勧めです。