クリボウの Blogger Tips

Blogger テンプレートでラムダ式が使用可能に

2016-05-30T00:14:00.001+09:00

新しいテンプレート表現「ラムダ式」

昨年（2015年）5・6 月に、Blogger テンプレートに新しい表現方法が相次いで登場したのを覚えているでしょうか。

Blogger テンプレート上で扱える構文が増えて、随分柔軟になった印象を受けたものですが、今回、さらにラムダ式が使えるようになりました。次のリンクが Blogger 公式のアナウンスです。

Official Blogger Blog: More custom template flexibility

「ラムダ式とはなんぞや？」という人は、このサイトの説明がわかりやすいかと。

第1回　ラムダ式－＠IT

// 匿名メソッド
Calculate(1, 2, delegate(int x, int y) { return x + y; }); // 出力：3

// ラムダ式
Calculate(1, 2, (x, y) => x + y); // 出力：3

無名関数の定義と呼び出しが簡単に記述できる式というと…伝わるでしょうか。Blogger テンプレート上に記述する実際の例として挙げられているのが次のコードです。

<b:if cond='data:post.labels any (l => l.name == "Flower")'>
<img src=’/img/flower.jpg’ />
<b:if/>

その投稿に「Flower」ラベルがついていれば、花の画像を表示するというコードです。これまで b:loop タグを使わないと書けなかったものが、確かに随分簡単になっていますね。

Blogger で使えるラムダ式の仕様

Blogger で実際に使えるラムダ式ってどんなもの？と思って調べてみると、ヘルプフォーラムで解説を発見。

Lambda expression - Google プロダクトフォーラム

例えば

data:posts count (p => p.numComments > 0)

というコードは、少なくとも 1 コメントついている投稿の数を示すためのもの。

細かく見ていくと、赤字部分は対象となるデータ（アイテムセット：今回は投稿情報）を、青字部分は行う処理の種類（ラムダオペレータ：今回はその数）を、緑部分は実際のチェック内容（ラムダエクスプレッション：今回はコメントの数 0 より多いかどうか）を指定しています。

ラムダエクスプレッションは、さらに => 前後で分けられて、左辺に変数名（今回は data:posts セット内の各アイテム post を p と名付けている）を、右辺にその変数を使った表現を記述することになっています。

うーん、使い慣れると便利なのかもしれませんが、使い方をマスターするのになかなか時間がかかりそうですね。ちなみに、ラムダオペレータに使えるキーワードは次の通り。

any	... ラムダエクスプレッションを満たすアイテムがセット内に 1 つでもあれば true を返す。
all	... セット内のアイテムすべてがラムダエクスプレッションを満たせば true を返す。
none	... ラムダエクスプレッションを満たすアイテムがセット内に 1 つもなければ true を返す。
count	... セット内でラムダエクスプレッションを満たすアイテムの個数を返す。
filter	... セット内でラムダエクスプレッションを満たすアイテムだけを集めたセットを返す。
map	... ラムダエクスプレッションで記述された結果を集めたセットを返す。
first	... セット内でラムダエクスプレッションを満たす最初のアイテムを返す。

filter や map が自在に使えるようになれば、Blogger テンプレートでもかなり複雑な指示が出せそうですね。われこそは！と思う人は、ぜひチャレンジしてみてください。

Japanese Bloggers Info がメンテナンス終了、OAuth2 対応に

2015-08-19T21:53:00.002+09:00

(cc) Frits Ahlefeldt-Laurvig

5 月にお知らせしていた Japanese Bloggers Info のメンテナンスが、ようやく終わりました。

Japanese Bloggers Info メンテナンスのお知らせ

メンテナンス期間中は、ブログの閲覧しかできなかったんですが、再び新しいブログの登録ができるようになりました。

今回の問題は、Web アプリケーションを動かしている Google App Engine 上で、AuthSub という認証システムが使用不可になったことが原因です。

（もう少し正確にいうと、非推奨になったシステムを使い続けたクリボウのズボラさが原因です。すみません…。）

そして、認証システムの更新作業中に、これまた Master/Slave Datastore というデータシステムが使用不可になってしまい、アプリケーション自体が動かなくなってしまいました。それで、Master/Slave Datastore から High Replication Datastore へデータシステムの移行をしたのち、AuthSub から OAuth2 への認証システムの移行を行ったため、とても時間がかかってしまったというわけです。M/S から HRD への移行については、以下に少し書いているので、興味がある人はどうぞ。

GAE の Datastore を Master/Slave から High Replication (HRD)へ移行する方法 | クリボウのプログラミングひとりごと

…ということで、Japanese Bloggers Info でまたブログ登録ができるようになりましたので、まだ登録していなかった！という人も、ぜひ一度登録してみてくださいませ。

Blogger テンプレートにさらに新しいウィジェットタグが登場

2015-08-17T01:29:00.000+09:00

(cc) Jerry "Woody"

前回、Blogger テンプレートのウィジェットタグに新しい表現方法が登場という記事を書きましたが、すぐにまた新しいウィジェットタグが追加されています。

Blogger Buzz: Even more expansions to the Blogger template language

何が追加されたかというと、以下のとおりです。

b:elseif
b:switch
b:eval
b:with

早速、順に見ていきます。

elseif

これまで、条件分岐では b:if （条件に合う場合）と b:else （合わない場合）というのがあったんですが、条件に合わない場合に別の条件を追加する b:elseif が新しく登場しています。下に掲載したのは、ページの種類によって表示する内容を切り替えるコード例です。

<b:if cond='data:blog.pageType == "static_page"'>
  静的ページに表示する内容
<b:elseif cond='data:blog.pageType == "item"'>
  個別投稿ページに表示する内容
<b:else/>
  それ以外のページに表示する内容
</b:if>

switch

複数の条件分岐で参照するデータが同じ場合、b:switch というタグを使うこともできます。b:switch に参照するデータ名を、b:case に等しいかチェックする値を入れます。すると、該当した b:case の後に記述した内容が表示されます。b:default の後に記述した内容は、b:case で等しい物がなかった場合に表示されます。上のコードと同じ内容を b:switch で書き直したのが、下の例です。他のプログラム言語の switch でよく見られる break は要りません。「トップページの場合は」、「アーカイブページの場合は」などと、条件をどんどん付けくわえたい場合に便利です。

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  静的ページに表示する内容
<b:case value="item" />
  個別投稿ページに表示する内容
<b:default />
  それ以外のページに表示する内容
</b:switch>

eval

b:eval は、文字列を式として実行するための文です。ちょっとした計算や文字列の連結をして、内容を表示するのに適しています。

例 1：　画像などに適用するスタイルシートに、画像の縦横の比率そのままで拡大・縮小させた値を記述する例です。

min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;

（「新しい幅 × 高さ ÷ 幅」を計算して、「新しい高さ」を表示。）

たとえば元の幅 width が 200 で、高さ height が 150、新しい幅 newWidth が 400 の場合には、(400 * 150 / 200) ということで、実際に以下の内容を表示します。

min-height: 300px;

例 2：　配列構造になったデータを直接表示する例。

<b:eval expr="data:post.labels[0].url" />

（投稿の一つ目のラベルのラベルページの URL を表示。）

データを直接記述する <data:post.labels[0].url/> という書き方でもいいんじゃないかと試してみたんですが、これだとテンプレートを保存することができませんでした。従来、配列のような構造になっているデータについては b:loop を使わないといけなかったのが、b:eval でも直接記述できるようになったということのようです。

例 3：　三項演算子の結果を書き出す例。三項演算子は、前回追加された表現でしたね。

<b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />

（投稿にコメント可能な場合「Comment」と表示、不可の場合は「Comments Disabled」と表示。）

with

b:with を使うと、計算式の値などを一時的に格納する変数を作ることができます。

<b:with var='myComputedValue' value='50 + 40' >
<data:myComputedValue/>px;
</b:with>

（「50 + 40」の計算結果を「myComputedValue」に格納。その後、「px;」を付加して書き出し。）

変数を書き出すのは、<data:myComputedValue/> と <b:eval expr='data:myComputedValue' /> のどちらを使ってもＯＫです。属性値としてなら expr:width='data:myComputedValue' のように使います。なお、b:with で囲んだエリア内でしか変数は使えないので、注意が必要です。

あとがき

今回のテンプレートタグの仕様変更で、実際には内容を書き出さずに、変数を指定したり、計算をしたりできるようになりました。Blogger テンプレートでできることが、格段に広がった印象です。新しいテンプレートタグを駆使して、自分だけのテンプレートづくりに挑戦してみるのもいいかもしれません。テンプレートタグのこういう組み合わせで、こんなことができるよというアイデアがもしあれば、教えてくださいね。

関連：

Blogger テンプレートのウィジェットタグに新しい表現方法が登場

参考：

Blogger テンプレートのウィジェットタグに新しい表現方法が登場

2015-05-24T02:30:00.000+09:00

(cc) Cambodia4kids.org Beth Kanter

Blogger のテンプレートには、ウィジェットタグという、一定の条件ごとに出力する HTML コードを変化させるための特別なタグが存在します。今回、このウィジェットタグに新しい表現方法が加わったと、Blogger Buzz が伝えています。

Blogger Buzz: Adding new expressions to Blogger templates

これまで、ウィジェットタグの中では

+ で値を連結したり
- で値を差し引いたり
== や != で値が等しいか等しくないかをチェックしたり
< や >、<=、>= で値を比較したり

といったことができたんですが、今回それらに加えて、次のような演算子や表現が使えるようになりました。

NOT 演算子

! や not を使って、「何かが true（真）ではないとき」という条件を表現する。

<b:if cond='!data:post.allowComments'>...

（コメントが可能でなければ…）

これまでは、<b:else/> を使って表現していたヤツですね。

三項演算子

? と : を使った三項演算子。? の前の条件が true（真）の場合は : の前のもの、false（偽）の場合は : の後ろのものを表示します。

<a expr:class='data:post.allowComments ? "comments" : "no-comments"' ...

（コメント可能な場合、a 要素の class 属性に comments を指定し、不可能な場合は no-comments を指定する。）

これまた、<b:if cond='...'> と <b:else/> を組み合わせて、表現していたものです。

メンバシップ演算子

これは、ある値が集合の要素の 1 つであるかどうかをチェックするためのもの。in と contains とが使えます。

<b:if cond='data:blog.pageType in {"index", "archive"}'>...

（ページタイプがトップページかアーカイブページのときに…）

<b:if cond='{"item", "static_page"} contains data:blog.pageType'>

（ページタイプが個別ページか静的ページのときに…）

in と contains で、チェック対象の値と集合（もしくは配列）の記述順が逆になるので要注意。とはいえ、複数の <b:if cond='...'> を併記する必要がないのは、便利です。

AND 演算子

and や && を使って、複数の条件をともに満たす場合について、記述可能に。

<b:if cond='data:blog.pageType == "index" and data:post.allowComments'>...

（ページタイプがトップページで、かつコメント可能なとき…）

以前は、<b:if cond='...'> をネスト（入れ子に）して実現していたもの。

OR 演算子

or や || を使って、複数の条件のうち、1 つでも満たす場合について、記述可能に。

<b:if cond='data:blog.pageType == "index" or data:post.allowComments'>...

（ページタイプがトップページか、またはコメント可能なとき…）

in、contains と同様、これからは <b:if cond='...'> を何回も書かなくて済みます。

括弧

( ) を使って、演算の順序を指定する。

<div expr:style='"max-width: " + (data:width + 10) + "px;"'>...

（div 要素 style 属性の最大幅に、現在の横幅プラス 10 ピクセルした値を指定する。）

これらの新しい演算子や表現を使うと、これまで Blogger テンプレートで条件分岐を記述していた、煩雑な作業が随分と楽になりそうですね。本格的に Blogger テンプレートをいじってみたい！という人は、ぜひ参考にしてください。

参考：

レイアウト用タグの表現 - Blogger ヘルプ

Japanese Bloggers Info メンテナンスのお知らせ

2015-05-17T17:20:00.001+09:00

先日、こういうメールをもらいました。

一昨日「Japanese Bloggers Info」を見つけました、あまりメジャーではないBloggerに関する情報サイトの存在が心強いです、そこで見つけた諸々の情報を有効に使わせていただきます、ありがとうございます。

さて、登録を済ませまして私のブログも登録しようとしたのですが、ログイン認証の段階で、

「お知らせ: サポートが終了した API は 2015 年 4 月 20 日よりご利用いただけなくなりました。サービスを再びご利用いただくために、代替 API への移行をお願いいたします。」

とのことです、ブログ登録に代替の手段はありますでしょうか。

このエラーは、Japanese Bloggers Info （以下 JBI）を動かしている Google App Engine （以下 GAE）上で、認証システムとして AuthSub が使えなくなり、登録ユーザーの所有ブログ情報が取得できなくなったのが原因です。現在、新しい認証システム OAuth2 への移行を行っている途中です。

このメンテナンスの間、JBI サイト上では、以下の機能が使えません。

JBI へのブログ登録
JBI からのブログ削除

ブログ情報削除に関しては、クリボウが GAE の管理画面で手動でデータを消すことということはできるので、急ぎブログを消したいという人は、削除したいブログの URL を本文に明記して、ブログを管理しているメールアドレスから、クリボウあてにメールをください。もしくは、ブログを管理している Google アカウントや Blogger アカウントで、この記事にコメントいただいてもかまいません。

ご不便をおかけしますが、メンテナンス終了まで、もうしばらくお待ちください。

Blogger のアダルトコンテンツポリシーが変更に…なりませんでした

2015-04-29T23:45:00.000+09:00

(cc) ! @SeX

Blogger のアダルトコンテンツポリシーの変更がされるというニュースが、2 月にありました。

Google、ブログサービス「Blogger」での性描写・ヌード投稿を3月23日から禁止へ - ITmedia ニュース

変更するとしていたコンテンツポリシーでは、

2015 年 3 月 23 日より、露骨な性描写やヌードを扱った画像および動画を Blogger で一般公開することはできなくなります。

とのことで、露骨な性描写やヌードを扱った画像や動画が含まれている場合は、ブログの公開設定が強制的に「限定公開」になる予定でした。

…が、このコンテンツポリシーの変更が、公式に撤回されています。

米Google、Blogger上でのアダルトコンテンツ公開禁止を撤回 | GGSOKU - ガジェット速報

で、現在のコンテンツポリシーがこちら。

Blogger ポルノコンテンツポリシー - Blogger ヘルプ

「アダルトコンテンツポリシー」から「ポルノコンテンツポリシー」に名前が変わっていますね。

ブログにポルノまたは露骨な性描写のコンテンツが含まれる場合は、アダルトコンテンツの設定をオンにする必要があります。この設定をオンにするとブログで警告が表示されます。アダルトコンテンツを含むブログが検出され、ブログの警告表示がオフになっている場合は、Google がオーナーに代わって警告表示をオンにします。これが繰り返される場合、ブログを削除することがあります。

というルールはこれまで通り。変更の知らせでヒヤリとした Blogger ユーザーも、ようやくホッと一息つけそうですね。

Blogger ヘルプフォーラムが閉鎖へ

2014-07-28T00:17:00.000+09:00

(cc) Brian Snelson

バッキーの日々是爆食/ウェブリブログで知った情報。Blogger ヘルプフォーラムが閉鎖されるというアナウンスが Google 社員からありました。

Blogger ヘルプフォーラムは今年の後半に閉鎖されることになりました。サポートのリソースを整理・統合することにより、プロダクトやサービスを全般的に改善することを狙いとしています。7 月 28 日よりこちらのフォーラムは「閲覧専用」になります。直ちにフォーラムが閉鎖されることはありません。今後の数ヶ月間はフォーラムのコンテンツを閲覧することが可能であり、ヘルプセンターは引き続きご利用いただけます。しかし、新規の投稿を行うことはできません。なお、英語フォーラムのご利用も可能です。
Blogger ヘルプフォーラム閉鎖のお知らせ - Google プロダクトフォーラム

ここに書かれている通り、現在 Blogger ヘルプフォーラムは現在閲覧専用で投稿不可になっており、今年後半には閉鎖される流れとのこと。3 年前にも同じようなアナウンスがあり、その時は閉鎖撤回の要望を出してそれが通ったんですが（参考）、今回はもうだめっぽいですね。

なお、英語版 Blogger Help Forum は従来通り利用できるとのことなので、非常事態の折りには、少しがんばって英語で質問を投稿してみるのがよさそうです。

Google+ に接続していない Blogger アカウント＝制限付きの Blogger プロフィール？

2014-01-27T23:05:00.001+09:00

既に制限付きの Blogger プロフィールを使用しています。

これまで Blogger は、Google+ に接続させることでブログがこんなに便利になりますよ、というアピールをくり返ししてきたと思うんですが、

Google+ プロフィールへの切り替えに関するよくある質問 - Blogger ヘルプ

これからは、Google+ に接続していないアカウントの方が「制限付きの Blogger プロフィール」と呼ばれるみたいです。

SharePoint Technical Blog: Blogger 投稿者名の変更方法(google+プロフィールの使用をやめる方法)

この言葉が確認できるのは以下のページ。クリボウは Blogger アカウントを Google+ に接続していないので、上に貼り付けた画像のように表示されました。

https://www.blogger.com/revert-profile.g?pli=1

単なる表記の問題とは思いつつ、Google の Blogger 戦略みたいなものが垣間見えたような気が…。Blogger が完全に Google+ に取り込まれてしまう日もそう遠くないのでは？と心配になってしまいました。Picasa ウェブアルバムや YouTube なんかもそうですが、Google+ を使っていないとサービスが不便になっていくというのは、ちょっと考えものですね。

Internet Explorer 10 や 11 で Blogger ダッシュボードを開くとエラーが出る場合の対処法

2013-12-31T12:18:00.000+09:00

Internet Explorer（以下 IE）のバージョン 10 や 11 で Blogger にログインすると、上記のような警告が出ることがあります。文面はこちら（括弧内はクリボウ訳）。

Web ページからのメッセージ
ERROR: Possible problem with your *.gwt.xml module file. The compile time user.agent value (ie9) does not match the runtime user.agent value (ie10). Expect more errors.

（エラー: *.gwt.xml モジュールファイルに問題がある可能性。コンパイル時のユーザーエージェント値「ie9」が実行時のユーザーエージェント値「ie10」と一致しません。さらに多くのエラーが予測されます。）

このエラーは、ダッシュボードからブログを選んだり、新規投稿画面を開いたりと、画面が切り替わる度に、何度も出てきます。この問題は、日本でも何件か報告されていますね。

ブラウザを替える

英語版の Blogger プロダクトフォーラムにも、この問題が上がっています。Hermione さんという Blogger Top Contributor によると、

Blogger is currently having problems in IE9, IE10 and IE11. the engineers have been alerted and are working on the problem.
In the meantime, please witch to a different browser, like Firefox or Chrome.

（Blogger は現在、IE9、IE10、IE11 で問題を抱えています。エンジニアはすでに警告を受けており、この問題に取り組んでいます。対処までの間、Firefox や Chrome などの、別のブラウザに切り替えてください。）

ERROR: Possible problem with your *.gwt.xml module file. - Google Product Forums

とのこと。Blogger チームが対応してくれるまで別のブラウザを使うというのが当面のおすすめみたいです。

ドキュメントモードをいじってみる

それでも「やっぱり IE がいい！」という人は、次の方法を試してみてください。

１． IE で Blogger のダッシュボードを開く。
２．「F12」キーで「開発者ツール」を開く（メニューの「ツール」からでも可）。
３．下半分のウィンドウの右上「ドキュメントモード」を「Internet Explorer 9 標準」にする。

これで、ページを切り替えるたびに出ていた警告がなくなると思います（多分…です。コメントで報告いただけるとうれしいです）。

Blogger にアクセスするたびにこうするのは面倒だと思いますが、Blogger チームが対応してくれるまでの間のつなぎとしては、使えるんじゃないでしょうか。IE + Blogger で、ストレスなく年末年始のあいさつができるといいですね。

…ということで、このブログの年内の投稿はこれで終わりです。みなさんのおかげで今年も一年、のんびり楽しく、ブログを更新することができました。ありがとうございました。みなさんも、どうぞよいお年をお迎えくださいませ。

追記（2014-01-01）：

IE11 の場合、「開発ツール」で「ドキュメントモード」のほかに「ユーザーエージェント文字列」も「Internet Explorer 9」に指定する必要があるそうです。詳しくは、以下のページをどうぞ。

ShiroYuki_Mot のひとりごと: Blogger IE11 上のダッシュボードでちょっと不具合 2013/12

Blogger で写真が勝手に「自動補正」されるのを止める方法

2013-11-23T11:19:00.000+09:00

Blogger の記事投稿時に写真をアップロードすると、自動的に写真の色合いが補正されるようになっているそうです。

実際に、真っ白な JPEG 画像を投稿してみると…こんな風になりました。

たしかに、やや灰色がかった画像に差し替えられていますね。いつの間にか、この「自動補正」機能が、デフォルトで有効になっているようです。ちなみに、補正の対象になるのは JPEG 画像で、PNG 画像についてはそのままの色合いで表示されるそうです。

新規写真について

新しく投稿する画像に対して、この「自動補正」機能を無効にするには、Google+ での設定が必要です。下のリンクから Google+ のアカウント設定画面を開き、「自動補正」の項目のラジオボタンで「オフ」を選びます。

Google+ - アカウント設定

これで、新しい写真に自動的に補正がかかることはなくなります。

補正後の写真について

すでに補正された画像については、上のような設定をしても、自動的には補正は解除されません。ブログ全体の画像を元に戻したい場合には、Google+ からアルバムを開いて、「下矢印」から「自動補正を適用」の項目で「オフ」を選びます。

ブログ全体の写真一括ではなく、「写真によっては自動補正を残しておきたい」という場合には、Google+ で個別に写真を開いて、「もっと」から「自動補正」の項目を出して「オフ」を選ぶことで、その画像だけ自動補正を解除することができます。

Blogger と Google+ が連携していくのはいいんですが、ブログの使い勝手が悪くなるというのはちょっと困りものですね…。写真が思ったように表示されない！と困っていた人は、ぜひお試しください。

Blogger のコメント欄がリニューアル

2013-10-14T14:12:00.001+09:00

この間、Google+ での言及を表示する「Google+ コメント欄」の話題を記事にしてきました。

が、今回は Blogger オリジナルのコメント欄について。先月（2013 年 9 月）までこうだったコメント欄が

こんな風に変わっています。

Google+ のコメント欄と同じような、フラットなデザインに変わっていますね。今回の変更について、Blogger 公式のアナウンスを見つけることができなかったんですが、

つわものぶろぐ: Bloggerのコメントシステムが改良

によると、モバイル端末からのコメント入力が随分しやすくなったとのこと。目下 Google+ に押されがちですが、Blogger オリジナルのコメント投稿も、今後活発になっていくといいですね。

Blogger ブログに従来のコメント欄と Google+ のコメント欄の両方を表示する方法

2013-09-16T18:10:00.000+09:00

(cc) THOR

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」キーからエディタの検索機能を使うと便利です。

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

<div id='g-comments-container'>
<h4 id='g-comments-label'>Comments on Google+:</h4>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='600' expr:data-href='data:blog.canonicalUrl'/>
</div>

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

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

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

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

ちなみに

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

/* Comments
----------------------------------------------- */

のすぐ後にでも、

.comment-form{max-width:600px;}

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

Blogger に投稿した記事を、自動で Google+ に共有できるようになりました

2013-09-14T12:23:00.000+09:00

(cc) Wicker Paradise

Google+ プロフィールや Google+ ページとリンクさせている Blogger ブログで、記事を投稿した際に Google+ に自動共有されるようになりました。

Blogger Buzz: Automatically share your blog posts to Google+

2013 年 4 月には Blogger のコメント欄を Google+ のものに置き換えるオプションも出ていますし（参考）、Blogger と Google+ の垣根がますます低くなりますね。

この設定を以前の方式（投稿の度に Google+ に共有するか確認するダイアログを表示したり、尋ねなくしたり）に戻す場合は、Blogger 管理画面「Google+」から「投稿後に自動的に共有する」のチェックを外すといいようです。詳しくはヘルプでご確認を。

投稿を Google+ で共有する - Blogger ヘルプ

Blogger 関連のつぶやき 2013-05、2013-06、2013-07、2013-08

2013-09-08T19:28:00.000+09:00

(cc) Jorge Quinteros

Google+ ページ「クリボウの Blogger Tips」および、Facebook ページ「クリボウの Blogger Tips」で流した 2013 年 5 月から 8 月までの Blogger 関連のつぶやきを、ここにまとめておきます。

（普段は 1、2 か月分でまとめて記事にしているんですが、前回まとめるのをすっかり忘れていました…。すみません。）

これらの Blogger 情報をリアルタイムで読みたい！という人は、上記リンク先からサークルに追加したり「いいね！」したりしてください。Twitter アカウントやフィードも開設しているので、そちらもぜひご活用ください。

Blogger 設置してあったGoogleカスタム検索が表示されなくなった - とのばしブログ
Syntax Highlighter を入れていると Google カスタム検索が使えなくなる場合があるらしいです。
How To Use Google+ And Blogger Comments System Together ~ Gameryard
従来の Blogger コメント欄と Google+ コメント欄を同時に使う方法。
Bloggerをおすすめできない２０の理由
ラベルや Navbar についてはともかく、他はまあそうかもしれません。
The Real Blogger Status: Blogger Blogs Redirecting To "opromo . com"
「Opromo free visitor meter」を設置しているブログで Opromo . com にリダイレクトされてしまう現象が起きているようです。
The Real Blogger Status: Empty Or New Blogs Can Be Classified As Possible Spam Hosts
新しいブログや投稿なしのブログは「スパムの可能性あり」に分類されていると、The Real Blogger Status の記事。
Blogger - Google+ - We introduced a new "Contact Form" widget today. If a…
Blogger に Contact Form ガジェットが出ましたね。
　» 「Blogger に「連絡フォーム」ガジェットが新登場」で紹介しました。
Create Separate Contact Page in Blogger - Blogger Widgets
Blogger 純正の「連絡フォーム」ガジェットを利用して、Blogger の「ページ」にフォームを設置する方法。
Design a Responsive Blogger Template - Tutorial | My Blogger Tricks
Blogger でレスポンシブテンプレートをデザインするためのチュートリアル。
　» 関連記事「Blogger で使えるレスポンシブデザインテンプレート 25 選」
Blogger Status
Blogger Status が更新停止。
　» 「Blogger 公式ブログ「Blogger Status」が更新終了」で紹介しました。
No Link
7 月 1 日で Google Reader がサービス停止するわけですが、Blogger の読者機能とか、Blogger にだけ残っている Friend Connect なんかはどうなっていくんでしょうね…。
→ 今のところ問題なく動いているようです。
【Blogger】モバイルURLが違うためウェブマスターツールにタイトルとディスクリプションが重複していると怒られてしまったので対応してみた | For Content Creator
canonical タグを外すと、ウェブマスターツールで警告が出るという話。
Bloggerでスパム扱いされ削除されたブログを復活させる方法 | traveling 旅とiPhoneと筋トレ
スパム判定でロックされたブログの解除にかかる時間→ 1 か月…。
2nd Life and Slow Life: Blogger で無駄時間！　腹の立つ！
投稿エディタで投稿のタイトルを空にしていると警告が出るようになりましたね。
Blogger の記事を markdown で記述する - C++でゲームプログラミング
markdown を JavaScript で HTML に変換して、Blogger の投稿内に表示する方法。
【Blogger】Amazonの広告を記事の下に入れるのに、ちょっと手間取ったXHTMLの仕様 | For Content Creator
Blogger のテンプレート編集で Amazon のコードを入れる時に気をつけること。
Blogger threaded comments (system) stylization with CSS code | Tech Prevue
あ、これいいかも。Blogger のスレッド方式コメントシステムの CSS カスタマイズ。
Blogger:「Powered by Blogger」の横に自動更新コピーライトを表示させたい
(c) で表示する年を JavaScript で自動的に書き込む方法。一年に一度のことだし、静的に書き換えてしまった方がいい気もしたり。
Twitter / ryou_takano: 【メモ】Bloggerのテンプレートに貼る場合、<sc ...
AdSense の非同期コードの貼り方。async='async' にして XHTML に対応させる必要があるようです。
　» 「Google AdSense の非同期広告コードを Blogger ブログに貼り付けるときに注意すること」で紹介しました。
Blogger:[忍者おまとめボタン]アクセス解析のシェア数が一致しない？
忍者おまとめボタンの解析ツールと実際のデータに違いがある理由について、忍者ツールズの見解が掲載されています。
Blogger：ラベル設定(5)Googleさん、「全て選択解除」ボタンを作ってほしいな
ラベルを一括編集しようとすると「一度に 50 個以上のエントリの変更はできません。」と警告が出るとのこと。
Blogger Blogs での脚注の付け方 | まさるな日記
Blogger 投稿中の脚注の付け方。
Bloggerブログ CSS外部化する方法。ページ表示速度を高速化 | せきらら白書～備忘録～
高速化のため、Blogger のスタイルシートを別ファイルにして参照する方法。
BloggerのブログにiPhoneからコメントが入れられない時の対処法 | ももぴんの競馬予想とレビューと？
Blogger のコメント欄、確かに分かりにくいかもしれませんね。
ドラクエのリハビリに Blogger から Github Page にブログ移行したった | 諸葛亮孔明もびっくりですわのブログ
Blogger → Github Page 移行記録。
Twitter / tw14g: Bloggerのスマホ用テンプレート、こっそり更新されたよう ...
ほんとだ、モバイルテンプレートのデザインがわずかに変更されていますね。
[K!]Blogger TIPS：特定のページのみにHTMLコードを記述したい場合に見る記事。
Blogger のテンプレートタグ <b:if> の分かりやすい使用例。
The Real Blogger Status: Recovering Stolen Blogs Is Not An Open And Shut Case
「Blogger ブログが盗まれた！」と Blogger チームに申請することで、逆にブログを盗んでしまうケースがあるそうです。そのため、Blogger チームが調査に非常に時間をかけるようになったとのこと。
Blogger IEの追跡防止でうまく表示されない | Alpaca PC
「追跡防止」機能のため、IE で Blogger ブログが正しく表示されないことがあるそうです。
Blogger:CSSスプライトでテキストリンクアイコンを読み込む
お、なんかかっこいい！リンクに CSS スプライトでアイコンをつける方法。
YouTube で「1980」をタイプするとミサイルゲームができる件
通常のブログコメント欄と Google+ コメント欄の両立を模索中…。上手くいけば記事にしようと思うんですけど、どうでしょう？
　» 「Blogger ブログに従来のコメント欄と Google+ のコメント欄の両方を表示する方法」で紹介しました。
Known Issues for Blogger
CAPTCHA 解決の後、ブログを公開できないという不具合が一部ユーザーに起きているそうです。

このブログでは毎月もしくは隔月で、記事にしたネタや記事にしきれなかった Blogger 関連ニュースを掲載しています。最新のニュースについては、Google+ ページ、Facebook ページ、Twitter アカウント、フィードのうち、利用しやすいもので確認してください。

Google AdSense の非同期広告コードを Blogger ブログに貼り付けるときに注意すること

2013-08-01T00:21:00.000+09:00

Google AdSense の非同期広告コード

Google AdSense の広告コードで、「非同期」タイプを選ぶことができるようになりました。

Inside Adsense - 日本語: 新しい広告コードによってユーザーの利便性が高まります

これまでの「同期」タイプと比べて、ページの読み込み時間が改善されるということです。

非同期広告コードとは、完全非同期バージョンの AdSense 用広告コードのことで、ウェブページの読み込み時間を改善し、サイトを訪れたユーザーの利便性を高めます。非同期コードには、ウェブページの他の部分の読み込みを妨げないというメリットがあるため、広告の読み込みに問題があるページでも、コンテンツの読み込みは問題なくできるようになります。モバイルユーザーの場合は特に、ウェブページの読み込み時間の短縮を実感できるでしょう。
非同期広告コードについて - AdSense ヘルプ

これまでは AdSense 広告が読み込まれるまで残りのページ要素が表示されなかったんですが、このコードを使うと AdSense 広告が読み込まれようと読み込まれまいと、ページの残りをどんどん表示していくことができるというわけです。

このコードの取得は、AdSense サイトから「広告の設定」タブを押し、各広告の「コードを取得」リンクをクリック、「コードタイプ」のプルダウンから「非同期」を選ぶだけ。表示される「広告コード」をコピーして好きな場所に貼り付ければ、非同期バージョンの広告を簡単に設置することができます。

Blogger テンプレートに貼り付ける場合の注意点

この非同期広告コード、Blogger の投稿本文や HTML/JavaScritp ガジェットに貼り付ける分には問題がないんですが、テンプレートに直接貼り付ける場合には注意が必要です。実際に AdSense の非同期コードを Blogger のテンプレートに貼り付けると、このような警告が出ました。

XML の解析中にエラーが発生しました。行 ***、列 ***: Attribute name "async" associated with an element type "script" must be followed by the '=' charactor.

「script 要素の async 属性に = がついてないよ」という内容です。新しいコードが Blogger のテンプレートエディタの XHTML 構文解析に引っかかっているんですが、これは async を async='async' とすることで回避することができます。

このことを知らせてくれたのが鷹野凌さん。いつもありがとうございます！

【メモ】Bloggerのテンプレートに貼る場合、<script async='async' ～と記述しないとダメ。｜Inside Adsense - 日本語: 新しい広告コードによってユーザーの利便性が高まります http://t.co/MqSGFRNSJk
— 鷹野凌 (@ryou_takano) July 16, 2013

AdSense も Blogger も同じ Google なんだから、もうちょっと融通をきかせてくれてもよさそうなものですが…。ともかく、テンプレートに貼り付けている AdSense コードを非同期に書き換えたい！という時には、ご注意ください。

Blogger ブログを Twitter Cards に対応させる方法

2013-06-15T20:04:00.000+09:00

このブログに

いつも楽しく拝読しています。
ところで、Twitter CardsのSummaryができるかBloggerへMetaタグを入れてみたのですがサムネイル画像が出なく、クリボウ様のサイトに情報ないかなぁと思い来てみた次第です。
もし、次のネタが決まっていないのなら、この辺りを記事にしていただければ嬉れしゅうございます m (_ _) m
Kats

というコメントが入っていたので、やってみたところ

できました。導入方法をこちらでまとめておきたいと思います。

Twitter Cards って何？

最初に Twitter Cards についてです。上の画像を見て分かるかと思いますが、Twitter のツイートに URL が含まれたときにそのリンク先ページのタイトルや要約、画像を自動的に挿入してくれるのが Twitter Cards の機能です。

これを表示させるためには、リンクされるブログの方で Twitter Cards に対応したメタタグをブログテンプレートに記載しておかないといけません。Facebook の OGP（Open Graph Protocol）と同じようなものと言うと理解しやすいかもしれません。

今回はシンプルな Summary Card の導入についてみていきます。参考にさせてもらったのはこちらのサイト。ありがとうございます！

ソーシャルメディアマーケティングラボ

導入方法

早速、Twitter Cards 用のメタタグを用意します。クリボウが使用したのは次のタグです。

2 行目赤字部分には、ブログに関する Twitter のアカウント名を入力します。これはオプションなので、特にアカウントがない場合には行ごと削除してかまいません。他の行は、どのブログでも通用するよう Blogger のテンプレート用データタグを使用しているので、そのまま使えるはずです。これらのメタタグを Blogger の管理画面「テンプレート＞ HTML の編集」で <head> のすぐ後に貼り付けて保存します。

その後、Twitter Developers で Twitter Cards の申請を行います。

Card Validator | Twitter Developers

「Card Catalog」のポップアップが出たら「Summary」を選択、「Validate & Apply」タブを押して、自分のブログの好きな投稿の URL を入力して「Go!」を押してください。

ここで、ブログの Twitter Cards 対応状況が確認できます。右側にはプレビューが表示されます。「Standard Tags」の項目がグリーンだったら、ブログ側の設定は問題なしです。

「Request Approval」を押して申請画面を開きます。Twitter アカウントなど、必要事項を記入して（ほとんど入力済みだと思います）「Register Domain」ボタンを押します。これで全作業が終了です。意外と簡単なんじゃないでしょうか。

これで Twitter 経由のアクセスが少しでも増えるといいですね。

技術的なことなど

ここから先は、気になる人だけ読んでください。先ほどのメタタグについての解説です。

1: <meta content='summary' name='twitter:card'/>
2: <meta content='@kuribo_blogger' name='twitter:site'/>
3: <meta expr:content='data:blog.pageName + " | " + data:blog.title' name='twitter:title'/>
4: <meta expr:content='"http://bloggerspice.appspot.com/postimage/" + data:blog.url' name='twitter:image'/>
5: <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

Twitter Developers のドキュメントで例示されていたメタタグを Blogger ブログ用に調整してみました。タグ内の属性が読みにくいのは、Blogger の HTML エディタが属性をアルファベット順に並べ替えてしまうので、混乱を避け最初からその順にしているためです。

１．まず、どの行でも、meta タグの最後に / を入れておきます。こうしておかないと Blogger の HTML エディタが

XML の解析中にエラーが発生しました。行 ***、列 ***: The element type "meta" must be terminated by the matching end-tag "</meta>".

と、meta タグが閉じていない旨のエラーを出してしまいます。

２．3 行目のページタイトル欄は、Blogger のテンプレート用データタグを使って「（投稿タイトル） | （ブログタイトル）」という設定にしています。区切りの文字「|」は変更可能です。Blogger 標準のページタイトル「（ブログタイトル）: （投稿タイトル）」を使いたい場合は青字部分を data:blog.pageTitle に変えるといいと思います。

参考：

Blogger ブログのページタイトルを「投稿タイトル | ブログタイトル」の順にする方法 | クリボウの Blogger Tips

３．4 行目のページの画像については、BloggerSpice という Web アプリを利用しています。http://bloggerspice.appspot.com/postimage/ に投稿 URL を付加して（メタタグ内ではページの URL を示すデータタグ data:blog.url を連結）アクセスすると、投稿内の最初の画像へとリダイレクトしてくれます。これがめちゃくちゃ便利です。

参考：

BloggerをOGPに対応させるときのog:imageをなんとかする : たき備忘録

ちなみに、data:blog.postImageThumbnailUrl というデータタグを使って、投稿のサムネイルを取得するという方法もあるにはあるんですが、その場合 Blogger 以外にアップロードした画像が反映できないのと、画像サイズが 72 x 72 ピクセルで小さいのとで、今回は採用しませんでした。

４．最後の行では、そのページの説明文を指定しています。Blogger では、2012 年から投稿ごとのメタデータ（descriptions）を投稿エディタから指定できるようになりました（参考１・参考２）。そのデータを持って来られないかな？と思い data:blog.metaDescription というデータタグを入れてみたところ、上手くいきました。めでたしめでたし。

Blogger 公式ブログ「Blogger Status」が更新終了

2013-06-05T21:02:00.000+09:00

Blogger サービスの障害情報を報告する公式ブログ「Blogger Status」が更新を終了しました。

Blogger Status

今後の Blogger のサービス利用可否については、ほかの Google サービスと同じように「Apps Status Dashboard」で見られるようになるとのこと。「Blogger ブログにアクセスできない！」というときに確認できるよう、今のうちにブックマークしておくといいかも。

ちなみに、Blogger のバグ・不具合についての公式ブログ「Known Issues for Blogger」の方はいまだ健在です。こちらは、「あれ？この機能動いてない？」というときに確認するといいですね。

Blogger で使えるレスポンシブデザインテンプレート 25 選

2013-06-02T18:00:00.000+09:00

今やブログは PC だけでなく、スマートフォンやタブレットでも見られるようになってきています。そこで、最近広がってきたのが「レスポンシブ Web デザイン」と呼ばれる、あらゆるデバイスに対応させるウェブデザインの手法です。ウィンドウの幅が狭まったときに、自動的にサイドバーが省略されたり、画像が縮小されたりするアレですね。

Blogger ブログ用にもいろいろなところでレスポンシブデザインのテンプレートが公開されているので、今回まとめてみることにしました。

「デモ」ボタンでテンプレートが適用されたブログを閲覧できるので、ウィンドウ幅を変更したり、別の端末で開いてみたりして、どんな表示になるのか実際に確認してみるといいと思います。

なお、ご自身のブログへのテンプレートの適用は自己責任で。必ずテンプレートのバックアップを取ってから変更するようにしてください。

参考：

Adsosive

水滴のような形のサムネイルが特徴的なテンプレート。

デモ　ダウンロード

Align

サイドバーが最初に 3 つ。投稿以外にたくさん情報を載せたい人向け。

デモ　ダウンロード

Aware

一番上の画像は、横にスライドしていくサムネイル。2 段目からが投稿。

デモ　ダウンロード

Bresponsive

最初の段はスライド。2 段目からラベルや投稿。

デモ　ダウンロード

Chronicl

ブログタイトルと投稿の間に、ラベルやページへのリンクが配置できる。

デモ　ダウンロード

CopyBlogger v2

幅が狭まると、サイドバーが投稿の後に回ったり画像が縮小されたり。

デモ　ダウンロード

DarkRed

狭めていくとかなり柔軟に変形する。ソーシャルボタンは最後まで残る。

デモ　ダウンロード

Elite Minima

4 段階に変形。ピンク基調でかわいらしい。

デモ　ダウンロード

Exelencia

ウィンドウ幅が変わるとゆっくり配置換え。サムネイルホバーで画像拡大も。

デモ　ダウンロード

ExtraNews

最初にランダムな投稿サムネイルがタイルのように表示される。

デモ　ダウンロード

Helicon

やわらかい色調のテンプレート。幅によっては画像のアスペクト比が無視されるので注意。

デモ　ダウンロード

Incipient

白基調のシンプルなテンプレート。写真のない投稿が多くてもよさそう。

デモ　ダウンロード

JPSTATION

投稿は基本的に抜粋。投稿の配置を訪問者が選べるボタンあり。

デモ　ダウンロード

Labnol

Twitter 的に短い投稿を載せるのがよさそう。

デモ　ダウンロード

Main Photo

その名の通り、写真メインのブログでどうぞ。

デモ　ダウンロード

Max Mag

最上部にあらかじめ広告エリアが用意されているのがいいかも。

デモ　ダウンロード

Minimum Theme

最初にソーシャルボタンがドドーンとあるのが特徴。

デモ　ダウンロード

Pinfinity

ウィンドウ幅に合わせて、写真がモザイク状に流れ込んでくるタイプ。

デモ　ダウンロード

Portfolio

昔の Flickr 風。PC で幅を変えても変化しないが、端末ごとに内容はちゃんと変わる。

デモ　ダウンロード

RBSimple

幅に合わせて表示される広告が変わる。

デモ　ダウンロード

Responsival

シンプルなレスポンシブテンプレート。テキストベースのブログによいかと。

デモ　ダウンロード

Responsive

最初に巨大なスライドショー。

デモ　ダウンロード

Sensational

左側、ラベルの掲示がいい感じ。

デモ　ダウンロード

TheStyle

サムネイルへのマウスホバーで、ハイライト＋ちょっとだけ伸びる。

デモ　ダウンロード

Top Blogging Ideas

狭めると左サイドバーがなくなるタイプ。画像は縮まないので、小さ目が吉。

デモ　ダウンロード

…ということで、25 個一気に紹介しましたが、気になるテンプレートはあったでしょうか。これを機会に、Blogger テンプレートも衣替えしてみるといいかもしれませんね。

Blogger に「連絡フォーム」ガジェットが新登場

2013-05-19T14:01:00.001+09:00

Blogger に新ガジェット「連絡フォーム」が追加されています。

Blogger - Google+ - We introduced a new "Contact Form" widget today. If a…

「コンタクトフォーム」とか「問い合わせフォーム」とか言われるアレですね。コメントと違いブログ上にメッセージが公開されないのと、メールと違いブログオーナーのアドレスを公開する必要がないのが特徴です。

ブログへの追加は、Blogger 管理画面「レイアウト」から「ガジェットを追加」リンクをクリック、「その他のガジェット」タブから「連絡フォーム」を選ぶだけ。

ガジェットの設定画面で選択できるのは「タイトル」のみ。このタイトルはデフォルトで「連絡フォーム」になっています。「お問い合わせ」などの方が分かりやすいかもしれませんね。

実際にブログに追加してみたのが、下の画像。

ブログ訪問者のつもりで試しに、「クリボウ」「（自分のメールアドレス）」「こんにちは！」とメッセージを入力し送信してみたところ、ブログ管理用メールアドレスに、以下のようなメールが届きました。

送信者に「クリボウ <no-reply@blogger.com>」と出ているので、メールアドレスは入力しても表示されないのかな？と一瞬思ったんですが、メールのソースを見てみるとアドレスは「From」欄ではなく「Reply-To」欄にしっかり記録されていました。なので「返信」すれば、メッセージをくれた人に直接メールを送れるというわけです。

一般のサイトのように運用しているブログなんかでは、コメント欄を閉じて問い合わせフォームだけを設置するのもいいかもしれません。こんな風に、訪問者とのコミュニケーションに選択肢が増えるのはいいことですね。

Blogger で投稿のラベルを一括削除・一括変更する方法

2013-05-04T12:33:00.000+09:00

１７．一度作成したラベルを削除できない
なんかやり方がありそうだけど全然消えませんorz
Bloggerをおすすめできない２０の理由

という文章を見かけたので、今回は Blogger でつけたラベルを削除したり、変更したりする方法を紹介しようと思います。

投稿をラベルでフィルタリングする

Blogger では、ラベルが投稿ごとに管理されており、どの投稿でも使われなくなって初めて消滅する仕組みになっています。なのでまずは、特定のラベルのついた投稿を一括表示する必要があります。

Blogger の管理画面「投稿」を開いて、右上の「すべてのラベル」と表示されているボタンを押下、特定のラベルを選択すると、そのラベルがついた投稿だけが表示されます。

言葉で読むより、画像を見てもらった方が早いと思います。下の画像はラベル「Amazon」で投稿をフィルタリングした例です。

投稿からラベルを削除する

投稿をラベルでフィルタリングしたら、ラベルを外したい投稿にチェックを入れます。そのあと、ラベルボタンを押すと、「ラベル追加・削除」のセレクトボックスが出ます。

ここがちょっと分かりにくいんですが、このセレクトボックスで、投稿にまだついていないラベルを選ぶとラベル追加に、投稿にすでについているラベルを選ぶとラベル削除になります。

なので画像の例でいうと、投稿を一括選択しラベルボタンを押してラベル名「Amazon」を選ぶと、「Amazon」というラベルをブログの全投稿から削除することができるというわけです。

投稿につけたラベル名を変更する

ブログを続けていると、ラベル名に一貫性が保てなくなってラベル名を一括変更したい場面が出てくると思います。たとえば投稿につけている「Amazon」というラベル名をすべて「アマゾン」に変更する場合など。

そういう場合には、上記で説明したように投稿を「Amazon」ラベルでフィルタリングして表示し、全選択、ラベルボタンから「新しいラベル」で「アマゾン」ラベルを追加したあと、再びラベルボタンから「Amazon」ラベルを削除すれば、すべての投稿の「Amazon」ラベルが「アマゾン」ラベルに書き換えられます。

これらの方法を知っていると、ブログ全体のラベル編集がとても簡単に行えると思います。時間のあるときなんかに、ブログのラベル整理をしてみるといいかもしれませんね。

Blogger 関連のつぶやき 2013-03、2013-04

2013-05-04T10:26:00.000+09:00

(cc) Wesley Fryer

Google+ ページ「クリボウの Blogger Tips」および、Facebook ページ「クリボウの Blogger Tips」で流した先々月と先月の Blogger 関連のつぶやきを、ここにまとめておきます。

リアルタイムで読みたい！という人は、上記リンク先からサークルに追加したり「いいね！」したりしてください。1 月からは、Twitter アカウントとフィードも開設しています。そちらもぜひご利用ください。

The Real Blogger Status: Blogger Blogs Redirecting To "scmplayer . net"
ブログに SCM Player なる音楽プレイヤーをつけている場合に、scmplayer.net へリダイレクトされてしまうという問題が報告されています。
Known Issues for Blogger
「○○ Comments」の言葉を編集するオプションが機能していないとのこと。
WordPressとBloggerはどちらがSEOに強いのか？ | 海外SEO情報ブログ
Matt Cutts 氏の回答だとか。どちらも大して変わらないなら、手軽な Blogger の方がいいかも。
How to Change Text Select Highlight Color on Blogger
ブログ上でテキストを選択した時の色を変える方法。
The Real Blogger Status: Some Blogger Blogs Being Locked As Malware Hosts, Because Of Malicious JavaScript
悪意ある JavaScript を貼り付けているせいで、ブログ自体がマルウェアとしてロックされる例があるようです。
11 Activities That will Cause Your Blog to be Deleted | My Blogger Tricks
Blogger ブログが削除される原因。まあ Blogger のコンテンツポリシーそのままなのだけれど。
　» 「Blogger ブログが削除される 11 の原因」で紹介しました。
Google's RSS Subscription Extension, Removed From Chrome Web Store
Google Reader に続き、RSS 購読用 Chrome 拡張機能もウェブストアから消えたとのこと。
　» 「Chrome ウェブストアから RSS Subscription Extension (by Google) が消えた」（別ブログ）で紹介しました。
5 Products That Should Fear Google's Next Killing Spree | Wired Business | Wired.com
wired.com で、次に終了されそうな危機に瀕している Google サービスとして、Blogger が挙げられている件。
URL入力時に「xxxから直接 AdSense にご登録ください」とエラーが出る場合 - ぼくらのアドセンスデイズ
AdSense 登録時に Blogger ブログの URL を指定すると「blogger.com から直接 AdSense にご登録ください。」と警告が出るとのこと。
BloggerにWikipediaガジェットが追加 - buzzword update
久々の公式新ガジェットは、Wikipedia だそうです。
　» 「Blogger に新ガジェット Wikipedia が追加されました」で紹介しました。
Known Issues for Blogger
現在不具合で、Blogger の「リンクリスト」ガジェットが編集できなくなっているとのこと。
The Real Blogger Status: The LightBox Image Display Option Stopped Working, Recently
Blogger の LightBox が動かなくなっていますね。
　» 「Blogger で写真をクリックしたときに LightBox が動かない不具合が発生中」で紹介しました。
BloggerからAdsenseアカウントを申請 - ぼくらのアドセンスデイズ
Blogger からの AdSense 登録画面。最近はこんな風になっているんですか。
Web Drawing: Bloggerでまた不思議なことが発生！
モバイルテンプレートでの AdSense 広告の出方が変わっていますね。
How to Check Your Blog For Malware - Creative Blogging Tips
ブログにマルウェアが含まれていないか調べる方法。ウェブマスターツールで確認する、と。
How To Revert Back To Old Blogger Profile From Google+ Profile? | My Blogger Tricks
ブログで使うアカウントを Google+ から Blogger の昔のに戻す方法。そんなのあったのか！と読んでみたら、前からあった Google+ アカウントへの移行後 30 日間だけ、元に戻せる仕組みのことでした。
Optimize H1,H2 & H3 heading tags in Blogger - Blogger Widgets
Blogger の h1、h2、h3 タグの最適化について。たしかにサイドバーのタイトルが h2 で、投稿タイトルが h3 というのは、変な感じですもんね。
Bloggerを「Bing ウェブマスターツール」に登録する方法
Bing にもウェブマスターツールがあるんですね。
bloggerとtwitterを連携する方法その2 | Androidアプリ開発雑記
Blogger に投稿したら twitter に流すようにする ifttt の設定方法。
Google ウェブマスター向け公式ブログ: 「検索エンジン最適化（SEO）クイックチェックシート」が完成しました。あなたのお友達やご家族にもどうぞ！
Google の SEO クイックチェックシート。短いので、一度目を通しておくといいかと。
　» 「Google SEO クイックチェックシートに従った Blogger ブログの更新方法」で紹介しました。
Blogger Buzz: Improvements to the Blogger template HTML editor
Blogger のテンプレート HTML エディタがリニューアル。
　» 「Blogger のテンプレート HTML エディタが大幅にリニューアル」で紹介しました。
Blogger rolling out XML Sitemaps - Blogger Widgets
Blogger がウェブマスターツール用の sitemap.xml を準備しつつあるという噂。現在ブログ URL 直下の sitemap.xml へアクセスしてみると、404 ではなく 502 エラーが出るのが気になるところ。
Google Japan Blog: Blogger で Google+ のコメントが見られるようになりました
Blogger コメント欄で Google+ での言及が見られるようになったとのこと。でもこれを有効にすると、ブログ側からも Google+ ユーザーしかコメントできない気がするのだけれど…。
　» 「Blogger ブログのコメント欄に Google+ でのコメントも表示できるようになりました」、「Google+ と Blogger の連携に思うこと」（別ブログ）で紹介しました。
Blogger ブログ記事を投稿→Twitterへ自動投稿するサービス - 元「なんでもエンジニ屋」のダメ日記
ブログ更新情報を Twitter に流してくれるサービスのまとめ。
The Real Blogger Status: Problems Being Observed, In Blogs Now Using Google+ Comments
Blogger に設置できるようになった Google+ コメント欄の問題点、ほかにも。モデレーションがコメントごとにできないとか、「投稿とコメント」ウィザードのほとんどが使えないとか。
BloggerにPocketボタンを設置してみた | もばいる坊主
Blogger に Pocket ボタンをつける方法。
Known Issues for Blogger
プライベートブログの Navbar 上の +1 数がおかしくなっているそうです。
Things to Do Before Publishing A Blog Post
ブログ投稿を公開する前にすべきこと。キャッチーなタイトルづけ、URL の最適化、過去記事への内部リンク、つづりや文法のチェック、画像の使用と。なるほど。
Blogger vs. Wordpress.com: A Complete Comparison
Blogger と WordPress の徹底比較記事。

このブログでは毎月か隔月で、記事にしたネタや記事にしきれなかった Blogger 関連ニュースを載せています。最新のニュースについては、Google+ ページや Facebook ページ、Twitter アカウント、フィードのうち、利用しやすいもので確認してください。

Blogger ブログのコメント欄に Google+ でのコメントも表示できるようになりました

2013-04-20T20:28:00.001+09:00

Google+ に接続した Blogger ブログのコメント欄で、これまでのブログのコメントに加えて、Google+ でブログへのリンクが共有された際の内容も表示できるようになりました。

Blogger Buzz: Bringing Google+ Comments to Blogger

同じアナウンスが、Google Japan Blog にも掲載されているので、そこで新機能の大まかな感じがつかめると思います。あと、細かいところは Blogger ヘルプで。

このコメント欄を有効にするには「Google+ ＞ Google+ のコメント」をオンにするだけ。すでに Google+ との接続を済ませているユーザーは、設定しておくといいかもしれませんね。

注意点

１．コメント投稿者

上のスクリーンショットを見て分かるとおり、この機能を有効にすると、ブログのコメント欄に Google+ アカウントのある人しか投稿できなくなります。Blogger のコメント欄の進化というより、Google+ のコメント欄を Blogger に設置できるようになったととらえた方がいいかも。現在設定によって可能な Blogger、OpenID、匿名といったアカウントでのコメントができなくなると、ブログの種類によっては困る場合も出てくるかと。

２．コメントの公開対象

Google+ のサークルが Blogger のコメント欄でも適用されることになるので、誰にどのコメントが見えているのか、分かりにくいところがあると思います。それで混乱や読者間のトラブルなどなければいいですが…。

３．ブログ URL

Google+ 上でのコメントはリンクの URL 単位で管理されています。

ブログの URL を変更すると、既存の Google+ のコメントは削除されます。カスタムドメインやブログの URL の変更を検討している場合、変更してから Google+ のコメントを有効にしてください。

と、Blogger ヘルプにも書かれているのでご注意を。

Blogger のテンプレート HTML エディタが大幅にリニューアル

2013-04-13T22:18:00.000+09:00

Blogger には、テンプレートのタグを直接編集できる「テンプレート＞ HTML」という管理画面がありますが、この画面がこのたび大幅にリニューアルされて、とても使いやすいものになっています。

Blogger Buzz: Improvements to the Blogger template HTML editor

構文ハイライト

新しいエディタを一見して気づくのは、その色の鮮やかさです。これまでは黒一色のコード表示だったのが、HTML の構文に従った色分けで文字列がハイライトされています。

行番号

コードの左側には行番号が出るようになっています。これまで「何行目でエラー」と表示されても、ほかのエディタにコードを貼り付けてみないとその箇所を見つけられなかったことを考えると、圧倒的に便利になっていますね。

折りたたみトグル

行番号についている横三角ボタン「▶」で、ウィジェットのテンプレートを展開したり、折りたたんだりすることができるようになっています。これまでは、ウィジェットを直接編集するのに「ウィジェットのテンプレートを展開」チェックボックスで、すべてのウィジェットを展開するしか方法がありませんでした。

エラー行のハイライトとジャンプ

テンプレートにエラーが残ったままプレビューや保存をしようとすると、その行の背景が水色になってハイライトされるようになっています。カーソルもその行にジャンプするようになっているので、問題のコードの修正が簡単に行えます。

「ウィジェットへ移動」ボタン

上部の「ウィジェットへ移動」ボタンから、テンプレート内の任意のウィジェット記述箇所へジャンプすることができます。ブラウザの検索画面からウィジェット ID で検索をかけて…という手間はもう要りません。

「テンプレートをプレビュー」ボタン

上部の「テンプレートをプレビュー」ボタンから、編集中のテンプレートのブログ上の実際の表示が確認できます。これはまあ、「プレビュー」ボタンとして前にもありましたね。

「書式テンプレート」ボタン

相変わらず Blogger の日本語は片言で分かりにくいんですが、「書式テンプレート」というのは「Format template」の訳のようです。そのまま「テンプレートをフォーマット」ボタンだと思えばいいかと。押すと、それぞれのタグが正しくインデントづけされて表示されます。

「変更を元に戻す」ボタン

保存していない変更をすべて破棄して、保存されているテンプレートを再び表示します。以前の「編集内容をクリア」ボタンに相当するボタンです。。

「ウィジェットテンプレートをデフォルトに戻す」ボタン

そのテンプレートに対して行ったカスタマイズを全て破棄します。テンプレート選択画面でテンプレートを選択した直後と同じ状態になってしまうので、このボタンを使うのは慎重に。エラーがどうしても回避できなかったときの最後の手段ととらえればいいと思います。

テンプレートの新しい HTML エディタで、Blogger ブログのカスタマイズが大いにはかどりそうですね。AdSense のフィード広告廃止、Google Reader のサービス終了というニュースが続いていたので、「Blogger ももしかして？」とひそかに心配していたんですが、どうやらそれも杞憂に過ぎなかったようです。

Google SEO クイックチェックシートに従った Blogger ブログの更新方法

2013-04-07T18:18:00.000+09:00

(cc) labnol

Google が検索エンジン最適化（SEO）方法を示したクイックチェックシートを発表しました。

Google ウェブマスター向け公式ブログ: 「検索エンジン最適化（SEO）クイックチェックシート」が完成しました。あなたのお友達やご家族にもどうぞ！

このシートに従えば、Google の検索エンジンに自分のブログの内容がより正確に伝わるはず。更新時のちょっとした努力で、検索サイト経由のアクセス数が大幅に上昇する…こともあるかもしれません。

実物はリンク先で見てもらうとして、こちらではそれぞれの項目を実現するために、Blogger でどういうことをすればいいか見ていこうと思います。

１．検索結果での見栄えを良くする

Ａ．ページのタイトル情報

ページのタイトル情報は、Google の検索結果で表示されるタイトルの候補として利用されます。あなたのビジネスを簡潔でわかりやすく説明するものにしましょう。

ページには分かりやすいタイトルをということですね。「ホームページ」とか漠然としたものはやめた方がいいとのこと。検索にヒットさせるために、固有名詞など、具体的な表現を使うがいいかと。タイトル情報に現れる順序にも意味があるようなので、ブログタイトルと投稿タイトルの順を変えるというのもアリかもしれません。

Blogger ブログのページタイトルを「投稿タイトル | ブログタイトル」の順にする方法 | クリボウの Blogger Tips

Ｂ．ドメイン名、URL

ドメイン名は Google の検索結果の重要な要素です。ウェブサイトには、わかりやすくて読みやすいドメイン名、URL を設定しましょう。

数字の羅列のような意味のない URL を避けて、意味のとりやすいものにせよとのこと。Blogger では、2012 年から自分で投稿の URL が指定できるオプションがついているので、それを活用すればいいと思います。

Blogger ブログの投稿ページの URL（パーマリンク）が自由に指定できるようになりました | クリボウの Blogger Tips

Ｃ．メタデータ（descriptions）

メタデータ（descriptions）はページの概要を表すものであり、Google や他の検索エンジンの検索結果ページで頻繁に使用されます。ページごとに、160 文字以下の固有の説明を設定しましょう。

ページの概要を示すメタタグ <meta name="description" content="なんとかかんとか…" /> のことですね。2012 年から Blogger でも、この赤字部分を投稿画面から設定できるオプションが用意されています。

Blogger ブログに「検索設定」が登場、SEO 対策の詳細設定が可能に | クリボウの Blogger Tips

ブログ管理画面「設定＞検索設定」ページの「メタタグ＞説明」欄にブログ全体の説明を入力すると、各投稿の編集画面にも「検索用説明」入力欄が現れるようになります。

２．画像が Google に認識されるようにする

Ａ．画像ファイル名

画像ファイルには短くてわかりやすい名前を付けましょう。

アップロードする前の画像のファイル名の話です。「DSC_1234.JPG」みたいなのより、意味のある名前にした方がいいということだと思います。

Ｂ．画像の alt 属性

「alt」属性で画像の内容を説明しましょう。この情報により Google が画像の内容を認識しやすくなります。

画像タグ <img src="temple.jpg" width="500" height="375" alt="Temple" /> でいう、赤字部分ですね。Blogger の投稿編集画面、「作成」モードで画像を追加した後、画像をクリックして「プロパティ」リンクをクリックすることで、「代替テキスト（alt）」を入力することができます。

Ｃ．キャプション

ページ上の各画像の下に短いキャプションを添えます。重要な情報は画像ではなくテキストで表しましょう。

これも Blogger に用意されています。Blogger の投稿編集画面、画像をクリックして「説明を追加」リンクをクリックで、画像のキャプションを入れることができます。

３．更新を頻繁に行う

ウェブサイトはお店の店頭のようなものです。そう考えると、6 か月も放っておくというのはあり得ないことです。ブログを開設したり、新商品やセール情報、特典の案内を掲載したりして、サイトをいつも最新の状態にしておきましょう。

これまでに紹介した内容を守りつつ、マメにブログを更新しないといけないようです。古い記事ばかりで、Google から「あり得ない…」と呆れられないようにしないといけませんね。

Blogger に新ガジェット「Wikipedia」が追加されました

2013-03-30T19:22:00.000+09:00

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

Blogger - Google+ - Our newest addition to the Gadget Gallery is the Wikipedia…

その名も「ウィキペディア」。インターネット百科事典「ウィキペディア」の記事をブログのサイドバーで検索することができます。テストブログのサイドバーにも設置しているので、興味がある人は触ってみてください。検索結果のリストがサイドバーの検索窓下にすぐ表示されるのが、なかなかいい感じです。

この Wikipedia ガジェットの追加は、Blogger 管理画面「レイアウト」の「ガジェットを追加」リンクから。ガジェット選択のウィンドウで「その他のガジェット」タブをクリックすると「ウィキペディア」が出てくるので、それをクリックして「保存」で追加してください。学術的なブログや、話題がマニアックなブログで使うといいかもしれませんね。

今回のニュースは、こちらの記事から知ったものです。ありがとうございます。

BloggerにWikipediaガジェットが追加 - buzzword update