Google+ ページ「クリボウの Blogger Tips」および、Facebook ページ「クリボウの Blogger Tips」で流した先月の Blogger 関連のつぶやきを、ここにまとめておきます。
リアルタイムで読みたい!という人は、上記リンク先からぜひ、サークルに追加したり「いいね!」したりしてください。
ちなみに、今回一番多く紹介したのがすなふ(梨音) さんの Sunabox というブログです。
Blogger のカスタマイズにとどまらず、インターネット、パソコン、書籍、日常雑感と、話題が多岐にわたります。かき氷の記事は圧巻。最近のお気に入りブログです。
Blogger のカスタマイズにとどまらず、インターネット、パソコン、書籍、日常雑感と、話題が多岐にわたります。かき氷の記事は圧巻。最近のお気に入りブログです。
- [K!]Bloggerユーザ注目.Picasaの共有設定は安易に変えてはいけない.
Picasa のアルバムの共有設定を途中で変えると、Blogger に投稿していた写真も全部表示できなくなるそうな…。ご注意を。 - Customize Blogger Labels With CSS3 ~ Helper Blogger
Blogger のラベルを荷札みたいにデザインする、CSS3 カスタマイズ。 - Bloggerが標準装備したパーマリンク機能のメリット:はなまるチェック!
Blogger 標準となった「カスタムパーマリンク」機能についてのわかりやすいまとめ。 - adsenseのセクションターゲット挿入について - Google グループ
Blogger 投稿エディタの作成モードと HTML モードを行き来した際にタグが抜け落ちる不具合について、回答しました。 - Google グループ
メール投稿できなくなっていた件、無事解消されたようですが、投稿されなかったメールが全部一気に投稿されたとのこと。それはそれで怖いかも。 - Change the way older post, new post and Home appears on your blog on Core Blogging
「新しい投稿」「ホーム」「前の投稿」リンクを画像に変える方法。 - Googleカスタム検索でBloggerを検索対象にするときは注意 | while(isプログラマ)
Google カスタム検索にブログの記事を含めるには、blogspot.jp じゃなくて blogspot.com を登録しないといけない、という話。 - Blogger、ブログの管理画面にGoogle+アカウントの設定が追加される | +PlusOneWorld
Blogger と Google+ との連携がますます進むようです。 - 日常@水月 Blogger版: Bloggerで「はてなスター」を表示するときのテンプレート修正
Blogger ブログへのはてなスターの導入方法。 - [Blogger]オススメ記事をヒョコッと表示してくれる!Facebookの【Recommendations Bar】の導入方法。 - Sunabox
おすすめ記事を紹介するバー、Facebook 提供のがあるんですね。 - Happy-Go-Lucky: Blogger ユーザのみなさまへ - モブログアプリをリリースしました!
Blogger 用の新しい iPhone アプリ。こんなの作れちゃうんですね。すごい! - Breadcrumbs Navigation Widget For Blogger ~ Helper Blogger
Blogger ブログにパンくずリストをつける方法。 - [Blogger]Recommendations Barを導入後、モバイル閲覧時には表示させないようにする方法。 - Sunabox
Facebook の Recommendations Bar について、詳しい続報。 - Twitter / list0: Blogger をいじってて毎度思うのだけど、投稿 ...
「投稿(Atom)」リンクの消し方についてのツイートに返信。消すのにはこんなのとかこんなのといった手があるようですね。 - [WordPress] Bloggerからのリダイレクト | 最近,気になったこと...
Blogger から WordPress への移行時に、旧ページへのアクセスをリダイレクトさせる方法。こんな方法があるんだ…。
→ 記事「Blogger から WordPress への移行時に、旧ページへのアクセスを新ページへとリダイレクトする方法」で紹介。 - How To Add Pop Up Email Subscription Form For Blogger Using Jquery ~ Blog tips | blogging tips,blogger widgets,seo tips and tricks
メール購読用登録画面をポップアップさせる方法。 - Blogger Buster: Page Navigation with Arrow Keys in Blogger
矢印キーでページ操作する方法。
→ 記事「Blogger ブログで、矢印キーを使ってページ移動できるようにするカスタマイズ」で紹介。 - Correct way to Optimize Permalinks in Blogger | My Blogger Tricks
Blogger のパーマリンクを最適化するための正しい方法。
→ 記事「Blogger でカスタムパーマリンクをつけるときの 5 つのヒント」で紹介。 - BloggerにRubyで投稿 - rubellum's blog
Ruby で Blogger に投稿するためのコード。いろんなライブラリがあるもんですね。 - MBA-HACK: Vimのカスタマイズ Tips
Vim から Blogger に投稿できるようにする設定方法。 - 3D Follow Me Buttons With Hover Effect ~ Blogging Trickz and Toolz
マウスホバーでにょきっと出てくる立体的なソーシャルボタンセット。デモはこちらの右側。 - Customized and Stylized Subscription Widget For Blogs
メール購読ガジェットの見栄えをよくするカスタマイズ例。 - Optimize URL Parameters For Blogger in Webmaster Tools | My Blogger Tricks
Google ウェブマスターツールでの URL パラメータについての設定方法。Googlebot のクロールに関わることなので、扱いは要注意。 - [Blogger]標準の「人気の投稿」ガジェットのスタイルを自分好みに変更する方法! - Sunabox
「人気の投稿」ガジェットの画像をきれいに見せるためのカスタマイズ方法。 - How to Change Default Anonymous Avatar in Blogger Comments | Blogger Help
コメントのデフォルトアイコンを変更する方法。
→ 記事「Blogger のコメント欄で、デフォルトのアバター画像を変更する方法」で紹介。 - Pinfinity Blogger Template | Cool Blog Templates | Premium Blogger Templates | New Wordpress Templates
Pinterest っぽい Blogger 用テンプレート。ブラウザのウィンドウ幅に応じて配置が変わるのもいい感じ。 - [K!][Recommendations Bar]の登録完了![.jp][.com][Blogger]
Facebook の Recommendations Bar を使うときには、App Domains に blogspot.com と blogspot.jp の両方を指定しておくのがいいらしい。

Blogger ブログでは、匿名ユーザーや、アバターを指定していない Blogger ユーザーがコメントを投稿した場合、コメント欄にはデフォルトのユーザーアイコンが表示されます。今回は、このデフォルトで使用する画像をブログで自由に設定する方法についてです。
※ このカスタマイズは、「埋め込み」方式のコメント欄にのみ有効です。コメント投稿フォームを投稿ページに埋め込むには、Blogger 管理画面「設定 > 投稿とコメント」ページから、「コメントの場所」項目を「埋め込み」にしてください。
今回のカスタマイズ方法については、以下のサイトを参考にしました。(コードは一部変更しています。)
上に示した以外のアバターも紹介されています。それぞれ URL が掲載されているので、気に入ったものがあれば、以下のカスタマイズ方法に従って変更してみてください。
導入方法
さっそく導入方法を見ていきます。
1.Blogger 管理画面で「テンプレート > HTML の編集 > 続行」 と進みます。
2.
3.「テンプレートを保存」ボタンを押します。
2.
</body> の直前に次のコードを挿入します。</body> は、ブラウザの検索機能を使うと見つけやすいと思います。
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script type='text/javascript'>
$("img[src='http://img1.blogblog.com/img/anon36.png']").attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5WeV7jBLDLaqqYGr__WMu8qRHIAuaqTHqyxe71ntQhSNfc203286SEFn1LCFGT7Rh2gdbIC1Ska_qrsTZEEDyJKgiwD5Kg6sfyid7JeHlWuMKUH4dzVxcBsTOa1viYBGrFj8l/s1600/default_avatar.gif');
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']").attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Lg9-BjZ_jpGk-0JdUaADx7WKORc6iVlFlgjAzTbutT2Hm4DKIOoeTd6FidXUhCd_VxLvwuCil3ZzlOJjXdOIOKJrdrrqrrHMjfPl8vcP_gUBAk3YhzkbOn8Dd6mGI57gjF80/s1600/blogger-user.png');
</script>
<script type='text/javascript'>
$("img[src='http://img1.blogblog.com/img/anon36.png']").attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5WeV7jBLDLaqqYGr__WMu8qRHIAuaqTHqyxe71ntQhSNfc203286SEFn1LCFGT7Rh2gdbIC1Ska_qrsTZEEDyJKgiwD5Kg6sfyid7JeHlWuMKUH4dzVxcBsTOa1viYBGrFj8l/s1600/default_avatar.gif');
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']").attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Lg9-BjZ_jpGk-0JdUaADx7WKORc6iVlFlgjAzTbutT2Hm4DKIOoeTd6FidXUhCd_VxLvwuCil3ZzlOJjXdOIOKJrdrrqrrHMjfPl8vcP_gUBAk3YhzkbOn8Dd6mGI57gjF80/s1600/blogger-user.png');
</script>
3.「テンプレートを保存」ボタンを押します。
これだけです。簡単ですね。
カスタマイズ方法
導入方法で示したコード中、赤字部分で匿名用のアバター画像、青字部分で Blogger ユーザー用のアバター画像が指定されています。好みの画像が別にあれば差し替えてみてください。
緑色のコードは、JavaScript のライブラリ jQuery を呼び出している部分です。通常このままで問題ありませんが、ブログで他に jQuery を呼び出して使っている箇所がある場合、省略した方がいいと思います。
テンプレート変更などブログの模様替えの際に、こういった細かいところもテーマに合わせてカスタマイズしてみると面白そうです。フォトログやイラストブログなんかで、自分の撮った写真や手書き画像にしてみるのもいいかもしれませんね。
でお知らせしたとおり、Blogger でも各投稿の URL(パーマリンク)を自由に指定できるようになりました。そうなると、迷うのが各投稿にどういう URL をつければいいのかという点。参考になりそうな記事を見つけたのでご紹介します。
日本語にすると「Blogger のパーマリンクを最適化するための正しい方法」という、なかなか強気のタイトルです。
ポイントを短くまとめてみるとこんな感じ。
4 単語以内にする
ページファイル名は短いほどいいです。検索エンジンでは、ファイル名に単語が 5 つ以上あっても大抵 4 単語に切り取り続きを表示しないようにしています。そのため、企業のメディアやニュースブログの多くがこの制限に従っています。
30 文字以内にする
Google や Yahoo は、ページファイルのタイトルの最初の 30 文字を表示し、Bing は 36 文字表示します。Bing はともかくとして、Google や Yahoo に対応するため、30 文字以内にするのがいいでしょう。
投稿タイトルを要約する
投稿タイトルを単純に英訳して並べるのではなく、要約して短くまとめます。前置詞や冠詞は省いても OK です。それらをキーワードにして検索する人は、ほとんどいませんから。
投稿タイトル中のキーワードを言い換える
検索の際にいろんな単語でページがヒットするように、投稿タイトル中のキーワードを別の単語に言い換えて URL に含めるというのも一つの手です。
単語の区切りにはハイフンを使う
Blogger 以外のブログサービスでもそうしているように、単語の区切りにはハイフン(-)を使うのがいいでしょう。ハイフンとアンダーバーで扱いを変えている検索エンジンもあるようですし(参考)、アンダーバーで単語を区切るのはあまりよくありません。
ページファイル名は短いほどいいです。検索エンジンでは、ファイル名に単語が 5 つ以上あっても大抵 4 単語に切り取り続きを表示しないようにしています。そのため、企業のメディアやニュースブログの多くがこの制限に従っています。
30 文字以内にする
Google や Yahoo は、ページファイルのタイトルの最初の 30 文字を表示し、Bing は 36 文字表示します。Bing はともかくとして、Google や Yahoo に対応するため、30 文字以内にするのがいいでしょう。
投稿タイトルを要約する
投稿タイトルを単純に英訳して並べるのではなく、要約して短くまとめます。前置詞や冠詞は省いても OK です。それらをキーワードにして検索する人は、ほとんどいませんから。
投稿タイトル中のキーワードを言い換える
検索の際にいろんな単語でページがヒットするように、投稿タイトル中のキーワードを別の単語に言い換えて URL に含めるというのも一つの手です。
単語の区切りにはハイフンを使う
Blogger 以外のブログサービスでもそうしているように、単語の区切りにはハイフン(-)を使うのがいいでしょう。ハイフンとアンダーバーで扱いを変えている検索エンジンもあるようですし(参考)、アンダーバーで単語を区切るのはあまりよくありません。
もちろんこれが絶対的なルールというわけではないんですが、カスタムパーマリンク指定の際のひとつの目安として、覚えておくといいかもしれませんね。

