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

クリボウの Blogger Tips

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

Home > 2012

2012

Blogger 関連のつぶやき 2012-11、2012-12

Posted at: 2012-12-29 Label: 6

Blogger People

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

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


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


あとがき

はあ、長かった。ふた月分ためてしまうとまとめるのが大変ですね。反省。年末年始の暇なときに読んでもらえたら幸いです。今年も読者の皆さまにはお世話になりました。皆さま、どうぞよいお年をお迎えください。

Blogger の投稿から Google+ へのメンションが可能に

Posted at: 2012-12-22 Label: , , 6

Blogger の投稿編集画面を開くと、こんなお知らせが。

ブログから Google+ プロフィールやページを呼び出して、投稿について知らせることができるようになりました。開始するには、ブログを Google+ に接続します。詳細についてはこちらをご覧ください。
Blogger に、Google+ のプロフィールやページへメンションを飛ばすための新機能が登場したようですね。

実際にどのように動くかについては、次の動画の 02:16 あたりから見ると分かりやすいと思います。


投稿編集画面の本文中に @ や + をつけた Google+ プロフィール名や Google+ ページ名を記述すると、簡単にリンクを張れるようになっています。メンションを付けられたユーザーには、Google+ ページ内で通知が届く、はず。

Google+ と Blogger との連携がどんどん進んでいきますね。Blogger アカウントを Google+ と接続させているユーザーは、一度試しにやってみたらいいんじゃないでしょうか。(Google+ ページ +クリボウの Blogger Tips 宛てに実験してみるというのも可です。)

FeedBurner でフィードが更新されなくなったら

Posted at: 2012-12-11 Label: 4

feed sabonetinhos
(cc) violinha


Sunabox のすなふさんが、Blogger のフィードリダイレクト機能で利用している FeedBurner フィードが更新されなくなった件について、記事にしてくださっています。

この記事によると、Blogger の発行している元フィード(ATOM フォーマット)が 512KB 以上だったことが原因のようです。FeedBurner のヘルプにもこのとおり。

フィード ファイルのサイズに制限はありますか?
はい。 512 KB を超えるフィードは FeedBurner では受け付けておりません。(中略)現在、既存のフィードを公開していて、オリジナルの出力元フィードが 512 KB の制限を超えている場合は、オリジナルのサイズが制限内に収まるまで、FeedBurner では「登録されている」フィードを更新しません。

フィードのサイズが 512KB を超えると、ブログの更新が FeedBurner のフィードには反映されなくなってしまうということですね。

次に見つけたのが、こちらのブログの記事。

こちらによると、FeedBurner ヘルプに、Blogger のフィードが 512KB を越さないようにする方法についても書かれているそうなので、さっそく確認してみました。

Bloggers: 長い投稿を作成し、FeedBurner の合計フィード サイズ上限の 512 KB を超えた場合は、 max-results を小さく設定して、フィード ファイルのサイズを制御します。 理想的なフィード サイズを確認するために、max-results 設定で試してみる必要があります。 フィードのファイル サイズを確認するには、 そのアドレスを www.web-sniffer.net に入力し、返されたレポートを確認します。このレポートには、「圧縮されていない」形式でのフィードのサイズの値がキロバイト単位で示されています。
つまり、FeedBurner のフィード設定「Edit Feed Details」の「Original Feed」に設定しているフィード URL に max-results パラメータをつけ、フィードに記載される投稿数を調節するといいということです。

http://www.kuribo.info/feeds/posts/default
     ↓
http://www.kuribo.info/feeds/posts/default?max-results=15

このパラメータは、省略するとデフォルトの記事数(25)になるので、それよりも小さい数で試してみるのがいいと思います。フィードの実際のファイルサイズは、こちらのサイトからフィード URL を入力することで確認することができます。

ちなみに、このブログの場合、何もしない状況で 45KB でした。うちのブログはどうあっても上限には達しないと思いますが、FeedBurner を利用していて Blogger ブログで長文を書いているという人は、一度オリジナルフィードのファイルサイズを確認してみるといいと思います。


参考記事:

Google+ に日本の Blogger ユーザーのためのコミュニティが登場

Posted at: 2012-12-10 Label: , 8

Google+ Community Blogger Japan

今月、Google+ に新しくコミュニティ機能が追加されたんですが、

Bloggerのコミュニティはいっぱいあるけど、Japanは無いんだな…… +クリボウの Blogger Tips さんが作ってくれないかなー。
というつぶやきをいただいたので、さっそく作ってみました。「登場」とか書いておきながら、自分の作成したコミュニティなんです、はい。

作成した Google+ コミュニティ「Blogger Japan」は、日本の Blogger ユーザーのためのコミュニティです。現在用意している投稿のカテゴリは、「はじめまして」、「Blogger 情報」、「質問・回答」、「その他」の 4 種類。 参加は、Google+ の個人アカウント、Google+ ページアカウントのどちらでも可能です。カテゴリ「はじめまして」への投稿も特に必須というわけではないので、気軽にコミュニティに参加してもらえるとうれしいです。

なお、Google+ のスパム判定がけっこう厳しいようで、投稿してもすぐには公開にならない場合があります。投稿したはずなのに本文が表示されないという場合は、管理者が承認するまでしばらくお待ちください。

コミュニティ管理者のアカウントですら、このありさまですから…涙

Google+ Community Spam Detection

ということで、新しい Google+ コミュニティ、どうぞよろしくお願いします。

YouTube の動画共有先に Blogger が復活しています

Posted at: 2012-12-09 Label: 7

YouTube to Blogger

数か月前に「YouTube の動画共有先選択肢に Blogger が出なくなっています」とお伝えしたんですが、その YouTube 動画の「この動画を共有」選択肢に Blogger が復活した模様です。

で知った情報。ありがとうございます。

YouTube メニューの「共有」タブをクリックして、共有先アイコン横の展開ボタン「▶」をクリックすると、右端に「Blogger」のアイコンが出てきます。それをクリックすると BlogThis! の画面になり、その場から YouTube 動画を埋め込んだ Blogger の新規投稿が行えます。

YouTube 動画を多く紹介するブログなんかでは、重宝する機能なんじゃないでしょうか。この機会に、お気に入りの動画をブログで紹介してみるのもいいかもしれませんね。

IE 10 での閲覧時に Blogger ブログが応答なしになるのを防ぐ方法


Internet Explorer 10 でこのブログを表示してみると、上記画像のようになりました。読み込み中のマークがタブに出たまま、ページのスクロールができなくなっています。ためしにページをクリックしてみると最下部に「kuribo.info は応答していません。」というメッセージ。テキスト選択や文字入力もできません。

この問題を知ったのは、こちらのブログから。ありがとうございます。

自分のブログ以外にスズキさんのブログやクリボウさんのブログでも同様の現象が発生!
※現象が出ないBlogerサイトもありました。

そして 3 日後には、同ブログで解決策が紹介されました。

これによると、Blogger 管理画面「テンプレート > HTML の編集」からテンプレートのコードを表示し、
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
   ↓
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
と変更すればいいとのこと。このやり方でこのブログも IE 10 で問題なく閲覧できるようになりました。重ねてありがとうございます。edge にした場合の挙動など、詳しい情報については上記リンクからご確認ください。

IE 10 は Windows 8 に標準搭載ということもあり無視できないものがあるかと思います。すべての Blogger ブログで IE 10 が固まるわけではないようですが、気になる人は対策をしておくといいかもしれません。


関係あるかもしれない情報:

Blogger 公式 Android アプリ、iOS アプリがともにアップデート

Posted at: 2012-11-24 Label: , , , 7

Image by Blogger Buzz

Blogger 公式の Android アプリ、iOS アプリがどちらも更新されています。どちらもバージョンは 2.0。

Blogger Buzz によると、

  • 画面横向きの投稿作成をサポート
  • Google+ へ簡単に共有できる
  • スケジュール投稿の時刻表示
  • 30 以上の言語に対応
  • iPad に対応
といった点が新しくなったとのこと。すでに
  • 投稿を作成して下書きとして保存したり、すぐに公開する
  • 保存した投稿や公開した投稿の一覧を表示する
  • アカウントやブログを切り替える(複数ご使用の場合)
  • ギャラリーから画像を埋め込んだり、アプリで直接写真を撮る
  • 投稿にラベルを付ける
  • 場所情報を追加する
といったことはできるようになっているので、パソコンでのブログ更新とほぼ同じことがスマートフォンからも行えるということかと。

それぞれのアプリのダウンロード&インストールはこちらからどうぞ。

あと、iOS 版は端末からアプリを更新しても使えないという情報もあったり。削除して、インストールし直すのが吉だとか。

Blogger 関連のつぶやき 2012-09、2012-10

Posted at: 2012-11-03 Label: 10

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

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


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

YouTube の動画共有先選択肢に Blogger が出なくなっています

Posted at: 2012-09-30 Label: , 12

Blogger が共有先に含まれなくなった YouTube の「共有」オプション画面

こちらの記事で知った情報。(ありがとうございます。)

YouTube の動画共有先の選択肢に Blogger が含まれなくなっていますね(以前はこんな感じ)。共有先最上部には Facebook、Twitter、Google+ の 3 つしか出ていないので、「その他」を選んでみたところ、そこにも Blogger は見当たらず。Ameba、楽天ブログ、mixi、tumblr、Yahoo! Japan、ウェブリブログ、goo なんかはあるんですけどね…。

今後、Google の中で Blogger がどう位置付けられていくのか、ちょっと心配になったり。

ちなみに、実際に Blogger ブログへ YouTube 動画埋め込みたいときには、上記 YouTube 画面「共有」ボタンから、「埋め込みコード」ボタンを押し、表示されたコードを直接 Blogger の投稿エディタの投稿本文欄に貼り付ければ OK です。

FeedBurner で購読者数が 0 になる不具合

Posted at: 2012-09-24 Label: , , 5

Blogger が ATOM フォーマットでしかフィードを発行していなかった時代、RSS フィードを発行するために FeedBurner を使うというのが一つの定石のようになっていました。Google による FeedBurner の買収、その後の Blogger 公式の FeedBurner へのフィードリダイレクト機能の追加、FeedBurner による AdSense For Feeds 開始といった流れの中で、現在 FeedBurner のサービスを利用している Blogger ユーザーはかなりの数に上るはず。

FeedBurner で購読者数が 0 になる不具合

そんな FeedBurner で、フィードの購読者数やリーチ数が 0 と表示されるという不具合が起きています。これを知ったきっかけはこちらのブログ。ありがとうございます。

実際に FeedBurner サイトを見に行ってみると、上の画像の通り、クリボウのブログのフィード購読者数もすべて 0 になっていました。このブログ「クリボウの Blogger Tips」のフィードを選んでみても、この通り。

FeedBurner で購読者数が 0 になる不具合

「September 17」に「24,910 subscribers」あったグラフが、「September 18」には「0 subscribers」になってしまっています。フィード自体はちゃんと機能しているようなのでクリボウは特に困っていないんですが、日々の購読者数やリーチ数のチェックを日課にしている人なんかには痛手かと。

FeedBurner に関連していうと、feedburner.jp ドメインの失効(2012 年 7 月、参考)、Twitter 上の FeedBurner アカウントの更新停止(2012 年 7 月、参考)、AdSense For Feeds ブログの更新停止(2012 年 7 月、参考)、FeedBurner API の停止(2012 年 10 月予定、参考)と、ここのところ立て続けに停止・停止予定が相次いでいます。そのため、今回の不具合も FeedBurner 自体がサービス停止する予兆なのでは?という憶測が一部インターネットで流れていますが、今のところそういう事実はないようです。

FeedBurner の公式ブログ

によると、FeedBurner チームもこの問題を調査し、現在回復に向けて取り組んでいる最中だとのこと。FeedBurner の恩恵に与っている Blogger ユーザーとしては、回復を信じて気長に待つしかないようです。


追記(2012-09-30):

Ataka さんから、FeedBurner の統計機能が復活したとのコメントいただきました。(ありがとうございます。)
この間の FeedBurner の統計機能の状況変化については、Ataka さんの記事が参考になると思います。

Blogger ダッシュボードの旧インターフェースがついに使えなくなりました

Blogger の以前のインターフェースは数日以内に削除されます。

上の画像のように、
Blogger の以前のインターフェースは数日以内に削除されます。
というアナウンスがされていた旧インターフェースのダッシュボードなんですが、おとといアクセスしてみたらすでに使えなくなっていました。気づいたのは、このツイートのおかげです。ありがとうございます。


古くからの Blogger ユーザーにとって根強い人気があった旧インターフェースですが、この終了も時代の流れなんでしょうね。

Blogger Buzz を読み返してみると、新インターフェースダッシュボードが発表されたのが 2011 年 9 月、新インターフェースがデフォルトになったのが 2012 年 4 月のことだったようです。で、この 2012 年 9 月、オプションで使用可能だった旧インターフェースもとうとう終了になったというわけ。

いらなくなった機能やサービスをビシビシ終了していく Google にしては、長く持った方なのかもしれません。名残を惜しみつつ、Blogger ユーザーとしては、新インターフェースにどんどん追加されていく今後の新機能に期待することにしましょう。

Blogger のモバイルテンプレートで動的ビューが使えるようになりました

「クリボウのプログラミングひとりごと」動的ビューをモバイルテンプレートに


Blogger のモバイルテンプレート(スマートフォン用のテンプレート)で、動的ビュー(ダイナミックビュー)のテンプレートを選択できるようになりました。

Blogger 管理画面「テンプレート > モバイルテンプレート」

これを有効にするには、Blogger 管理画面「テンプレート」ページの「モバイル」欄の「歯車マーク」をクリック、「携帯端末では現在のテンプレートのモバイルバージョンを表示する」項目を「はい。携帯端末でモバイルテンプレートを表示する。」にして、「モバイルテンプレートを選択」項目で、「動的ビュー」を選択し「保存」ボタンを押すだけ。

もとからブログの PC 版テンプレートに動的ビューテンプレートを指定していて、なおかつモバイルテンプレートを「デフォルト」にしている場合には、上の設定なしで自動的にモバイル版も動的ビューになるとのこと。また、試してみたところ PC 版は通常のレイアウトテンプレートで、モバイル版だけ動的ビューという設定もできるようです。

現在モバイルテンプレートとして使用できる動的ビューのスタイルは「クラシック」だけみたいなんですが、それでもブログの見せ方のバリエーションが広がってきたというのはやっぱりうれしいですね。

Blogger 関連のつぶやき 2012-08

Posted at: 2012-09-02 Label: 4

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', 'http://1.bp.blogspot.com/-Zphr2YJH_6w/T6ZZE4YeNBI/AAAAAAAACF0/Tyuj8hkOpdc/s1600/default_avatar.gif');
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']").attr('src', 'http://1.bp.blogspot.com/-eKbzORzVaBQ/T6ZXHmdgHqI/AAAAAAAACFs/rVy3T4gxojM/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 以外のブログサービスでもそうしているように、単語の区切りにはハイフン(-)を使うのがいいでしょう。ハイフンとアンダーバーで扱いを変えている検索エンジンもあるようですし(参考)、アンダーバーで単語を区切るのはあまりよくありません。

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

Blogger ブログで、矢印キーを使ってページ移動できるようにするカスタマイズ

Posted at: 2012-08-14 Label: 11



Blogger Buster に、矢印キーでページを移動する方法が載っていたのでご紹介します。今回参考にしたのは、こちらのページ。

thumbnailBlogger Buster: Page Navigation with Arrow Keys in Blogger  


ライブデモはこちら。矢印キーの右が「Older Post」、左が「Newer Post」に対応しているようです。


導入方法

※ 必ずテンプレートのバックアップをとってから行ってください。

1.Blogger 管理画面「テンプレート > HTML の編集 > 続行」 と進み、「ウィジェットのテンプレートを展開」にチェックを入れます。

2.次のようなコードを見つけます。ブラウザの検索機能で「blog-pager」を探すと見つけやすいと思います。
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

3.赤字部分を次の青字のように書き換えます。
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' id='newer' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' id='older' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

4.</body> タグの直前に以下のコードを挿入します。(元のコードだと「前の投稿」「次の投稿」がないページの場合にエラーが出ていたため、クリボウが少し改良を加えています。)
<script type='text/javascript'>
window.onload = function() {
  document.onkeyup = function(event) {
    var kGo = (!event) ? window.event : event;
    switch(kGo.keyCode) {
      case 37:
        var l = document.getElementById(&#39;newer&#39;);
        if (l) {
          window.location.href = l.href;
        }
        break;
      case 39:
        var l = document.getElementById(&#39;older&#39;);
        if (l) {
          window.location.href = l.href;
        }
        break;
    }
  }
}
</script>

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

これだけです。導入しても閲覧者がこの操作法を使ってくれるかどうか分からないんですが、新しいページ操作をブログに取り入れてみたいという人は試してみるといいんじゃないでしょうか。

Blogger から WordPress への移行時に、旧ページへのアクセスを新ページへとリダイレクトする方法

blogger to wordpress

いつも Blogger への移行方法ばかり書いてきたので、たまには Blogger からの移行についても、リンクを紹介しようと思います。

Blogger から WordPress へと引っ越してブログデータを移行した際に、おそらく問題となるのが古いページへのアクセスです。検索サイトからのアクセスや、せっかくリンクを張ってくれたブログからのアクセスなんかが、急になくなってしまうのはさみしいですもんね。

古いページから新しいページへと自動的にリダイレクトできれば問題ないんですが、Blogger と WordPress はページの URL の構成が異なるので、そうすんなりとはいきません。

こういったことでお困りで、.htaccess や PHP の設置なんかにそれほどハードルの高さを感じないという人は、これらのブログを参考にしてみてはいかがでしょうか?

thumbnailBloggerからWordpressへ移行の際のパーマリンク構造違いの引継を簡単に .htaccessに | PCあれこれ探索  


カスタムドメインの Blogger ブログから WordPress へ移行した場合に、旧ページへのアクセスを .htaccess で新ページへとリダイレクトしてくれます。


thumbnail[WP] Bloggerからのリダイレクト | 最近,気になったこと...  


上のリンク先の内容を踏まえた上で、blogspot.com(blogspot.jp)からの移行に対応します。旧ページへのアクセスを JavaScript で新サイトへ飛ばし、そこから .htaccess でリダイレクトされるという仕組みのようです。

旧ページに対する検索エンジンのインデックスはいずれ減少していくものと思いますが、Blogger 時代に得たリンクが、新しいブログサービスでもできるだけ生かせるといいですね。

Blogger 関連のつぶやき 2012-07

Posted at: 2012-08-04 Label: 9

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

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


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

今見ているブログが Blogger かどうか調べる 6 つの方法

Posted at: 2012-07-21 Label: 4

今日は翻訳が中心。参考にしたのはこちらです。


URL に blogpsot.com をふくむかどうか

URL に blogspot.com というドメインを含めば、間違いなく Blogger です。日本国内から Blogger ブログにアクセスすると blogspot.jp へリダイレクトされる(参考)ので、blogspot.jp かどうかというのも判断材料になるかと。

Blogger 特有の URL

一方、Blogger には「カスタムドメイン」という、所有しているドメインを blogspot サーバーのブログに適用できる仕組みがあるので(参考)、「blogspot ドメインでなかったら Blogger ではない」とは言い切れません。


Navbar があるかどうか

一般的な Blogger ブログには、ページ最上部に「Navbar」と呼ばれるバーが表示されます。このブログの最上部にあるのがそれです。

Blogger の Navbar

とはいえ、ブログデザイン上の都合でスタイルシートで Navbar を隠したり(参考)、Blogger 管理画面のオプションで Navbar をオフに(参考)している場合があるので、これも絶対とは言えません。


Blogger におなじみのテンプレートかどうか

現在 Blogger では、テンプレートデザイナーを使って、様々な背景やレイアウト、文字色やフォントを自分好みに組み合わせながらテンプレートを作れるようになっています(参考)。

ですが、それ以前からの Blogger ユーザーは、たいてい Minima のようなシンプルなテンプレートを好んで使っているそうです。ほんとかな?とちょっと疑ったんですが、そういえば「クリボウのプログラミングひとりごと」も Minima テンプレートを使っていました…。

Blogger Minima テンプレート


Blogger 特有の URL 構成かどうか

クリボウもこの方法でよく確かめています。カスタムドメイン機能で独自ドメインを Blogger ブログにかぶせているブログでも判別できます。

Blogger ブログの「投稿」の URL はこのようになっています。

http://www.example.com/2012/07/post-title.html

「ブログトップの URL」+ 「公開年」+「公開月」+「タイトル」+「.html」という構成になっていますね。もう一つ、Blogger の「ページ」(参考)の URL 構成はこんな感じ。

http://www.example.com/p/page-title.html

こちらは、ブログ URL とページタイトルとの間に /p/ が入るのが特徴です。

ちなみに、今回の話題とは直接関係がないですが、Blogger の投稿タイトルと URL 上のタイトルの関係について知りたい人は、こちらこちらを参考にしてください。


フィード URL に /feeds/posts/default が入っているかどうか

Blogger のフィードは基本的にこんなフォーマットになっています。

http://www.example.com/feeds/posts/default

基本的にと書いたのは、Blogger には同じく Google 運営の FeedBurner のフィードへアクセスをリダイレクトさせる機能がオプションで用意されていて(参考)、有効にしている場合はこれに当てはまらないから。

Blogger 標準のフィード使用の場合でも、人によってはいろんなパラメータを付加している場合があるので、そちらも注意が必要です(参考)。


ソースコードに generator が Blogger と書いてあるかどうか

Blogger ブログのソースコードを表示してみると、head 要素の中に、このようなタグがあるはずです。

<meta content='blogger' name='generator'/>

これは一目瞭然ですね。


…ということで、この調べ方を覚えて、よく見に行くブログに Blogger ブログがないか、一度探してみてはいかがでしょうか。

Blogger の Navbar がブログ管理画面からオフにできるようになりました

Posted at: 2012-07-19 Label: , 7

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


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

Blogger 管理画面「レイアウト」の「Navbar」ガジェット「編集」リンク

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

「Navbar の設定」画面、「オフ」の選択肢

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

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

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


Navbar の空白を詰める

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

body .navbar {
  height: 0;
}

というコードを

]]></b:skin>

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

Blogger のスレッド式コメント欄で、各コメントに番号をつける方法



以前、Blogger の埋め込み式コメント欄でコメントをスレッド表示にできるようになった件について、記事にしました。

今日は、そのスレッド式のコメント欄のコメントに番号を振る方法です。コメントスレッドのもとになるコメントには「1」「2」「3」という吹き出しがつき、それらのコメントへの返信は、「1.a」「1.b」「2.a」のように、アルファベットが付加されます。

参考にしたのはこちらのページ。


導入方法

その1 Blogger 管理画面「レイアウト」から「ガジェットを追加」リンクをクリック、「HTML / JavaScript ガジェット」を選択して、以下のコードを貼り付けます。

その2 面倒だという人は、下の「Add to Blogger」ボタンを押して、スクリプトを導入したいブログを選択したのち「ウィジェットを追加」ボタンを押すだけでもOKです。「その1」と同じことを自動でしてくれます。

<style type="text/css">
.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
font-size: 22px;
color: #555555;
padding-left:10px;
padding-top:3px;
background: url(http://3.bp.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/comment+bubble2.png) no-repeat;
margin-top:7px;
margin-left:10px;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}
</style>

コメントのたくさんつくブログでは、各コメントに言及するのに「3 にあるように…」とか「5.c のコメントで…」という風にコメントを指定することができるので、便利かもしれませんね。

Blogger でテキスト選択を禁止する方法

Posted at: 2012-07-16 Label: 5

人によっては、Blogger ブログの内容をコピーされたくない場合もあるかもしれません。そういう人にもってこいなのが、今回のスクリプト「Disable select-text script」。導入すると、ブログ上で文字列の選択ができなくなります。今回参考にしたのはこちらのブログ。

実際に導入してみたデモページがこちら。


導入方法

その1 Blogger 管理画面「レイアウト」から「ガジェットを追加」リンクをクリック、「HTML / JavaScript ガジェット」を選択して、以下のコードを貼り付けます。

その2 面倒だという人は、下の「Add to Blogger」ボタンを押して、スクリプトを導入したいブログを選択したのち「ウィジェットを追加」ボタンを押すだけでもOKです。「その1」と同じことを自動でしてくれます。

<script type="text/javascript">
/***********************************************
* Disable select-text script- c Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//form tags to omit in NS6+:
var omitformtags = ["input", "textarea", "select"];
omitformtags = omitformtags.join("|");
function disableselect(e) {
  if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1) {
    return false;
  }
}
function reEnable(){
  return true;
}
if (typeof document.onselectstart != "undefined") {
  document.onselectstart = new Function("return false");
} else {
  document.onmousedown = disableselect;
  document.onmouseup = reEnable;
}
</script>

フィードや Google ウェブ検索のキャッシュを拾われると結局コピーできちゃうわけなんですが、まあないよりはましかもしれません。特に全体にはお勧めしませんが、「引用も禁止!」というブログの運営方針の人だけ参考にしてもらえたら、と思います。

Internet Explorer でレイアウトが崩れる Blogger テンプレートは、IE 7 互換モードのタグを削除してみるといいかも

Posted at: 2012-07-07 Label: 4

IE 互換モードの削除

IE10でさえbloggerのレイアウトがぶっこわれるからIEオワタなと思ってたら、bloggerのほうで全IEについてIE7相当の表示に変換するコードがあったみたい。rgba()が透過無しに変換されてる時点で気づいてましたしー;
そうそう、クリボウも気になってたんです、このタグ。Blogger 管理画面「テンプレート > HTML の編集」と進むと、head 要素内の最初の方で出てきます。

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

Blogger ブログのテンプレートに標準的に入っているこのタグは、Internet Explorer(以下 IE) 8、IE 9、IE 10 でページを閲覧したときに、IE 7 で見た場合と同じように表示させるためのもの。

「IE 7 だと崩れなかったのに IE 8 以降ではレイアウトが崩れてしまう…」という場合には重宝する設定ですが、たいていはその逆で、HTML5 や CSS3 対応の新しいブラウザ向きに作られたテンプレートが、IE 7 互換モードでは正しく表示されなくなってしまいます。すでに Blogger 自体も Internet Explorer 7 のサポートを終了していますしね…。

だったらいっそのこと、この IE 7 互換モードのタグを削除してみてはどうだろう?と、このブログのテンプレートで試してみたのがこちら。

Blogger の Internet Explorer 7 互換性モード   Blogger の Internet Explorer 7 互換性モード

どちらも Windows 7、IE 9 で閲覧時のスクリーンショットです。左が標準で、右がタグ削除時。細かな違いですが、枠線のカーブや影が IE 7 互換モードでは無効になっていたのがわかると思います。

ということで、最新の IE、Chrome、Firefox で見比べたときに IE だけ表示が違う場合には、このタグを削除してみるといいかもしれません。影響が出るのは、IE 8、IE 9、IE 10 での閲覧時のみですし…。ぜひ一度お試しを。

ここまで書いてきて、こういう趣旨の記事をどこかで見たような…と探してみるとすぐに見つかりました。合わせてお読みください。


IE 互換モードの複数指定

で、IE 7 互換モードのタグを次のように変更する Tips が掲載されていました。

<meta content='IE=EmulateIE7; IE=EmulateIE9' http-equiv='X-UA-Compatible'/>

このタグを使うと、
IE9の時は、IE9モードで表示され、IE8の時はIE7モードで表示されます。
とのこと。HTML5 と CSS3 がジャンジャン使える IE 9 以降と、まだ使えない IE 8 両方のことを考えると、このタグに変更しておくのが今のところ一番いいのかもしれません。


更新情報:
  • 2012-07-08 … 「IE 互換モードの複数指定」の項目を追記しました。

Blogger 関連のつぶやき 2012-06

Label: 3

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

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


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

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

Blogger ブログの各エントリには、個別の URL(いわゆるパーマリンク)がついています。これまで、Blogger のパーマリンクは、投稿タイトル中のアルファベットを元にして、自動的に生成されてきました。この Blogger の自動 URL 付加の仕組みについては、以前に記事にしているので、興味のある人はご確認を。

そのパーマリンクが今回、投稿時に自由に URL を指定できるようになりました。ニュースを知ったのは、こちらのブログから。(@aka さんありがとうございます)

パーマリンクが自由に指定できるようになった Blogger in Draft の設定画面

上のスクリーンショットのように、Blogger in Draft からブログの新規投稿を行うと、投稿オプション設定に「パーマリンク」という欄が出てきます。

ここに blogger-custom-permalink と入れると、このブログの場合だと、http://www.kuribo.info/2012/07/blogger-custom-permalink.html という URL になります。

パーマリンクが自由に指定できるようになった Blogger in Draft の設定画面

これまで、投稿を公開し終えるまでその記事の URL が分からなかったことを思うと、前もって URL が分かるだけでもずいぶん進歩です。さらに URL を自由に指定できるとは!ブログ URL 中の単語自体 SEO に影響があると言われてすでに久しいですが、Google 傘下の Blogger もようやく SEO に本腰を入れてきたというところでしょうか。

このカスタムパーマリンク機能ですが、一応注意点をあげておくと、

  • パーマリンクのカスタマイズは Blogger ではなく、Blogger in Draft から。
  • URL で使えるのは半角英数とハイフン - とドット(ピリオド) .
  • ハイフンやドットは、ファイル名の先頭でも末尾でも使える。連続もOK。
  • 大文字と小文字は区別される。(ABC と abc は別)
  • 文字数制限なし。長すぎても公開はできる。アクセスすると 414 エラーが出る場合も。100 文字は OK、3000 文字は無理でした。(テスト
  • URL が指定できるのは、新規投稿時のみ。公開済み投稿の URL は変更できない。

…と、こんなところです。現在 Blogger in Draft にしかない機能のため、途中で仕様が変わる可能性も大いにあります。パーマリンクの指定は、無理せずこれまでの Blogger のきまりにしたがって、半角英小文字とハイフンのみ、39 文字以内にしておいた方が無難でしょうね。

関連:
追記(2012-07-18):

コメント欄で教えてもらいました。このカスタムパーマリンク機能が、Blogger in Draft を卒業して、Blogger 標準でも使えるようになりました。

Google+、Facebook、Twitter などのソーシャルボタンセットいろいろ

現在、ブログや投稿を Google +1 や Facebook「いいね」、Retweet してもらうためのボタンがいろいろと公開されています。Blogger 関連のつぶやき(ネタ帳とも)の中にも、この手のガジェットの話題が増えてきたように思うので、ここで一挙公開しようと思います。


ローソンガジェット

ローソンガジェット 6 色のテーマ

で、公開されているローソンの PR 用ガジェット。Twitter、Facebook、はてなブックマークのボタンがブログの左側に並びます。選択できる色のテーマは 6 つ。いろんな配色のブログに対応できるんじゃないでしょうか。

導入方法については、かずうさんがまとめてくれていますので、リンク先からご確認ください。


Awesome Floating Social Subscribing Widget

Awesome Floating Social Subscribing Widget

で、みつけたシンブルなボタン。ライブデモはこちら。(本来のデモページは広告がポップアップしてくるので、うちのテストページにしています。)

導入方法

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="http://3.bp.blogspot.com/-zl6GiZgl17w/TzNgd4y2VKI/AAAAAAAAAwQ/yl5f0NXI_Ng/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="Twitter の URL" title="" target="_blank"><img alt="Follow me on Twitter" src="http://1.bp.blogspot.com/-oZXlXaVZ0NQ/TzNgee09cVI/AAAAAAAAAwY/UVUjQ9LlLuk/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="ブログフィードの URL" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="http://4.bp.blogspot.com/-v8adyG27cBs/TzNgdRZJzaI/AAAAAAAAAwM/k3HJWWhY0jY/s1600/Rss.png" /></a>
<!-- Email -->
<a href="mailto:メールアドレス or コンタクトページの URL" title="Email me" target="_blank"><img alt="Email me" src="http://3.bp.blogspot.com/-6ZNwVUqx9eo/TzNhk_KXPvI/AAAAAAAAAwk/uxsSpqb3sdI/s1600/Mail.png" /></a>
</div>
<!-- End -->

コード中、色のついている文字列については、それぞれ自分のものに書き換えてください。

このガジェットのコードは HTML と CSS だけで書かれているので、画像を変えたりリンク先を変えたりといったカスタマイズがけっこう簡単にできると思います。

上掲のコード自体もすでにカスタマイズされたもので、オリジナルはこちらのようです(デモはこちら)。不思議な生き物が見えますね…。


Animated Sassy Bookmarking Gadget

Animated Sassy Bookmarking Gadget

で見つけた、ピョンと出てきて、シュッと引っ込むソーシャルボタンたち。ライブデモはこちら。動きがとても楽しいかと。

導入方法

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","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</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

Zenback

Twitter 経由で Kamimura さんにこれを愛用していると教えてもらいました。「関連するみんなの記事」や Zenback 関連のつぶやきが入ってしまうものの、たしかにこれでもソーシャルボタンをまとめることができますね。

Blogger ブログへの Zenback の導入については、romberg さんのページが詳しいです。


まだまだあった気がしますが、クリボウが今思い出せたのはこれだけ。おすすめのものがほかにもあれば、教えてもらえるとうれしいです。

Blogger 公式でも一応「+1 ボタン」ガジェットや「Google+ バッジ」ガジェットが用意されていますが、ほかのサービスのボタンとの統一感を出すのが難しいですね…。上記のソーシャルボタン詰め合わせガジェットを上手に使えば、ブログデザインもきっとよくなるはず。ということで、ぜひ一度お試しを。


<更新>

2012-06-25:  Zenback の項目を追加しました。

テンプレート変更しました

Posted at: 2012-06-17 Label: 12

いつの間にか、このブログも読み込みに随分時間がかかるようになってしまっていたので、貼り付けているガジェットを精選しないといけないかな?と思っていたんですが、ならばいっそのこと!と一念発起して、テンプレートまるごと変更してみました。

クリボウの Blogger Tips テンプレート変更

左が古いテンプレートで、右が新しいのです。
シンプルで軽いものをという基準で探していたところ、
Blogger Templates で見つけたのが、このテンプレート。

ちょこちょこと自分の好みに合うようにカスタマイズしてみましたが、どうでしょうか?
クリボウ的には、読み込みが速くなったのはもとより、投稿本文のエリアが広くなったのが一番うれしいです。

みなさんも、ゴテゴテと重くなってしまったテンプレートを、夏に向けて少し模様替えしてみてはいかがでしょうか。

Blogger 関連のつぶやき 2012-05

Posted at: 2012-06-02 Label: 8

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

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

先月は、他のブログサービスからの引っ越しネタが多かったですね。別途こちらにもまとめているので、参考してもらえたらと思います。

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

© 2005-2014 Kuribo. Powered by Blogger.