>--> | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

Blogger 関連のつぶやき 2012-08

Posted at: 2012-09-02 Label: 2

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

リアルタイムで読みたい!という人は、上記リンク先からぜひ、サークルに追加したり「いいね!」したりしてください。


ちなみに、今回一番多く紹介したのがすなふ(梨音) さんの Sunabox というブログです。

thumbnailSunabox  

PC、Chrome、bloggerネタを中心にしながら、全然離れたところまで、何も気にせず書いていくブログです!!

Blogger のカスタマイズにとどまらず、インターネット、パソコン、書籍、日常雑感と、話題が多岐にわたります。かき氷の記事は圧巻。最近のお気に入りブログです。


このブログでは毎月一度、記事にしたネタや記事にしきれなかったニュースを載せています。最新のニュースについては、Google+ ページもしくは、Facebook ページでご確認ください。

Blogger のコメント欄で、デフォルトのアバター画像を変更する方法

Blogger コメント欄デフォルトアバターの変更前と変更後

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

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

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

thumbnailHow to Change Default Anonymous Avatar in Blogger Comments | Blogger Help  


上に示した以外のアバターも紹介されています。それぞれ URL が掲載されているので、気に入ったものがあれば、以下のカスタマイズ方法に従って変更してみてください。


導入方法

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

1.Blogger 管理画面で「テンプレート > HTML の編集 > 続行」 と進みます。

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>

3.「テンプレートを保存」ボタンを押します。

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


カスタマイズ方法

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

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


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

Blogger でカスタムパーマリンクをつけるときの 5 つのヒント



でお知らせしたとおり、Blogger でも各投稿の URL(パーマリンク)を自由に指定できるようになりました。そうなると、迷うのが各投稿にどういう URL をつければいいのかという点。参考になりそうな記事を見つけたのでご紹介します。


thumbnailCorrect way to Optimize Permalinks in Blogger | My Blogger Tricks  


日本語にすると「Blogger のパーマリンクを最適化するための正しい方法」という、なかなか強気のタイトルです。


ポイントを短くまとめてみるとこんな感じ。

4 単語以内にする

ページファイル名は短いほどいいです。検索エンジンでは、ファイル名に単語が 5 つ以上あっても大抵 4 単語に切り取り続きを表示しないようにしています。そのため、企業のメディアやニュースブログの多くがこの制限に従っています。


30 文字以内にする

Google や Yahoo は、ページファイルのタイトルの最初の 30 文字を表示し、Bing は 36 文字表示します。Bing はともかくとして、Google や Yahoo に対応するため、30 文字以内にするのがいいでしょう。


投稿タイトルを要約する

投稿タイトルを単純に英訳して並べるのではなく、要約して短くまとめます。前置詞や冠詞は省いても OK です。それらをキーワードにして検索する人は、ほとんどいませんから。


投稿タイトル中のキーワードを言い換える

検索の際にいろんな単語でページがヒットするように、投稿タイトル中のキーワードを別の単語に言い換えて URL に含めるというのも一つの手です。


単語の区切りにはハイフンを使う

Blogger 以外のブログサービスでもそうしているように、単語の区切りにはハイフン(-)を使うのがいいでしょう。ハイフンとアンダーバーで扱いを変えている検索エンジンもあるようですし(参考)、アンダーバーで単語を区切るのはあまりよくありません。

もちろんこれが絶対的なルールというわけではないんですが、カスタムパーマリンク指定の際のひとつの目安として、覚えておくといいかもしれませんね。

© 2005-2014 Kuribo. Powered by Blogger.