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

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

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

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


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

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


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


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

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

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

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

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



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

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

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

本日、こんなツイートを発見しました。

BloggerのNavbarっていつのまにか管理画面からオフにできるようになってたんだな。今知った。

— ぎちょうさん (@tw14g) 7月 18, 2012

えっ！と思って、さっそく確かめてみました。
Blogger 管理画面「レイアウト」で「Navbar」ガジェットの「編集」リンクをクリックし、



表示される「Navbar の設定」ページをよく見てみると…。



たしかに新しく「オフ」が選択肢として追加されていますね。以前、

• Blogger の Navbar は隠してもいいらしい | クリボウの Blogger Tips

でも書いたように、これまで Navbar を非表示にするためには、Blogger が自動的に書き出す Navbar をユーザーのスタイルシートで無理やり隠すという方法がとられてきました。

が、これからは最初から書き出さないようにできるということです。ブログデザイン的に Navbar をはずしたかったものの、なんとなく隠すのに抵抗だとかやましさだとかを感じていた人には朗報かと思います。


Navbar の空白を詰める

ちなみに、「オフ」を選ぶとこれまで Navbar があった部分がそのまま空白になります。Navbar のあった 30 ピクセル分の高さを詰めたい場合には、Blogger 管理画面「テンプレート」ページの「HTML の編集」から


というコードを


の直前ぐらいに入れておくといいと思います。

現在、ブログや投稿を 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 サイドバーにつけられる「クリボウ式 Blogger カレンダー」ガジェット

• クリボウの Blogger Tips: Blogger beta にもカレンダー

というものがあるんですが、

日付をクリックしても記事が変わりません。

…と、またしても動かなくなっていたようなので、スクリプトを更新しました。「動かない！」と外してしまった方も、もう一度試してもらえるとうれしいです。導入は上記リンク先からどうぞ。すでに貼り付けている人は、そのままで新しいコードが適用されます。

この更新に関する技術的な話は、別ブログにまとめています。関心のある人は、参考にしてみてください。

参考：

• クリボウのプログラミングひとりごと: Blogger のガジェット更新用 API と「クリボウ式 Blogger カレンダー」の話

関連：

• クリボウの Blogger Tips: カレンダーウィジェット更新

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 に新しいガジェットが追加され、Google+ との連携がさらに強化されています。

• Two new gadgets to make your blog better with Google+ | Blogger Buzz
• +1ボタン、Google+ バッジがBloggerガジェットとして設置可能に！ ~ Plus One World

サイドバーに設置してみたのがこちら。



上から Google +1 ボタン、Google+ バッジという順です。追加は、Blogger 管理画面「レイアウト」ページの「ガジェットを追加」リンクから。これまで Google+ のページからコードを取得して HTML/JavaScript ガジェットに貼り付ける必要があったんですが、随分と手軽になりましたね。

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



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



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

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



手順

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

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

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

これだけです。

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

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

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

参考：

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

Blogger ユーザーの中には、ブログデザインにこだわって、Navbar を非表示にしている人も多いと思います。ですが、そのことで一番困るのは Blogger 標準の検索機能が使えないこと。なので、そういう場合にサイドバーに検索ガジェットがあれば便利じゃないかなと思ったわけです。

参考にしたのはこちらのブログ。

• Bloggerにブログ内検索を設置する ALIENWARE M17xR2/ウェブリブログ

書かれているのは、Blogger 標準の検索機能を使うためのフォームのコード。これを「HTML / JavaScript ガジェット」にそのまま貼り付けてもいいんですが、今回はその手間すら省いて、２回のボタンクリックだけでブログに貼り付けられるようにしました。ついでにコードも少し簡略化しています。よかったらお使いください。

※複数のブログを運営している人は、「ブログを選択」欄に注意してください。

<form action="/search" method="get"><input name="q" type="text" size="20"/><input value="検索" type="submit"/></form>

ちなみに、Blogger で用意されている基本の「検索ボックス」ガジェットは、Google カスタム検索の仕組みを利用したもので、Navbar から検索した場合と検索結果の表示の仕方が異なります。興味のある人は、両方つけて比べてみてください。

関連：

• クリボウの Blogger Tips: Blogger の Navbar は隠してもいいらしい
• クリボウの Blogger Tips: Blogger beta の Widget 追加ボタンの作り方

Bloggerに、また新しい機能が、共有ボタンの横に見慣れぬボタンが増えている、ダッシュボードの翻訳記事は相変わらず要領を得ず、なんとなく、いいね！ボタンみたいな感じなのか、クリボウさんの解説を待とう

Twitter / @PaperBush: Bloggerに、また新しい機能が、共有ボタンの横に ...

ありがとうございます。要領を得たものになるかどうかわかりませんが、紹介してみようと思います。

もうお気づきの方も多いと思いますが、Blogger の共有ボタン右端に「Google +1 ボタン」が新しく追加されています。

• Blogger Buzz: Add the +1 Button to Your Blog

これは、google.com 英語版の検索結果にだけ表示されていた「+1 ボタン」が、6 月 1 日に個人のウェブページにも貼り付け可能になったのを受けたもの。ウェブページ用ボタンのコードはこちらなんですが、Blogger ブログの場合は、共有ボタンにそのまま追加されているので、コードを貼り付ける手間もなく、導入がとても簡単になっています。

では、「Google +1 ボタン」って一体何？ということになると思うんですが、まずは、こちらのビデオで確認してください。プレイヤーの「CC」ボタンで、日本語キャプションが表示されます。



Google +1 ボタンサイトによると、このボタンは、

+1 ボタンは「おすすめ」や「要チェック」などの情報を手軽にマークできる機能です。
+1 をクリックすると、あなたのおすすめの情報であることが世界中に公開され、友達や連絡先、ウェブ ユーザーが検索するときに参考にすることができます。

とのこと。たとえばクリボウが気に入った記事を「+1」した後に、友人が Google（今のところ、google.com 英語版のみ有効）で検索すると、検索結果のその記事のところに「クリボウさんと他 12 人のユーザーがこのページに +1 を付けました」というような情報が表示されるということです。Facebook の「いいね！ボタン」とよく似ていますね。この「友人」というのに含まれるのは、

Google +1 は、Google TalkやChat、Buzz、Reader などGoogleが提供する各種サービス内で交友関係があると判断できるユーザを結びつけている

Googleソーシャル検索とGoogle +1、利用するソーシャルグラフが異なる理由は？ ::SEM R

とのこと。
ほかにも

+1 ボタンをクリックすると、その記事が Google プロフィールの +1 タブにお気に入りとして表示されるようになります。

The Okano Mail: Google +1 ボタン

と、Google プロフィールとの連携もあるようです。Google プロフィールの +1 タブは最初は非公開になっているなので、自分の +1 を見せてもいいという人は、Google プロフィールで「プロフィールを編集 ＞ +1 ＞ プロフィールにこのタブを表示する ＞ 編集を終了」とするとよさそうです。（やってみたのがこちら。）

一度つけた「+1」の取り消し方はというと、

再度 +1 ボタンをクリックすることで取り消しも可能です。また、 Google プロフィールの +1 タブから × ボタンで取り消しも可能です。

The Okano Mail: Google +1 ボタン

だそうです。この「Google +1 ボタン」、今後定着していくものなのかどうかわかりませんが、間違ってつけてしまってもすぐに消せることだし、とりあえずお気に入りの記事の「+1」を気軽に押して、ジャンジャン記事を世界へとおすすめしてみるのがよさそうです。


その他参考：

• ASCII.jp：Google +1（プラスワン） SEOへの影響は？ ほか まとめ

関連：

• クリボウの Blogger Tips: Blogger in Draft に「共有」ボタンが登場

昨日の記事で、Blogger に新しく登場した「メールによる読者登録」ガジェット（メールマガジンガジェット）について紹介しました。

• Blogger に「メールによる読者登録」ガジェットが登場

その文章の中で、こんな風に書いています。

ブログの読者を増やす上でなかなか面白い機能だと思うんですが、読者に行ってもらう登録手順の説明がすべて英語なのが玉にキズという感じです。日本語対応になるのを待ってガジェットを表示するのがいいかも知れませんね。

メールアドレス登録時の CAPTCHA 認証画面も確認メールも英語なので、日本の読者から敬遠されるんじゃないかなと思ったわけなんですが、ちょっと調べてみて、これらの英語の説明を日本語化する方法がわかったので、ご紹介したいと思います。

この記事では、「メールによる読者登録」ガジェットがブログに貼り付けられている状態から説明しています。まだの人は、Blogger 管理画面「デザイン ＞ ページ要素」ページ、「ガジェットの追加」リンクからガジェットを貼り付けておいてください。


ガジェットの設定

まずは、Blogger 側でできることを。

１．Blogger 管理画面「デザイン ＞ ページ要素」ページの「Follow by Email」ガジェットの「編集」リンクをクリックして、ガジェットのタイトルを変更します。「メールマガジン購読」とか「メール読者登録」などにするとよさそうです。ガジェット追加のときに名前を変更している人は、飛ばして２へ進んでください。

２．続いて、ガジェットの送信フォームの編集です。「デザイン ＞ HTML の編集」ページへ進み、「ウィジェットのテンプレートを展開」にチェックを入れます。

３．次のコードを探し出します。ブラウザの検索機能で「FollowByEmail」を探すのが楽です。


４．赤字の「en_US」を「ja_JP」に変えます。

５．青字の部分は、フォームの送信ボタンに書かれている文字列です。「Submit」から「送信」などに変えておくといいかもしれません。

ここまでの作業で、サイドバーの表示が、こう変わり、



CAPTCHA 認証画面も日本語に変わります。




メール購読システムの設定

「メールによる読者登録」ガジェットの機能は、FeedBurner の技術によって支えられています。ガジェットをブログに追加すると、そのブログのフィードが FeedBurner 上で新規に作成されます。確認メールの日本語化は、この FeedBurner のフィードの設定を変更することで実現可能です。

１．FeedBurner のマイフィード（My Feeds）画面から、ガジェットを追加したブログのフィードを選択します。前述したとおり、フィードは新規に作られているため、同じブログのものが複数ある場合は、読者ゼロのものを選択することになります。

（以下、FeedBurner の設定メニューについては日本語版で説明してます。メニューが英語で表記されている場合は、最上部のメニューから「Language」をクリックして「日本語」を選択しておいてください。）

２．「集客支援」タブの「フィード・メールマガジン」をクリックした後、「メールフォーマット」をクリックします。すると、このような項目が出てきます。



３．「題名の確認」欄を「メール購読確認: ＜ブログ名＞」みたいにします。青字部分は自身のブログ名を入れてください。

４．「本文の確認」欄には以下のような文章が書かれています。


これを


など、好きな文章に変えてください。※「${confirmlink}」は消さないように気をつけましょう。

５．日本語化はこれで終わりなんですが、ついでに時刻の設定も行います。左側メニュー「配信オプション」をクリックします。



６．「タイムゾーンの選択」項目は「(GMT-06:00) Central Time (US & Canada)」になっていると思うので、「(GMT+09:00) Osaka, Sapporo, Tokyo」に変更します。「配信スケジュール」はメールの届く時間帯です。好きな時間を選択してください。


これでおしまいです。

メールマガジンだと、フィードリーダーにブログを登録してもらうよりもハードルが低いので、いろんな人にブログを読んでもらえそうな予感がしますね。「英語じゃ意味ないよなー」と思っていた人は、ぜひお試しください。


「クリボウの Blogger Tips」メールマガジン創刊

最後になりましたが、宣伝です。

このブログはレイアウトテンプレートではなくクラシックテンプレートを使っているため、「メールによる読者登録」ガジェットは利用できないんですが、FeedBurner の同じ機能を利用して、ブログサイドバーにメール購読用の登録フォームを貼り付けました。

このブログの更新内容をメールで受け取りたい方は、サイドバーからぜひご登録ください。メール購読機能が気になっている人も、どういう風に動作するのかテストしがてら、登録してもらえたらうれしいです。

Blogger に新ガジェットが登場しています。

• Blogger Buzz: Engage your audience with Follow by Email

その名も「メールによる読者登録」。このガジェット経由で読者登録してもらうと、ブログが更新されるたびに、その内容がメールで読者へ届きます。Blogger ブログがそのままメールマガジンになる感じです。

このガジェットの追加は、Blogger 管理画面「デザイン ＞ ページ要素」ページの「ガジェットを追加」リンクから。「基本」カテゴリのガジェットの中の「メールによる読者登録」ガジェットを選択してください。

早速、このガジェットを「プログラミングひとりごと」に追加してみたところ、このようになりました。



読者がサイドバーの「Follow By Email」（タイトルは変更可）の入力部分にメールアドレスを入れて「Submit」ボタンを押すと、FeedBurner の確認画面が出ます。



CAPTCHA 認証で文字列を入力し「Complete Subscription Request」ボタンを押すと、先ほどのメールアドレスに以下のようなメールが届きます。

hello there,
you recently requested an email subscription to クリボウのプログラミングひとりごと. we can't wait to send the updates you want via email, so please click the following link to activate your subscription immediately:

http://feedburner.google.com/fb/a/mailconfirm?k=abcdefghijklmnopqrstuvwxyz

(if the link above does not appear clickable or does not open a browser window when you click it, copy it and paste it into your web browser's location bar.)

as soon as your subscription is active, feedburner will send a daily email message if クリボウのプログラミングひとりごと has new content.

if you did not request this subscription, or no longer wish to activate it, take no action. simply delete this message and that will be the end of it.

cheers,

メール内のリンクをクリックすると、メール購読の登録が完了です。
試しに自分で登録して、ブログを更新してみたところ、送られてきたメールがこちら。



ブログの読者を増やす上でなかなか面白い機能だと思うんですが、読者に行ってもらう登録手順の説明がすべて英語なのが玉にキズという感じです。日本語対応になるのを待ってガジェットを表示するのがいいかも知れませんね。

Blogger ブログのサイドバーに、「最近の投稿」リストを表示する方法について。同じような質問に 2 回ほど回答したので、もしかしたらほかにも需要があるのかもと思い、記事にしておくことにしました。

テンプレートデザイナーのHTML編集で過去記事一覧をサイドバーに出したい
過去記事のタイトルをサイドバーに表示したいのですが、新しく追加されたテンプレートデザイナーでは、どのようなコードを書けばよろしいでしょうか？
・過去記事をすべて表示したい。（もしくは30件程度でも可）
・どのページを見ても常に表示されているようにしたい。
・サイドバーに表示したい。
・タイトル（リンク付き）のみで表示したい。
・並び順は最新順で。（古い順でも可）
クラシックテンプレートではできるような内容がありますが、新しく導入されたテンプレートデザイナーでの表示は見つかりませんでした。以上、よろしくお願い致します。

Blogger 公式ヘルプフォーラム

アーカイブの日付を消す方法はありますか？クラシックテンプレートだとあると回答を見つけましたが、テンプレートデザイナーを使用しても消す方法が知りたいです！
クラシックテンプレートだとあると回答を見つけましたが、テンプレートデザイナーを使用しても消す方法が知りたいです！
日付で並べると言うよりは、ブログのタイトル一覧をパーンと見せたいのです。
カレンダー的な機能より、タイトル一覧的な機能。分かる方いらっしゃいましたらおしえてください。

Blogger 公式ヘルプフォーラム

フィードガジェット

まずは、ブログの投稿フィードをフィードガジェットを使って表示する方法です。この方法の長所は、全てが Blogger のサービス内で完結する点。短所はというと、投稿タイトルを 5 件までしか表示できない点です。

導入方法

Blogger 管理画面「デザイン ＞ ページ要素」で「ガジェットを追加」リンクを押して、基本ガジェットから「フィード」ガジェットを選択します。フィード URL の欄にブログ投稿フィードの URL を記入します。分からない場合は、ブログの URL を入力するだけで、自動的にフィードを探してくれます。

次の画面では、ガジェットのタイトル（「最近の投稿」などにするのがよさそう）や表示項目数、日付・投稿者の表示、リンクを新しいウィンドウで開くかどうかといった設定が行えます。



これが 3 種類のうち一番簡単な方法。フィードの URL については、クリボウの Blogger 入門: Blogger のフィード URL とパラメータを確認してください。


Feed2JS

ブログの投稿フィードを Feed2JS という外部のフィード表示サービスを使って、ブログ内に表示する方法です。この方法の長所は投稿を 25 件まで表示できる点（設定によっては 100 件近くまで表示させることも可能）。短所は、外部サービスを利用するのと JavaScript を利用するという点です。

導入方法

Feed2JS サイトを開き、「Build」タブをクリックします。「URL」欄に投稿フィードの URL を入力し（分からない場合は、ブログ URL 末尾に atom.xml をつけたものにします。例：http://kuribo-programming.blogspot.com/atom.xml）、「Show channel」を「no」に、「UTF-8 Character Encoding」にチェックを入れます。ほかに、表示項目数や日付、内容の表示などを設定するには、クリボウの Blogger 入門: Feed2JS の使い方を確認してください。

実際の表示確認は「Preview Feed」ボタン。



それでよければ「Generate JavaScript」ボタンを押します。「Get Your Code Here」のテキストエリアにコードが表示されるので、その全体をコピーします。

Blogger 管理画面「デザイン ＞ ページ要素」で「ガジェットを追加」リンクを押して、基本ガジェットから「HTML/JavaScript」ガジェットを選択します。「タイトル」欄にガジェットのタイトル（「最新の投稿」など）を入れ、コンテンツ欄に先ほどコピーしたコードを貼り付けます。


アーカイブガジェット

最後が、フィードを使わずに、Blogger のアーカイブガジェットを改造して使う方法です。長所は、Blogger 内で機能が完結する点、記事を 50 件表示できる点です。短所はというと、導入が少し面倒くさい点かと。



導入方法

Blogger の管理画面「デザイン ＞ HTML の編集」から、「テンプレートをすべてダウンロード」して、バックアップを取ります。

「ウィジェットのテンプレートを展開」にチェックを入れ、テキストエリアから、 のようなタグを見つけます。「BlogArchive」で検索をかけるとすぐみつかると思います。

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'> から、一番近い </b:widget> まで（クリボウの場合 87 行ありました）を次のコードに書き換えます。


すでに使っているアーカイブガジェットとこのガジェットとを共存させたい場合は、上記コードでアーカイブガジェットを書き換えずに、赤字部分を id='BlogArchive2' として、追加するのがいいと思います。

ガジェットを書き換え（もしくは追加）した後、管理画面「デザイン ＞ ページ要素」から、ガジェットの編集でタイトルを「最近の投稿」などに変更します。その画面では、さらに「階層」スタイルになっているかどうか、そして「投稿タイトルを表示」にチェックが入っているどうかを確認しておいてください。


以上、「最近の投稿」リストを表示する 3 種類の方法でした。自分の好みに合うものを選んで使ってみてくださいね。

と教えてもらったのが、このページ。ありがとうございます。

• Blogger in Draftに待望の「人気の投稿」ガジェットが追加 | WEB311
• Blogger in Draft: New Stats Gadgets

急いで Blogger in Draft の管理画面「デザイン ＞ ページ要素」ページの「ガジェットを追加」リンクを押してみると…、



ほんとだ、新しいガジェットが追加されていますね！


　「人気の投稿」ガジェット

「人気の投稿」ガジェットは、文字通り、ブログでアクセスの多いページをリスト表示するためのガジェット。ガジェット追加の「＋」マークを押してみると、こんなオプション画面が出ます。



「全期間」「過去 30 日間」「過去 7 日間」と、アクセス数の集計基準となる期間を設定することができます。その下は表示設定。人気投稿のリンクのついたタイトルとともに「画像のサムネイル」「抜粋」を表示することが可能です。

クリボウの写真日記 につけてみたのが、こちら。なかなかいいですよ。




　「ブログの統計情報」ガジェット

続いては「ブログの統計情報」ガジェット。俗に言うところの「カウンター」。



カウンターのスタイル（テキスト、折れ線グラフ、数字画像）とスタイルオプションが設定可能。スタイルオプションは、折れ線グラフの場合「黒（透明）」「白（透明）」が、数字画像の場合は「アニメーションカウンタ」が指定可能です。

…のはずですが、現在なぜかブログ上で折れ線グラフが正しく表示されません。なんでだろう。

ともかく、前掲の ys_n09 さんによると、どちらのガジェットも

簡単に導入できる、このガジェットは、先月公開された、「統計」を利用しているようです。

とのこと。なるほど、先日 Blogger に待望のアクセス解析がつきましたが、それで終わりというわけじゃなかったんですね。
どんどん進化していく Blogger から、これからも目が離せそうにありません。


追記（2010-09-10）

発達障害ニュース の sogamoni さんからもコメントをもらっていたんですが、カウンターの折れ線グラフがようやく正しく表示されるようになったようです。

• Known Issues for Blogger

関連：

• Blogger in Draft に待望のアクセス解析機能「統計」が追加
• Twitter 公式の Tweet 貼り付け機能「Blackbird Pie」が登場

公式の発表があるまで待とうと思いつつ早一週間。待ちきれずにご紹介。

• Blogger in Draft に [共有] ボタンが追加 | Bloggerカスタマイズ情報ブログ

Blogger in Draft の管理画面「デザイン ＞ ページ要素」から「ブログの投稿」の「編集」リンクを押してみると見慣れない項目が。



この「[共有]ボタンを表示する」にチェックを入れて、「保存」ボタンを押すと…



こんな風に、各投稿のフッターに「共有」ボタンと呼ばれるものが表示されるようになります（例はプログラミングひとりごと）。

このボタンでの共有（この投稿を誰かに知らせる）方法は、現在

• メール
• BlogThis!
• Twitter
• Facebook
• Google バズ

の 5 種類。ちなみに「メール」ボタンを押すと、最初の画像に写っている「メール投稿リンク」を押した場合とまったく同じ Blogger のメール送信画面が出ます。

共有方法が 5 種類だけじゃ物足りないという人は、Choco さんの公開している

• はてなブックマーク
• Yahoo! ブックマーク
• livedoor クリップ
• @nifty クリップ
• Google ブックマーク
• stumbleupon
• del.icio.us
• digg
• reddit

が追加された高機能版「共有」ボタンを試してみるとよさそうです。

関連：

• Blogger の Navbar に「共有」ボタンが登場

追記（2010-06-25）

Blogger Buzz で、公式に機能追加のアナウンスがありました。

• Blogger Buzz: New Share Buttons

Blogger in Draft ブログではなく Blogger Buzz で発表されたことでもわかるように、この「共有」ボタンは Blogger in Draft でのテスト実施がアナウンスされないまま 2 週間足らずで Draft を卒業し、すぐさま Blogger の公式機能として採用されたようです。この早さ、Blogger チームが満を持して機能追加したというような感じがしますね。

以前このブログでラベルクラウドの導入方法について記事を書きました。

• ラベルリストの表示法いろいろ

ここで紹介した方法は Blogger ユーザーが独自に考え出したものだったんですが、Blogger Buzz で今回、Blogger 標準のラベルガジェットでも公式の「ラベルクラウド」が表示できるようになったとアナウンスがありました。

• Blogger Buzz: Partly cloudy, chance of labels
• clmemo@aka: Blogger の Label ガジェットが進化 -- タグ・クラウド表示に対応

ためしに「写真日記」にとりつけてみたのが、こちら。



少しごちゃごちゃとはしていますが、件数の多いラベルが一目瞭然でいい感じです。早速、導入方法を見て行きます。

１．「ラベルガジェット」の編集画面を開きます。Blogger 管理画面「レイアウト ＞ ページ要素」ページでラベルガジェットの「編集」リンクをクリックします。（ラベルガジェットを利用していない人は、「ガジェットを追加」を押して、出てきたがジェット選択画面から「ラベルガジェット」をクリックします。）



２．ガジェットの編集画面に選択肢が増えています。まず「表示」。すべてのラベルを表示するか、選択したラベルを表示するかを指定できます。選択ラベルだけ表示できるという機能は今回追加されました。「並べかえ」は前からありましたね。ラベル名を何順で表示するかです。二つ目の「表示」では、従来のリスト形式と新しく追加されたラベルクラウド形式とを選択できるようになっています。ここで「クラウド」を選択して「保存」ボタンを押します。

ラベルガジェットの設定はこれだけ。HTML コードや Blogger レイアウト用コード、CSS コードと格闘していたころとは大違いで、簡単に導入できますね。興味があったけれど踏み出せずにいたという人は、この機会にぜひどうぞ。

ちなみに前回の PubSubHubbub 対応も、今回のレベルクラウド登場も Blogger の 10 周年を記念した機能追加のようです。Blogger の誕生日は 8 月 23 日。もう過ぎてしまいましたがまだまだ 10 周年の新機能は追加されていく模様です。

コメント欄で tama さんに教えもらったガジェットがこちら。

色とりどりの金魚（？）が、ゆっくりとカーソルを追いかけてきます。
池の中をクリックするとエサがやれ、金魚が波紋を立てながら、今度はまっしぐらに泳いできます。

金魚の数や色、水の色はカスタマイズが可能です。
ガジェットの追加は、「レイアウト ＞ ページ要素」で、追加したいエリアの「ガジェットを追加」リンクをクリック。出てきた「ガジェットを追加」画面で「人気」タブを選んで、「Fish」ガジェットの「＋」マークをクリックするだけ。

猛暑の中、ブログの中だけでも涼を楽しんでみてはいかがでしょうか。

Blogger がオリジナルガジェットを募集している件について、以前記事にしてお伝えしましたが、早速 Blogger Buster が４つの新ガジェットを公開し、Blogger チームもそれを紹介しています。

• Blogger in Draft: 4 New Gadgets from Blogger Buster

新しく公開されたのは

• Picasa フォトストリーム
• Twitter アップデート
• 最近の投稿
• 最近のコメント

の４つ。

どの機能もこれまでのフィードガジェット（フィードウィジェット）で実現できそうなものですが、６件以上の項目を表示することができたり、ガジェットの縦の長さを指定することができたりする点が、フィードガジェットとは異なっています。

…ということで、新ガジェットに興味のある人はぜひお試しを。導入は上記リンク先ページの「Add it now」リンクからどうぞ。


また、新ガジェット公開に関連して、サードパーティ開発の Blogger ガジェットを紹介する新しいブログが公開されています。

• Blogger Featured Gadgets

今後、新しいガジェットが気になる人は、Blogger in Draft ブログと、このブログとをウォッチしておくといいんじゃないでしょうか。

2007 年 7 月に Blogger in Draft に登場した「検索ボックス（Search Box）」ガジェットが、ようやく Blogger に正式採用されました。

• Blogger Buzz: Search Box gadget available to all
• Google Custom Search: A search box for Blogger
• Googleが、Bloggerのカスタム検索ボックスを改訂
• The Okano Mail: Search box is out of draft

このガジェットは、Blogger 管理画面「レイアウト ＞ ページ要素」の「ガジェットの追加」リンクをたどると表示される、ガジェット一覧の中から選択することができます。ガジェットを追加すると、サイドバーに Google の検索窓が設置されます。



ガジェットの詳細設定の画面からは、上の画像のように、検索の範囲が指定できます。検索対象には、ブログ内、リンクしているサイト、ウェブ全体という範囲以外に、Blogger らしくリンクリストやブログリストに追加しているサイトを含めることができます。

このガジェットは、Google カスタム検索 の仕組みを使っているのですが、チェックボックスへのチェックのみで、カスタム検索作成で行うような煩雑なサイト登録がいらず、とても便利です。

今までまったく注目していなかったんですが、なかなか面白いガジェットです。みなさんもよかったらつけてみてくださいね。

以前、ブログに載せたコードにハイライトをつけるウィジェット「Blogger Syntax Highlighter」というものを紹介しました。

• コードをハイライトする「Blogger Syntax Highlighter」ウィジェット

これに関して書かれたエントリにこんな記述が。

これは良い感じです＾＾
Perl が対応していないのは、PHP で無理やり対応させることにしようかな♪

GamizBlog: Blogger上でのソースのハイライト： Blogger Syntax Highlighter

対応言語表を見てみると、たしかに Perl は載っていませんね。
…ということで、Perl のコードもハイライトさせる方法はないのかな？と探してみたところ、見つけたのがこちらのページ。

• Damien Learns Perl: Perl syntax highlighting in Blogger

こちらを参考にしながら、導入の手順をまとめておきます。


導入手順

１．まず「Blogger Syntax Highlighter」ウィジェットをブログに追加します。前回の記事を参考にしてください。※Firefox でウィジェットの追加に失敗する場合は、別のブラウザでも試してみてください。

２．Blogger の管理画面「レイアウト ＞ ページ要素」から「Blogger Syntax Highlighter」ウィジェットの「編集」リンクをクリックします。

３．「コンテンツ」欄の一番最後
というコードの直前に
を挿入して、「保存」ボタン。

おまけ．好みかもしれませんが、ついでに「編集」リンクからウィジェットのタイトルを消しておくと、ブログの見た目を変えずにハイライト機能がつけられていい感じです。


使い方

ブログへのコードの掲載は という風に、表示させたいコードを特別な pre 要素に入れて投稿します。
その他、「Blogger Syntax Highlighter」で利用できるオプションについては、前回の記事を確認してください。


…というわけで、Perl 使いの方はぜひぜひお試し下さい。