Home > ガジェット
ガジェット
Blogger に新ガジェット「連絡フォーム」が追加されています。
ブログへの追加は、Blogger 管理画面「レイアウト」から「ガジェットを追加」リンクをクリック、「その他のガジェット」タブから「連絡フォーム」を選ぶだけ。
ガジェットの設定画面で選択できるのは「タイトル」のみ。このタイトルはデフォルトで「連絡フォーム」になっています。「お問い合わせ」などの方が分かりやすいかもしれませんね。
実際にブログに追加してみたのが、下の画像。
ブログ訪問者のつもりで試しに、「クリボウ」「（自分のメールアドレス）」「こんにちは！」とメッセージを入力し送信してみたところ、ブログ管理用メールアドレスに、以下のようなメールが届きました。
送信者に「クリボウ <no-reply@blogger.com>」と出ているので、メールアドレスは入力しても表示されないのかな？と一瞬思ったんですが、メールのソースを見てみるとアドレスは「From」欄ではなく「Reply-To」欄にしっかり記録されていました。なので「返信」すれば、メッセージをくれた人に直接メールを送れるというわけです。
一般のサイトのように運用しているブログなんかでは、コメント欄を閉じて問い合わせフォームだけを設置するのもいいかもしれません。こんな風に、訪問者とのコミュニケーションに選択肢が増えるのはいいことですね。
Blogger に新しいガジェットが追加されています。
その名も「ウィキペディア」。インターネット百科事典「ウィキペディア」の記事をブログのサイドバーで検索することができます。テストブログのサイドバーにも設置しているので、興味がある人は触ってみてください。検索結果のリストがサイドバーの検索窓下にすぐ表示されるのが、なかなかいい感じです。
この Wikipedia ガジェットの追加は、Blogger 管理画面「レイアウト」の「ガジェットを追加」リンクから。ガジェット選択のウィンドウで「その他のガジェット」タブをクリックすると「ウィキペディア」が出てくるので、それをクリックして「保存」で追加してください。学術的なブログや、話題がマニアックなブログで使うといいかもしれませんね。
今回のニュースは、こちらの記事から知ったものです。ありがとうございます。
本日、こんなツイートを発見しました。
BloggerのNavbarっていつのまにか管理画面からオフにできるようになってたんだな。今知った。
— ぎちょうさん (@tw14g) 7月 18, 2012えっ！と思って、さっそく確かめてみました。
Blogger 管理画面「レイアウト」で「Navbar」ガジェットの「編集」リンクをクリックし、
表示される「Navbar の設定」ページをよく見てみると…。
たしかに新しく「オフ」が選択肢として追加されていますね。以前、
でも書いたように、これまで Navbar を非表示にするためには、Blogger が自動的に書き出す Navbar をユーザーのスタイルシートで無理やり隠すという方法がとられてきました。
が、これからは最初から書き出さないようにできるということです。ブログデザイン的に Navbar をはずしたかったものの、なんとなく隠すのに抵抗だとかやましさだとかを感じていた人には朗報かと思います。
Navbar の空白を詰める
ちなみに、「オフ」を選ぶとこれまで Navbar があった部分がそのまま空白になります。Navbar のあった 30 ピクセル分の高さを詰めたい場合には、Blogger 管理画面「テンプレート」ページの「HTML の編集」から
body .navbar {
height: 0;
}
height: 0;
}
というコードを
]]></b:skin>
の直前ぐらいに入れておくといいと思います。
現在、ブログや投稿を Google +1 や Facebook「いいね」、Retweet してもらうためのボタンがいろいろと公開されています。Blogger 関連のつぶやき（ネタ帳とも）の中にも、この手のガジェットの話題が増えてきたように思うので、ここで一挙公開しようと思います。
ローソンガジェット
導入方法については、かずうさんがまとめてくれていますので、リンク先からご確認ください。
Awesome Floating Social Subscribing Widget
で、みつけたシンブルなボタン。ライブデモはこちら。（本来のデモページは広告がポップアップしてくるので、うちのテストページにしています。）
導入方法
Blogger 管理画面「デザイン ＞ レイアウト」からサイドバーの「ガジェットを追加」リンクをクリック、「HTML/JavaScript」ガジェットを選択し、タイトルなしで、本文に以下のコードを入れて「保存」します。
コード中、色のついている文字列については、それぞれ自分のものに書き換えてください。
Blogger 管理画面「デザイン ＞ レイアウト」からサイドバーの「ガジェットを追加」リンクをクリック、「HTML/JavaScript」ガジェットを選択し、タイトルなしで、本文に以下のコードを入れて「保存」します。
<style>
.btsnts-flt-wdt{
position:fixed;
right:10px;
top:30%;
}
.btsnts-flt-wdt img{
float:right;
clear:right;
margin:1px;
-webkit-transition: all .0s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.btsnts-flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
}
</style>
<!-- btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="Facebook の URL" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglCXD9ydfglOOZMv3BuUVCy37NThnQZKs_vh7ZKicv4PWf1lIeF5yLeRAN2cVjBl97hxoZtvIiIz1TNHSTPOll-QoLPjIFZ03uCrLE-5mvWuHQfw8xZRAWJBbRuWWYl1640Amu/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="Twitter の URL" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoqdNqZ2hg2B9J2mfcMiQZLTooRRkaH30MseqD0zabJjWecdTL2Aji5wl0wCBoKWFNuOtKhbJCwMj9-DkIVTvhmc5vvkleO0WlxgLxcbF8-2RWzYE7BHPKLsF2n2t4JlJsfbiD/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="ブログフィードの URL" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkuWJTRDuE9rqOk9-xWf32Hb8B5U1km3d0j5tDPd9EG1FJPXRdmoASQVlW0GESosq1WlNPOn6qJd4Sktdy2HSdgYddcIbby2p-iWTuotQa5IPyk3d1B8iLDrJ38_l2F_E5xbN/s1600/Rss.png" /></a>
<!-- Email -->
<a href="mailto:メールアドレス or コンタクトページの URL" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYU5cTi-ov-AJ-WZaF1XMbhkH9R8t7Y6pnhUt7Ez35ZFiAgv1e-BCX23uOU91_vpS_LJ1x_JoWdDbt35urD-meB541hXMek0kiMNRD5r4hAnRhZVZiW2f5PYiI4ica5OOvG57x/s1600/Mail.png" /></a>
</div>
<!-- End -->
.btsnts-flt-wdt{
position:fixed;
right:10px;
top:30%;
}
.btsnts-flt-wdt img{
float:right;
clear:right;
margin:1px;
-webkit-transition: all .0s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.btsnts-flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
}
</style>
<!-- btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="Facebook の URL" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglCXD9ydfglOOZMv3BuUVCy37NThnQZKs_vh7ZKicv4PWf1lIeF5yLeRAN2cVjBl97hxoZtvIiIz1TNHSTPOll-QoLPjIFZ03uCrLE-5mvWuHQfw8xZRAWJBbRuWWYl1640Amu/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="Twitter の URL" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoqdNqZ2hg2B9J2mfcMiQZLTooRRkaH30MseqD0zabJjWecdTL2Aji5wl0wCBoKWFNuOtKhbJCwMj9-DkIVTvhmc5vvkleO0WlxgLxcbF8-2RWzYE7BHPKLsF2n2t4JlJsfbiD/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="ブログフィードの URL" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkuWJTRDuE9rqOk9-xWf32Hb8B5U1km3d0j5tDPd9EG1FJPXRdmoASQVlW0GESosq1WlNPOn6qJd4Sktdy2HSdgYddcIbby2p-iWTuotQa5IPyk3d1B8iLDrJ38_l2F_E5xbN/s1600/Rss.png" /></a>
<!-- Email -->
<a href="mailto:メールアドレス or コンタクトページの URL" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYU5cTi-ov-AJ-WZaF1XMbhkH9R8t7Y6pnhUt7Ez35ZFiAgv1e-BCX23uOU91_vpS_LJ1x_JoWdDbt35urD-meB541hXMek0kiMNRD5r4hAnRhZVZiW2f5PYiI4ica5OOvG57x/s1600/Mail.png" /></a>
</div>
<!-- End -->
コード中、色のついている文字列については、それぞれ自分のものに書き換えてください。
このガジェットのコードは HTML と CSS だけで書かれているので、画像を変えたりリンク先を変えたりといったカスタマイズがけっこう簡単にできると思います。
上掲のコード自体もすでにカスタマイズされたもので、オリジナルはこちらのようです（デモはこちら）。不思議な生き物が見えますね…。
Animated Sassy Bookmarking Gadget
で見つけた、ピョンと出てきて、シュッと引っ込むソーシャルボタンたち。ライブデモはこちら。動きがとても楽しいかと。
導入方法
Blogger 管理画面「デザイン ＞ レイアウト」からサイドバーの「ガジェットを追加」リンクをクリック、「HTML/JavaScript」ガジェットを選択し、タイトルなしで、本文に以下のコードを入れて「保存」します。
このコードは、書き換えは必要ありません。
Blogger 管理画面「デザイン ＞ レイアウト」からサイドバーの「ガジェットを追加」リンクをクリック、「HTML/JavaScript」ガジェットを選択し、タイトルなしで、本文に以下のコードを入れて「保存」します。
<!-- Start Shareaholic Sassy Bookmarks HTML - http://www.spiceupyourblog.com -->
<div class='shr_ss shr_publisher'>
</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark",
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script><small><a href='http://www.spiceupyourblog.com/2012/05/animated-sassy-social-bookmark-gadget.html'>Animated Social Gadget</a> - <a href='http://www.spiceupyourblog.com'>Blogger And Wordpress Tips</a></small>
<!-- End Shareaholic Sassy Bookmarks script -->
<!-- End Shareaholic Sassy Bookmarks HTML - http://www.spiceupyourblog.com -->
<div class='shr_ss shr_publisher'>
</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark",
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script><small><a href='http://www.spiceupyourblog.com/2012/05/animated-sassy-social-bookmark-gadget.html'>Animated Social Gadget</a> - <a href='http://www.spiceupyourblog.com'>Blogger And Wordpress Tips</a></small>
<!-- End Shareaholic Sassy Bookmarks script -->
<!-- End Shareaholic Sassy Bookmarks HTML - http://www.spiceupyourblog.com -->
このコードは、書き換えは必要ありません。
忍者おまとめボタン
で公開されているのは「忍者おまとめボタン」。これは、各サービスてバラバラに提供されているボタン類を一括して設定することができるサービス。一度ブログに貼り付けてしまえば、「忍者おまとめボタン」のページからレイアウトを変更することが可能です。変更のたびに Blogger テンプレートを編集しなくてもいいのが、非常に便利かと。
導入の仕方についてはは、すなふさんのページをご参考に。
Zenback
Twitter 経由で Kamimura さんにこれを愛用していると教えてもらいました。「関連するみんなの記事」や Zenback 関連のつぶやきが入ってしまうものの、たしかにこれでもソーシャルボタンをまとめることができますね。
Blogger ブログへの Zenback の導入については、romberg さんのページが詳しいです。
まだまだあった気がしますが、クリボウが今思い出せたのはこれだけ。おすすめのものがほかにもあれば、教えてもらえるとうれしいです。
Blogger 公式でも一応「+1 ボタン」ガジェットや「Google+ バッジ」ガジェットが用意されていますが、ほかのサービスのボタンとの統一感を出すのが難しいですね…。上記のソーシャルボタン詰め合わせガジェットを上手に使えば、ブログデザインもきっとよくなるはず。ということで、ぜひ一度お試しを。
＜更新＞
2012-06-25: Zenback の項目を追加しました。
ずっと昔に公開した、Blogger サイドバーにつけられる「クリボウ式 Blogger カレンダー」ガジェット
日付をクリックしても記事が変わりません。
…と、またしても動かなくなっていたようなので、スクリプトを更新しました。「動かない！」と外してしまった方も、もう一度試してもらえるとうれしいです。導入は上記リンク先からどうぞ。すでに貼り付けている人は、そのままで新しいコードが適用されます。
この更新に関する技術的な話は、別ブログにまとめています。関心のある人は、参考にしてみてください。
参考： 関連：
Blogger に新しい「翻訳ガジェット」が追加されています。
うまく動かないときの対処法
…これだけで導入はいいはずなんですが、このブログにつけてみたところ、正しく動いてくれませんでした。問題点は、次の 3 つです。
- 翻訳できない
最初に気づいたのは、翻訳したい言語の選択肢に「英語」が出てこないことです。うちの場合、ブログ各部の表記を「英語」にしているせいか、ブログのコンテンツの言語も英語だと判断されているようです。そのため「英語から他の言語へ」の翻訳という扱いになり、どの言語への翻訳もうまくいきませんでした。 - 表示形式を変更できない
ガジェットの追加画面で、翻訳ツールの表示方法を「縦」「横」「プルダウンのみ」の中から選択することが可能なんですが、どう指定しても「縦」に戻ってしまいました。これはブラウザによるものかもしれません。 - ツールバーが常時表示される
最後は、好みの問題の気もしますが…。このガジェットを付けると、「Google 翻訳」ツールバーがページ上部に常に表示されてしまいます。Blogger には、そもそも Navbar があるので、その上にさらにツールバーが表示されると、不恰好な印象を読者に与えかねません。
１．Blogger 管理画面「テンプレート」ページで「HTML の編集」ボタン、「続行」ボタンを押し、出てきた画面から「ウィジェットのテンプレートを展開」にチェックを入れます。
２．「Translate1」という ID のウィジェットを探します。ブラウザの検索機能を使うと便利です。
３．次のコードを見つけ、
２．「Translate1」という ID のウィジェットを探します。ブラウザの検索機能を使うと便利です。
３．次のコードを見つけ、
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: '<data:pageLanguage/>',
autoDisplay: 'true',
layout: google.translate.TranslateElement.InlineLayout.<data:layout/>
}, 'google_translate_element');
}
赤字部分を new google.translate.TranslateElement({
pageLanguage: '<data:pageLanguage/>',
autoDisplay: 'true',
layout: google.translate.TranslateElement.InlineLayout.<data:layout/>
}, 'google_translate_element');
}
ja に、青字部分は翻訳ツール「横」表示なら HORIZONTAL に、「プルダウンのみ」表示なら SIMPLE に変更します。緑字部分は、最初から「Google 翻訳」ツールバーを表示するかどうかです。false にしておくと、翻訳が行われたときだけツールバーが出るようになります。この行ごと削除しても false 指定と同じになるみたいです。
悪戦苦闘して、ようやく付けられた翻訳ガジェット。サイドバーに掲載しているので、動作を確かめてみてください。一度「英語」などで翻訳を行うと、その手続きを覚えているようで、再度ブログを表示したときにも自動的に「英語」で表示されるようです。
他の 2 つのガジェットも動的ビュー（ダイナミックビュー）対応に
「翻訳ガジェット」登場に伴い、従来からあった「ブログリスト」と「リスト」のガジェットも動的ビュー対応になりました。
これで、動的ビュー対応のガジェットは
- +1 ボタン
- Google+ バッジ
- 翻訳
- 読者
- ブログリスト
- リンクリスト
- リスト
- ラベル
- リンク登録
- 基本情報
- ブログアーカイブ
関連：
