2013 年 4 月に、Blogger ブログに、通常のコメント欄と入れ替える形で Google+ のコメント欄が設置できるようになりました（参考）。複数のブログについたコメントや他人のブログにつけたコメントが Google+ で一元的に閲覧できるので非常に便利なんですが、その一方で通常のコメント欄と比べ不便なところもいくつか指摘されています。

• Google+ ユーザーしかコメントできない。
  通常のコメント欄なら Google ユーザー、OpenID ユーザーに加え、「匿名」も選べます。
• 公開範囲が分かりにくい。
  Google+ のサークルが適用されるため、誰にどのコメントが見えているのか把握しにくいかと。
• ブログのドメインを変えられない。
  Google+ 上でのコメントは、リンクの URL で Blogger ブログと関連付けられているため、ドメインを変更してしまうと、ブログから以前のコメントが見れなくなってしまいます。
• 記事ごとのコメント表示・非表示、新規受け付けの可否設定ができない。
  Blogger の投稿エディタのオプション指定が効きません。
• コメントの「オーナー承認後公開」ができない。
  ブログにコメントがつくというより、Google+ での言及をブログに表示できる、というのが本質なので、しょうがないといえばしょうがないんですが。
• ブログについたコメント一覧が確認できない。
  通常のコメントだと、ダッシュボードやコメントフィードで確認できますね。

参考：

• The Real Blogger Status: Reverting Your Blog Back To Blogger Comments, From Google+ Comments

ということで、従来のコメント欄も Google+ のコメント欄も両方ブログに載せてしまおうと思ったわけです。参考にしたのはこちらのブログ。

• Google+コメント機能をBlogger以外に設置する方法【非公式】 | アンギス

導入してみた様子が、次の画像です。



導入方法

１．Blogger の管理画面「Google+」から「このブログで Google+ のコメントを使う」のチェックを外します。元々 Blogger ブログを Google+ プロフィールと関連付けていない人は、そのままで。

２．Blogger 管理画面「テンプレート ＞ HTML の編集」から


というコードを見つけます。「Ctrl + f」キーからエディタの検索機能を使うと便利です。

３．２のコードのすぐ後に


というコードを挿入して「テンプレートを保存」ボタンを押します。赤字部分は Google+ コメント欄の最大幅です。通常のコメント欄の幅に合わせて調整するのがいいと思います。

青字の部分は、Google+ コメント欄の上部に表示されるメッセージで、自由に書き換えることができます。閲覧者がどちらにコメントすればいいのか迷わないように、何か説明を書いてもいいかもしれませんね。

なお、<div id='backlinks-container'> は 2 箇所あるので、両方のコードの後に同じコードを貼り付けてください。


ということで、「Google+ のコメント欄を置きたいけど、前についたコメントも表示しときたいんだよな…」という人も、「Blogger アカウントと Google+ アカウントをまだ関連付けていないんだけど…」という人も、ぜひお試しください。


ちなみに

テンプレートによっては、Blogger のコメント欄が 425px 幅で固定になっているものがあります。これは、Blogger 公式の外部 CSS ファイルで指定されているもので、Blogger 管理画面「テンプレート ＞ HTML の編集」から、テンプレートの CSS 部分


のすぐ後にでも、


と挿入することで、テキストエリアの幅の上書きが可能です。Google+ のコメント欄と幅を合わせたいというときに思い出してください。

Blogger ブログを Google+ アカウントと連携させると、ブログの投稿の著者欄がそれまでの Blogger アカウント名から Google+ アカウント名に変更されてしまいます。これを不便に思っていた人には朗報かもしれません。

AllBlogTools に、Google+ プロフィールを変更せずに、ブログのディスプレイネームを変更する方法が紹介されています。

• How To Change Displayed Author’s Name Without Changing Google+ Profile

やり方は、Blogger の管理画面「テンプレート ＞ HTML の編集」を開き、「ウィジェットのテンプレートを展開」にチェック、ブラウザの検索機能（たいてい「Ctrl + f」で検索窓が開く）を使って、


を検索、その部分を実際に表示したいニックネームに書き換える、という簡単なもの。

このカスタマイズをしたところで、ブログのフィードをよく見れば、投稿の本当の著者名は分かってしまいます。なので、名前を完全に伏せるという用途には向かないんですが、Google+ と連携させる前のハンドルネームをもう一度表示させたいという場合には役に立つんじゃないかと思います。


関連：

• Blogger が Google+ と連携可能に | クリボウの Blogger Tips

Blogger ブログでは、匿名ユーザーや、アバターを指定していない Blogger ユーザーがコメントを投稿した場合、コメント欄にはデフォルトのユーザーアイコンが表示されます。今回は、このデフォルトで使用する画像をブログで自由に設定する方法についてです。

※ このカスタマイズは、「埋め込み」方式のコメント欄にのみ有効です。コメント投稿フォームを投稿ページに埋め込むには、Blogger 管理画面「設定 ＞ 投稿とコメント」ページから、「コメントの場所」項目を「埋め込み」にしてください。

今回のカスタマイズ方法については、以下のサイトを参考にしました。（コードは一部変更しています。）

導入方法

さっそく導入方法を見ていきます。


これだけです。簡単ですね。


カスタマイズ方法

導入方法で示したコード中、赤字部分で匿名用のアバター画像、青字部分で Blogger ユーザー用のアバター画像が指定されています。好みの画像が別にあれば差し替えてみてください。

緑色のコードは、JavaScript のライブラリ jQuery を呼び出している部分です。通常このままで問題ありませんが、ブログで他に jQuery を呼び出して使っている箇所がある場合、省略した方がいいと思います。


テンプレート変更などブログの模様替えの際に、こういった細かいところもテーマに合わせてカスタマイズしてみると面白そうです。フォトログやイラストブログなんかで、自分の撮った写真や手書き画像にしてみるのもいいかもしれませんね。

Blogger Buster に、矢印キーでページを移動する方法が載っていたのでご紹介します。今回参考にしたのは、こちらのページ。



導入方法

※ 必ずテンプレートのバックアップをとってから行ってください。


これだけです。導入しても閲覧者がこの操作法を使ってくれるかどうか分からないんですが、新しいページ操作をブログに取り入れてみたいという人は試してみるといいんじゃないでしょうか。

以前、Blogger の埋め込み式コメント欄でコメントをスレッド表示にできるようになった件について、記事にしました。

• Blogger 新コメントシステム開始、返信でスレッド表示に | クリボウの Blogger Tips

今日は、そのスレッド式のコメント欄のコメントに番号を振る方法です。コメントスレッドのもとになるコメントには「1」「2」「3」という吹き出しがつき、それらのコメントへの返信は、「1.a」「1.b」「2.a」のように、アルファベットが付加されます。

参考にしたのはこちらのページ。

• Numbered comments on threaded comments for Blogger/Blogspot | Blogger Help

導入方法

その１　Blogger 管理画面「レイアウト」から「ガジェットを追加」リンクをクリック、「HTML / JavaScript ガジェット」を選択して、以下のコードを貼り付けます。

その２　面倒だという人は、下の「Add to Blogger」ボタンを押して、スクリプトを導入したいブログを選択したのち「ウィジェットを追加」ボタンを押すだけでもＯＫです。「その１」と同じことを自動でしてくれます。

<style type="text/css"> .comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { content: counter(countcomments,decimal); counter-increment: countcomments; float: right; font-size: 22px; color: #555555; padding-left:10px; padding-top:3px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_Vhbaek5hfW1FKz_bTDQO4rl76Jtofvi0_hEuYejdE24VAxkr8Xh7i744tPn87CLDvx18YNZkuqjdVmr4JjZwlvJVKJmU-BKXSKrrHCt7JYiJTHC1SZuVzkIpN7VoRNl44UtQQ/s1600/comment+bubble2.png) no-repeat; margin-top:7px; margin-left:10px; width: 50px; /*image-width size*/ height: 48px; /*image-height size*/ } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: right; font-size: 18px; color: #666666; } </style>

コメントのたくさんつくブログでは、各コメントに言及するのに「3 にあるように…」とか「5.c のコメントで…」という風にコメントを指定することができるので、便利かもしれませんね。

人によっては、Blogger ブログの内容をコピーされたくない場合もあるかもしれません。そういう人にもってこいなのが、今回のスクリプト「Disable select-text script」。導入すると、ブログ上で文字列の選択ができなくなります。今回参考にしたのはこちらのブログ。

• Disable Mouse Selection On Your Blogger Page | Protect Your Page From Being Copied @ Codes Blog - The Tips Blogger

実際に導入してみたデモページがこちら。

• Disable Mouse Selection On Your Blogger Page | クリボウのテストブログ

導入方法

その１　Blogger 管理画面「レイアウト」から「ガジェットを追加」リンクをクリック、「HTML / JavaScript ガジェット」を選択して、以下のコードを貼り付けます。

その２　面倒だという人は、下の「Add to Blogger」ボタンを押して、スクリプトを導入したいブログを選択したのち「ウィジェットを追加」ボタンを押すだけでもＯＫです。「その１」と同じことを自動でしてくれます。

<script type="text/javascript"> /*********************************************** * Disable select-text script- c Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //form tags to omit in NS6+: var omitformtags = ["input", "textarea", "select"]; omitformtags = omitformtags.join("|"); function disableselect(e) { if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1) { return false; } } function reEnable(){ return true; } if (typeof document.onselectstart != "undefined") { document.onselectstart = new Function("return false"); } else { document.onmousedown = disableselect; document.onmouseup = reEnable; } </script>

フィードや Google ウェブ検索のキャッシュを拾われると結局コピーできちゃうわけなんですが、まあないよりはましかもしれません。特に全体にはお勧めしませんが、「引用も禁止！」というブログの運営方針の人だけ参考にしてもらえたら、と思います。

IE 互換モードの削除

IE10でさえbloggerのレイアウトがぶっこわれるからIEオワタなと思ってたら、bloggerのほうで全IEについてIE7相当の表示に変換するコードがあったみたい。rgba()が透過無しに変換されてる時点で気づいてましたしー;

Twitter / hinoki__: IE10でさえbloggerのレ

そうそう、クリボウも気になってたんです、このタグ。Blogger 管理画面「テンプレート ＞ HTML の編集」と進むと、head 要素内の最初の方で出てきます。


Blogger ブログのテンプレートに標準的に入っているこのタグは、Internet Explorer（以下 IE） 8、IE 9、IE 10 でページを閲覧したときに、IE 7 で見た場合と同じように表示させるためのもの。

「IE 7 だと崩れなかったのに IE 8 以降ではレイアウトが崩れてしまう…」という場合には重宝する設定ですが、たいていはその逆で、HTML5 や CSS3 対応の新しいブラウザ向きに作られたテンプレートが、IE 7 互換モードでは正しく表示されなくなってしまいます。すでに Blogger 自体も Internet Explorer 7 のサポートを終了していますしね…。

• Blogger、モダンブラウザ以外のサポート停止へ | クリボウの Blogger Tips

だったらいっそのこと、この IE 7 互換モードのタグを削除してみてはどうだろう？と、このブログのテンプレートで試してみたのがこちら。

  

どちらも Windows 7、IE 9 で閲覧時のスクリーンショットです。左が標準で、右がタグ削除時。細かな違いですが、枠線のカーブや影が IE 7 互換モードでは無効になっていたのがわかると思います。

ということで、最新の IE、Chrome、Firefox で見比べたときに IE だけ表示が違う場合には、このタグを削除してみるといいかもしれません。影響が出るのは、IE 8、IE 9、IE 10 での閲覧時のみですし…。ぜひ一度お試しを。

ここまで書いてきて、こういう趣旨の記事をどこかで見たような…と探してみるとすぐに見つかりました。合わせてお読みください。

• BloggerをIEで開くと最新版でもIE7として表示されることによる問題 | DevAchieve

IE 互換モードの複数指定

• BloggerのテンプレートのIE=EmulateIE7の対応について 【IE9】 | 某氏のたわごと NEXT

で、IE 7 互換モードのタグを次のように変更する Tips が掲載されていました。


このタグを使うと、

IE9の時は、IE9モードで表示され、IE8の時はIE7モードで表示されます。

とのこと。HTML5 と CSS3 がジャンジャン使える IE 9 以降と、まだ使えない IE 8 両方のことを考えると、このタグに変更しておくのが今のところ一番いいのかもしれません。


更新情報：

• 2012-07-08 … 「IE 互換モードの複数指定」の項目を追記しました。

現在、ブログや投稿を Google +1 や Facebook「いいね」、Retweet してもらうためのボタンがいろいろと公開されています。Blogger 関連のつぶやき（ネタ帳とも）の中にも、この手のガジェットの話題が増えてきたように思うので、ここで一挙公開しようと思います。


ローソンガジェット

• ローソンガジェット｜エンタメ・キャンペーン｜ローソン

で、公開されているローソンの PR 用ガジェット。Twitter、Facebook、はてなブックマークのボタンがブログの左側に並びます。選択できる色のテーマは 6 つ。いろんな配色のブログに対応できるんじゃないでしょうか。

導入方法については、かずうさんがまとめてくれていますので、リンク先からご確認ください。

• かずうの気まま日記: 【ブログパーツ】『ローソンガジェット』設置で３つのお得を体験する！（LAWSON GADGET）

Awesome Floating Social Subscribing Widget

• Awesome Floating Social Subscribing Widget With Cool Hover Effect For Blogger ~ Helper Blogger

で、みつけたシンブルなボタン。ライブデモはこちら。（本来のデモページは広告がポップアップしてくるので、うちのテストページにしています。）


このガジェットのコードは HTML と CSS だけで書かれているので、画像を変えたりリンク先を変えたりといったカスタマイズがけっこう簡単にできると思います。

上掲のコード自体もすでにカスタマイズされたもので、オリジナルはこちらのようです（デモはこちら）。不思議な生き物が見えますね…。


Animated Sassy Bookmarking Gadget

• Animated Sassy Social Bookmark Gadget For Blogger | Spice Up Your Blog

で見つけた、ピョンと出てきて、シュッと引っ込むソーシャルボタンたち。ライブデモはこちら。動きがとても楽しいかと。



忍者おまとめボタン

• Twitter、Facebookボタンなどをまとめて簡単設置｜忍者おまとめボタン

で公開されているのは「忍者おまとめボタン」。これは、各サービスてバラバラに提供されているボタン類を一括して設定することができるサービス。一度ブログに貼り付けてしまえば、「忍者おまとめボタン」のページからレイアウトを変更することが可能です。変更のたびに Blogger テンプレートを編集しなくてもいいのが、非常に便利かと。

導入の仕方についてはは、すなふさんのページをご参考に。

• [blogger]ひとつひとつ設置は面倒だ！ソーシャルボタンサービス「忍者おまとめボタン」を設置してみる。 - sunabox

Zenback

• Zenback

Twitter 経由で Kamimura さんにこれを愛用していると教えてもらいました。「関連するみんなの記事」や Zenback 関連のつぶやきが入ってしまうものの、たしかにこれでもソーシャルボタンをまとめることができますね。

Blogger ブログへの Zenback の導入については、romberg さんのページが詳しいです。

• Bloggerにzenbackを美しく導入する方法-swordsmith

まだまだあった気がしますが、クリボウが今思い出せたのはこれだけ。おすすめのものがほかにもあれば、教えてもらえるとうれしいです。

Blogger 公式でも一応「+1 ボタン」ガジェットや「Google+ バッジ」ガジェットが用意されていますが、ほかのサービスのボタンとの統一感を出すのが難しいですね…。上記のソーシャルボタン詰め合わせガジェットを上手に使えば、ブログデザインもきっとよくなるはず。ということで、ぜひ一度お試しを。


＜更新＞

2012-06-25:  Zenback の項目を追加しました。

Blogger ブログのテンプレートに、外部ツールのスクリプトなどを直接貼り付けると、思った通りには動かない場合があります。

ブログのテンプレートに直接コードを書くとGoogle AdSenseは表示されませんでした。

Google AdsenseをBloggerに自在に設置するためのノウハウ +Plus One World

私の環境では、ツイッターボタンがHTML貼り付けだとうまく表示できませんでした・・・。

簡単に設置出来る。Twitterタブボタンをbloggerに設置してみた。 | sunabox

Blogger のコメントアウトの扱い

なぜこういうことが起こるかというと、配布されているコードに含まれるコメントアウトが、Blogger では特別な扱いを受けるから。

たとえば、Blogger の 「HTML の編集」では


という形のコメントアウトが使えません。正確には、 <-- と --> とで囲まれたこのコードの行は Blogger テンプレート内のコメントとして扱われてしまい、実際のブログのページ生成時には、この部分が削除されてしまいます。

なので JavaScript でよく


という風にコードを書きますが、これを Blogger のテンプレートに直に書いても、


というデータしか書き出されず、肝心のコードが実行されなくなってしまいます。


対処法

では、どうやってコードを書き出すかというと、

• コメントアウトの書き換え
  
  <!-- コード -->
  というコードを
  &lt;!-- コード --&gt;
  と実体参照に書き換えて「HTML の編集」に貼り付けると、
  
  <!-- コード -->
  という風に HTML 上のコメントアウトとして、意図したとおりにブラウザにデータが届きます。
  
  
• コメントアウトをやめる
  単純に <-- や --> を消して
  コード
  だけにする方法です。当たり前ですが、コードが消えてなくなることを回避できます。
  
  
• ガジェットに入れる
  Blogger の「HTML/JavaScript」ガジェットに貼り付けたコードは、先に示した Blogger 独自のコメントアウトの制約を受けません。
  <!-- コード -->
  と書いても削除されることなく、そのままブラウザに送られます。

といった方法があるかと思います。
ブログのカスタマイズを考えている人は、覚えておくといいんじゃないでしょうか。

Blogger に新しい「翻訳ガジェット」が追加されています。

• Translate, and two more new gadgets for your dynamic blogs | Blogger Buzz

ガジェットの追加は、Blogger 管理画面「レイアウト」から。「ガジェットを追加」リンクをクリックして、ガジェット一覧から「翻訳」を選びます。


うまく動かないときの対処法

…これだけで導入はいいはずなんですが、このブログにつけてみたところ、正しく動いてくれませんでした。問題点は、次の 3 つです。

• 翻訳できない
  最初に気づいたのは、翻訳したい言語の選択肢に「英語」が出てこないことです。うちの場合、ブログ各部の表記を「英語」にしているせいか、ブログのコンテンツの言語も英語だと判断されているようです。そのため「英語から他の言語へ」の翻訳という扱いになり、どの言語への翻訳もうまくいきませんでした。
• 表示形式を変更できない
  ガジェットの追加画面で、翻訳ツールの表示方法を「縦」「横」「プルダウンのみ」の中から選択することが可能なんですが、どう指定しても「縦」に戻ってしまいました。これはブラウザによるものかもしれません。
• ツールバーが常時表示される
  最後は、好みの問題の気もしますが…。このガジェットを付けると、「Google 翻訳」ツールバーがページ上部に常に表示されてしまいます。Blogger には、そもそも Navbar があるので、その上にさらにツールバーが表示されると、不恰好な印象を読者に与えかねません。

で、行ったのが、次のカスタマイズ。「翻訳ガジェット」追加してもうまくいかない場合にのみ、参考にしてみてください。


悪戦苦闘して、ようやく付けられた翻訳ガジェット。サイドバーに掲載しているので、動作を確かめてみてください。一度「英語」などで翻訳を行うと、その手続きを覚えているようで、再度ブログを表示したときにも自動的に「英語」で表示されるようです。


他の 2 つのガジェットも動的ビュー（ダイナミックビュー）対応に

「翻訳ガジェット」登場に伴い、従来からあった「ブログリスト」と「リスト」のガジェットも動的ビュー対応になりました。

これで、動的ビュー対応のガジェットは

• +1 ボタン
• Google+ バッジ
• 翻訳
• 読者
• ブログリスト
• リンクリスト
• リスト
• ラベル
• リンク登録
• 基本情報
• ブログアーカイブ

の 11 種類になりました。


関連：

• クリボウの Blogger Tips: ダイナミックビュー（動的ビュー）でもガジェットが使用可能に

サイトマップというのは、読者に「このサイトにはこんなコンテンツがありますよ」と知らせるためのページのこと。今回このサイトマップを Blogger ブログ上で簡単に表示する方法を見つけたので、ご紹介したいと思います。参考にさせてもらったのは、こちらです。

• Blogger 今まで書いた全記事をサイトマップとして設置してみた - 元「なんでもエンジニ屋」のダメ日記

このブログで導入してみたデモはこちら。

• クリボウの Blogger Tips: サイトマップ

ブログのこれまでの投稿がラベル別に一覧になっていると思います。


導入方法

Blogger の管理画面「ページ」タブのリンクを「新しいページ」→「空白のページ」と進み、出てきたページエディタを「HTML」モードにした上で、本文の位置に、以下のコードを入力します。赤字の部分はご自身のブログの URL に変更してください。


手順はこれだけです。めちゃくちゃ簡単ですね。



ちなみに…

サイトマップページを作成する上では別に知らなくてもいいことなんですが…、コードの青字部分は元々のコードをクリボウが変更した点です。

このサイトマップ表示ツールは Blogger ブログのフィードを利用していますが、そのフィード記載の本文の体裁を default から summary（要約版）に変更することで、通信するデータ量を減らし、タイトル一覧表示のための待ち時間を短くすることができます。


（参考：上が default、下が summary）

もう一つはフィードのパラメータ max-results の値です。Blogger では ATOM フィードに記載させる投稿数を max-results で指定することができるんですが、その件数の上限は 500 です。501 以上の値を指定しても 500 件までしか記載されないので、数値を 9999 から 500 に改めました。


追記（2012-04-22）：

投稿が 500 件以上あるブログでもサイトマップが表示できるよう、コードを改良してみました。詳しくは、以下のページをどうぞ。

• クリボウのプログラミングひとりごと: Blogger でサイトマップを表示するツールを、投稿が 500 件以上あるブログにも対応させてみた

追記（2014-01-18）：

現在、このサイトマップのスクリプトのオリジナルの配布元（www. abu-farhan. com）が攻撃サイトとして認定されています。それにより、スクリプトを貼り付けているブログもマルウェアに感染しているとして、ブラウザで警告が出されてしまうという問題が起きているようです。

今回、かつて保存していたスクリプトの中から www. abu-farhan. com へのリンクを排除し、kuribo.info のサーバーへ移しました。上掲の「導入方法」に示したコードも合わせて変更しています（緑字の部分）。以前、この記事を参考にサイトマップを導入した方は、お手数ですがコードを削除するか、上記のコードに変更してもらえますよう、お願いいたします。（2012 年追記の方法を取っている方は、修正の必要はありません。）ご迷惑をおかけして、申し訳ありません。

前回、カスタムドメイン以外の Blogger ブログ（blogpot.com）が日本からのアクセスで blogspot.jp へリダイレクトされるようになった件について、記事にしました。

• クリボウの Blogger Tips: Blogger ブログ（blogpot.com）へのアクセスが blogspot.jp にリダイレクトされる

記事では、「大々的に blogspot.jp に URL が変わったことを知らせてしまった方がいいのかも」とか「各サービスで設定の変更が必要になりそう」と書きました。

が、その一方で、Blogger に国別リダイレクトが導入されて、閲覧者の国によってブログがリダイレクトされてしまうとはいえ、Blogger ブログの基本のドメインはあくまで blogspot.com だという思いもあり…。

blogspot.jp、blogspot.com のいずれかを取るべきか、またはうまく共存させていくべきなのか、まだ迷っている最中なんですが、この記事ではとにかく、これまでに得た情報をご紹介したいと思います。


data:post.canonicalUrl

まずは、外部サービスとの連携についてです。リダイレクトで URL が変わることによって、はてブ件数や Facebook のいいね！件数がリセットされる問題が各所で起きています。

そんな中、いろんなブログを見て回っているうちに、

• blogspot.comからblogspot.jpへリダイレクトに伴なってソーシャル系で困った場合の対処方法 - buzzword update

という記事を見つけ、data:post.canonicalUrl という Blogger のテンプレート内で使える特別な情報タグ（データタグ）の存在を知りました。data:post.canonicalUrl は投稿ガジェット内で使える、投稿ページ URL を示すデータタグ。同様の data:post.url と異なるのは、必ず基本ドメインの URL を表示する点です。なのでたとえば、

• クリボウの Blogger Tips: Blogger の投稿フッターにはてなブックマーク件数を表示する方法

のカスタマイズでいうと、はてなからデータを得るために使用している data:post.url を data:post.canonicalUrl に置き換えて使うことで、これまで blogspot.com で溜めたはてブ件数をリセットせずに表示したり、引き続き blogspot.com ドメインの投稿ページをブックマークしてもらったりすることができます。


data:blog.canonicalUrl、data:blog.canonicalHomepageUrl

もしやと思って調べてみると、ほかに data:blog.canonicalUrl というデータタグもありました。Blogger には data:blog.url という、現在見ているページの URL を示すデータタグがありますが、data:blog.canonicalUrl はその基本ドメイン版。

たとえば、クリボウの写真日記: 京阪電車の分岐 というページを見ている場合、data:blog.url はそのままの URL を示しますが、

data:blog.canonicalUrl は を示します。

さらにさらに、ブログのトップページを表す data:blog.homepageUrl に対応するデータタグとして data:blog.CanonicalHomepageUrl というものも発見。これらのタグは、閲覧しているページの blogspot.com 版を「+1」してもらいたいとか、とにかくトップページの blogspot.com 版をブックマークしてほしいという場合に重宝するかと。


JavaScript でリダイレクト

先日のリダイレクトの説明記事に、コメントで教えてもらったのが次の記事です。

• DevAchieve: Bloggerでblogspot.jpにリダイレクトされるのを防ぐ方法

これは、「Disable Blogger Country Specific Domain Redirection」を翻訳し、blogspot.jp 用にスクリプトを書き直したものだと思います。読者が blogspot.com を開くと Blogger によって blogspot.jp へリダイレクトされますが、それを再び blogspot.com/ncr へリダイレクトするためのスクリプトになっています。/ncr をつけて blogspot.com に移動すると、一時的にリダイレクト機能が停止されるため、blogspot.com 上でブログを見てもらうことができます。

リダイレクトのリダイレクトについては Blogger（Google）の方針にそぐわないため、もしかするとなんらかのおとがめがあるかもしれません。導入はよって自己判断で。手順については、リンク先に丁寧に書かれているので、そちらを確認してください。

もし、上記スクリプトで問題がある場合は、クリボウもスクリプトを書いているので参考にしてもらえたらうれしいです。

• blogspot.jp にリダイレクトされてしまう Blogger ブログを再び blogspot.com/ncr にリダイレクトするためのスクリプト | クリボウのプログラミングひとりごと

Google Analytics でどちらもトラッキング

アクセス解析の Google Analytics では、blogspot.com、blogspot.jp どちらも同じアカウントでトラッキングできるようになっています。情報元はこちら。

• 最近, 気になったこと...: Blogger が .jp にリダイレクトされる

Google Analytics サイトを「アカウント管理 ＞ トラッキングコード」と進み「何をトラッキングしますか？」の項目で「複数のトップレベルドメイン」にチェックを入れて「保存」ボタンを押すと、blogspot.com も blogspot.jp も同じアカウントとして集計してもらえるとのこと。これはいいですね。


Zenback は blogspot.jp 用に

ブログに関連記事・キーワード、twitter・はてブでの言及などの情報欄を設置できるサービス Zenback では、スクリプトを blopspot.jp で取得し直して貼り付けることを推奨しています。

Bloggerのドメインが.comから.jpに変わって、Zenbackが動かなくなってしまった（「読込中」で止まる）方がいらっしゃるようです。

その場合、お手数ですが、http://zenback.jp/ にログインして再度新しいURLでスクリプトを取得しなおし、張り替えてくださいませ。

Bloggerのドメイン変更(.comから.jpへ)でお困りの方へ - Zenbackブログ

貼りなおすと、blogspot.com の情報も引き継げる模様です。というより、blospot.jp 用のスクリプトに変えても、はてブや twitter への問い合わせ自体は blogspot.com 対象で行っている（？）みたいです。


とりあえず、クリボウの現時点で知っている事柄はこれだけです。他にも情報をお持ちの方は、コメントなどで知らせてもらえるとうれしいです。


追記（2012-03-24）：

Zenback サポートからリプライあり、

@kurikuribo 「.jp 用に変えても、.com 対象で行っているみたいです。 http://goo.gl/hwHib」の件、Zenbackはcanonicalタグを見ているので、canonicalに.comが指定されていれば、そちらのURLへの反応を表示しています。

Twitter / @zenback: @kurikuribo 「.jp 用に変えても、.c ...

だそうです。テンプレートから みたいなコードを外したら、blogspot.jp 対象データが得られるのでは？と思いましたが、テンプレートのこの部分は、テンプレートタグ によって Blogger 内部のデータが呼び出されているため、編集不可でした。


Grow! も blogspot.jp 用に

Grow! ボタンも Zenback と同様、

Bloggerのブログに設置したGrow!ボタンが、正しく表示されない不具合が発生しています。

Bloggerをお使いのユーザー様で Grow!ボタンが正しく表示されない場合は、Grow!のセッティングページから当該ボタンのドメインの値を 「●●●●●.blogspot.com」 から 「●●●●●.blogspot.jp」 に修正していただくことで、正常に表示されるようになります。

【お知らせ】ブログサービス『Blogger』をご利用の皆様へ | Grow! Blog

という風に、blogspot.jp 用コードへの貼り換えを推奨しているようです。

「続きを読む」（「もっと読む」）機能について、前回記事にしました。

• クリボウの Blogger Tips: Blogger 「続きを読む」リンクに投稿タイトルを表示する方法

それで思い出したのが、Blogger 公式ヘルプフォーラムでの次の質問。

「もっと読む」をクリックすると、ホームページがある程度下にスクロールされた状態で、続きが表示されてしまいます。 僕としては、「もっと読むをクリックしても、下にスクロールせずに、ホームページの一番上から表示してほしいのですが

「もっと読む」をクリックしても、ホームページの最上部から続きが表示されるように...

ヘルプフォーラムではクリボウが回答したんですが、ブログで記事にしていなかったようなので、今回ご紹介することにしました。

Blogger の仕様として、「もっと読む」リンクのリンク先 URL には、投稿ページの URL 末尾に #more を付加したものが指定されています。リンクがクリックされると、この #more でページ内のタグ <a name="more"/>（「もっと読む」リンクがあった箇所）へとジャンプするようになっています。

なので、リンク先 URL に #more を付けないようにカスタマイズすれば、「もっと読む」リンクをクリックしてた場合でも、投稿ページの最上部から表示させることができます。


手順

１．ブログの管理画面「テンプレート ＞ HMTL の編集」（旧インターフェースでは「デザイン ＞ HMTL の編集」）を開きます。

２．「ウィジェットのテンプレートを展開」にチェックを入れます。

３．以下のようなコードを見つけます。（ブラウザの検索機能で「data:post.hasJumpLink」を探すのが便利です。）
４．赤字の行全体をを以下の青字の行に変更します。
肝腎なのは下線部の変更です。前回紹介した「続きを読む」リンクに投稿タイトルを表示する方法を導入しているブログでは、下線部に当たるもののみ変更してください。

投稿欄の「続きを読む」を「（投稿タイトル）を読む」に変更する方法分かれば教えていただけないでしょうか。

Blogger の投稿フッターにはてなブックマーク件数を表示する方法

というコメントがついていたので、こちらで回答しようと思います。


手順

１．ブログの管理画面「テンプレート ＞ HMTL の編集」（旧インターフェースでは「デザイン ＞ HMTL の編集」）を開きます。

２．「ウィジェットのテンプレートを展開」にチェックを入れます。

３．以下のようなコードを見つけます。（ブラウザの検索機能で「data:post.hasJumpLink」を探すのが便利です。）
４．赤字部分を以下の文字列に変更します。
青字部分は好みの言葉に変えてもかまいません。
ぜひ一度お試しください。

Blogger のブログの投稿単独のページは、 のように、通常「ブログタイトル: 投稿タイトル」という順番でページタイトルがつけられています。

が、テンプレートをカスタマイズすることで、これを のように「投稿タイトル | ブログタイトル」の順に変更することが可能です。

今回区切り文字に | を選んだのは、Blogger のダイナミックビューで、ページタイトルが「投稿タイトル | ブログタイトル」となっているので、それに合わせたもの。


手順

１．ブログの管理画面「テンプレート ＞ HMTL の編集」（旧インターフェースでは「デザイン ＞ HMTL の編集」）を開く。

２．次のコードを見つける。（ブラウザの検索機能を使うと便利です。）
３．見つけたコードを次のものに書き換える。

４．「テンプレートを保存」ボタンを押す。

これだけです。


備考

静的ページ（Blogger のいわゆる「ページ」）も同様にページタイトルを変更したい場合には、３のコードを
にします。

もちろん、投稿タイトルとブログタイトルの間の区切り文字は、違うものでも構いません。別のものにしたい人は、３のコードの赤字部分を差し替えてみてください。

サイドバーに画像を表示するガジェットとして、Blogger には「スライドショーガジェット」というのもが存在します。このガジェットを使うと、Picasa ウェブアルバムや Flickr やその他写真を含む フィードを登録することで、簡単にスライドショーを設置することができます。



このブログのサイドバーに、試しにつけてみたのが下の画像。



「小さい！」というのが第一印象なんじゃないでしょうか。ガジェットのタイトル間が妙に空いてしまうのも困りものですね。ガジェットの設定画面で調節できるといいんですが、あいにくこのガジェットの設定画面には、画像の表示サイズを指定する項目がありません。

そこで、今回のブログカスタマイズです。表示される写真を拡大して、最終的にこんな感じになります。



手順

１．ブログの管理画面「テンプレート ＞ HMTL の編集」（旧インターフェースでは「デザイン ＞ HMTL の編集」）を開きます。

２．次のコードをみつけます。（ブラウザの検索機能を使うと便利です。）

３．そのコードの直前に、以下の赤字のコードを挿入します。
４．「テンプレートを保存」ボタンを押します。

これだけです。

下線部分の値はこのブログ用のものになっています。自分のブログのサイドバーのサイズに合わせて使ってください。width をサイドバーのコンテンツの幅にして、height の方は写真の中で一番多いアスペクト比で指定するのがいいんじゃないでしょうか。

たとえば、うちのブログの場合、サイドバーのコンテンツのサイズは 320px なので、少し余裕を持たせてガジェットの幅（width）は 300px に、写真はほとんどが横縦比 3:2 なので、高さ（height）を 200px に、という風に指定しました。

みなさんも、ぜひいろんなサイズでスライドショーをレイアウトしてみてください。

参考：

• How to Change Slideshow Size? ~ The Blog Doctor.

コメントのスレッド表示

Blogger のコメントシステムが新しくなり、コメントへの返信が行えるようになりました。

• Engage with your readers through threaded commenting | Blogger Buzz

テストブログで試してみたのがこの画像。コメントが 2 階層になっているのが分かると思います。



このコメントシステムで返信が可能なのは、トップに投稿されたコメントのみ。返信のコメントにさらに返信して階層を深めるということはできません。

返信がつけられた元のコメントが削除された場合でも、返信コメント自体は残るようです。一方、管理者による「完全に削除」を行った場合は、コメントにつけられた返信もすべて削除されます。



新しくなったコメント欄を使用できるブログの条件については、Okano さんの説明が分かりやすいかと。

この新しいコメントシステムが利用できるのはコメントが埋め込みになっていて、なおかつブログフィードが全文になっている場合のみらしい。コメントを別ページ表示やポップアップ表示にしている場合には利用できないようだ。

Bloggerのコメント欄が進化 | The Okano Mail

返信がつけられた後に、コメント欄の位置設定を埋め込みからフルページに変更したらどうなるのか試してみたところ、返信かどうかに関係なく、コメントがフラットに時系列で並びました。話のつながりが分かりにくくなると思うので、コメント欄の位置設定はあまり変えない方がよさそうです。


スレッド表示されないブログへの対策

上掲の用件を満たしていても、独自にテンプレートをカスタマイズしたブログの場合、新しいコメントシステムを使えないことがあるようです。

そういう場合には、次のブログで紹介されていた、2 つの方法を順番に試してみてください。

• Threaded Comments For Blogger - Blogger Widgets

従来のコメント欄を使用したい場合

新コメントシステムは、要件を満たしているブログに自動的に導入されています。コメント表示を元に戻し、従来の埋め込みコメント欄を使いたい場合には、上の「その２」の手順を逆に行うといいと思います。下の画像は、コメントのスレッド表示が自動的に導入されたブログで、実際に元に戻してみたものです。



画像を最初のものと見比べてみると気づくと思うんですが、新しいコメントシステムにはタイムゾーンが反映されていません。いずれ対応するとは思いますが、

記事の投稿時刻は正しいのですが、コメントの投稿時刻は全て17時間前になってしまっています。設定を見てみると、正しい時刻になってますし・・・タイムゾーンも「東京」になっています。パソコンの時刻も正しいです。どのようにすれば直るでしょうか！？

クリボウの Blogger Tips: Navbar をはずした Blogger 用の検索ボックスガジェット

という質問のように、新コメントシステムの PST（太平洋標準時）表記が気持ち悪い人は、コメントシステムを従来のものに戻してみてもいいかもしれません。


ということで、いろいろ試してみてくださいね。

みなさんご存知のとおり、Blogger ブログにはトラックバックの仕組みがありません。以前は HaloScan という便利な外部サービスもあったんですが、それもすでにサービスが終了してしまっています。

そこで、半年くらい前に、日本語 Blogger ブログの情報サイト Japanese Bloggers Info に、トラックバック送信機能をつけました。その時の記事がこちら。

• クリボウの blogger tips: japanese bloggers info にトラックバック送信機能を追加

そして、ようやく今回 Japanese Bloggers Info にトラックバック送信機能を追加することができました。Japanese Bloggers Info のコードをブログのテンプレートに貼り付けることで、Blogger ブログ上でもトラックバックを受け取ることができるようになります。

百聞は一見にしかずということで、このブログにもトラックバック受信機能を設置しています。「○○ trackbacks」と書かれたリンクをクリックすると、トラックバック情報がポップアップしてくるので、一度押してみてください。

トラックバックを送信するには、トラックバックのポップアップ画面に表示されている Trackback Ping URL にトラックバックを送信します。この記事には、なんでも自由にトラックバックを打ってもらってかまいませんので、ぶろっぐぴんぴんや Japanese Bloggers Info から、トラックバックをテスト送信してみてください。

それで、いいなと思ったら、ご自身のブログにもどうぞ。トラックバック送信機能、受信機能ともに Japanese Bloggers Info 登録ブログのみ利用可能です。この際にぜひ、ブログを登録してくださいね。トラックバック受信機能の導入については、次のページにまとめています。Japanese Bloggers Info 登録後、ご確認ください。

• Japanese Bloggers Info: receive trackbacks

また、不具合のご報告やご要望などあれば、こちらにコメントをどうぞよろしくお願いします。

Blogger in Draft から、ブログのファビコンを設定することができるようになりました。

• Blogger in Draft: Customize Your Favicon

ファビコンとは

ファビコンというのは、ブラウザでウェブページを開いたときにロケーションバーや、タブに出てくるこんなアイコンのこと。



通常 Blogger ブログは、ファビコンとして が表示されるんですが、これを自分の好きなものに換えることができるというわけ。

Blogger ブログに限らず、どのサイトもそうなんですが、ファビコンを設定するには、

１．Favicon をルートに
サイトのルートディレクトリに favicon.ico と名前をつけたアイコンファイルを置きます。それだけ。

２．各ページでアイコンの設定
１が不可能な場合（blogspot とか）は、設定したいそれぞれのページのソース、head 要素内に link タグ
<link rel="SHORTCUT ICON" href="アイコンファイルの URL" />
を挿入します。

クリボウの Blogger Tips: Favicon を設定する

のどちらかを行わないといけません。今回 Blogger in Draft に追加されたのは１で、Blogger がユーザーのアイコンファイルをブログのルートディレクトリにアップロードしてくれるようになっています。うちのはこれ。

• http://www.kuribo.info/favicon.ico

従来 blogspot のブログユーザーがしていた２の方法のようにアイコンファイルの置き場所を確保する必要がないので、とても便利です。


設定方法

ちょっと前置きが長くなってしまいました。次に設定方法です。Blogger in Draft の管理画面「デザイン ＞ ページ要素」ページを開きます。「Navbar」の上に（読みにくいんですが）「お気に入りアイコン（ファビコン）」という項目が今回追加されています。



この「編集」リンクをクリックすると、「お気に入りアイコン（ファビコン）を設定」というウィンドウが開きます。



あとは、このウィンドウでパソコン上のアイコンファイルを選択し、「保存」を押すだけ。簡単ですね。


アイコンファイル変換ツール

ついでなんですが、アイコンファイルなんてないよという人には、次のサイトが便利です。手持ちの PNG、GIF、JPEG 画像を、ウェブ上で自動的に 16x16 のアイコンファイルにしてくれます。画像をトリミングしてアイコン生成…とかもできますよ。

• favikon

ということで、ぜひ Blogger 公式の機能でファビコンを設定して、他人とは違う自分だけのブログを目指してみてくださいね。


追記（2011-08-06）

Blogger ブログへのファビコン設定機能が、Blogger in Draft を卒業して、無事 Blogger に正式採用されたようです。

• Blogger Buzz: Latest updates, August 1st

みなさんお気づきのとおり、遅ればせながら、ようやくレイアウトテンプレートの仲間入りをしました。そこで、自分のブログをカスタマイズしていくついでに、その記録をこちらに掲載していこうと思います。

最初は、投稿のフッターにはてなブックマーク件数を表示する方法。 （はてなのヘルプ「自分のブログに「○○users」を表示する」に Blogger についての説明もあるんですが、情報が古く、現在 Blogger で一般に使われているレイアウトテンプレートでの導入方法は書かれていません。）




導入方法

１．Blogger 管理画面「デザイン ＞ HTML の編集」ページで、「ウィジェットのテンプレートを展開」にチェックを入れます。

２．投稿フッター部分 <div class='post-footer'> を見つけ出し（ブラウザの検索機能を使うと便利です）、コメント件数表示部分

のすぐ後に

※
という文字列を挿入して「テンプレートを保存」します。これだけ。ぜひお試しくださーい。


追記（2011-05-05）：

その２

記事を公開した後で、こんなページを発見。

• 使いやすくなりました! はてなブックマークボタン

新しい画像が用意されていたんですね。これを Blogger に表示させるコードを考えてみました。こっちの方がいいかも…という人は、手順２の※マークのコードを


に換えて、貼り付けてください。


その３

さらにこんなページも発見。

• 新はてなブックマーク件数取得 API を使って自分のページに件数を埋め込む最も簡単な方法 - IT戦記

今度は画像ではなく、はてなのブックマーク件数取得 API を JSONP でたたいて、JavasScript で書き出す方式です。通常の文字列で表示されるので、コメント件数とかの表記と統一させやすいかと。こう表示させたい場合、手順２の※マークのコードを


に換えて、貼り付けてください。


関連（クラシックテンプレートの場合）：

• 被はてブ数を表示する２
• 被はてなブックマーク数を表示する