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 互換モードのタグを削除してみてはどうだろう？と、このブログのテンプレートで試してみたのがこちら。
どちらも 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 互換モードの複数指定」の項目を追記しました。
Google+ ページ「クリボウの Blogger Tips」および、Facebook ページ「クリボウの Blogger Tips」で流した先月の Blogger 関連のつぶやきを、ここにまとめておきます。
リアルタイムで読みたい！という人は、上記リンク先からぜひ、サークルに追加したり「いいね！」したりしてください。
- クリボウのプログラミングひとりごと: Blogger でサイトマップを表示するツールを、投稿が 500 件以上あるブログにも対応させてみた
コメントで不具合の報告があったので、コードを修正。「リンクを新しいウィンドウで開く」「日付を表示する」オプションも追加。 - Twitter / worldwidewaddle: デフォルトテンプレートのBloggerでGoogle Adsense申請してみたら ...
Blogger ブログで AdSense 申請したら「操作性の低いサイト構成」として断られたと。…えっ!? - Awesome Floating Social Subscribing Widget With Cool Hover Effect For Blogger ~ Helper Blogger
漂うソーシャルボタンたち。シンプルでなかなかいい感じ。デモはこちら。（記事） - Bloggerのテンプレートをモバイル端末対応にしてデザインの自由度を格段にアップさせる方法 : たき備忘録
モバイルテンプレートのカスタマイズあれこれ。 - ブログの引越し
FC2 ブログからの引っ越し事例。この前公開した、エクスポートデータの日付変換ツール、ちゃんと動いているみたいでよかった。 - GoogleのブログシステムBloggerとFeedBurnerの連携が便利:はなまるチェック！
Blogger と FeedBurner の連携について、ためになるあれこれ。 - IFTTT / Blogger で特定のラベルをつけて投稿すると、Buffer 経由で Twitter に自動定刻ツイート
Blogger で特定ラベルをつけると Twitter に自動ツイートしてくれる、ifttt レシピ。 - 結構簡単にできるBloggerテンプレートのレスポンシブデザイン化 : たき備忘録
Blogger で「ディスプレイ解像度によってデザインを変化させ、様々なデバイスに対応する」方法。 - Blogger にスクロールに対応して動くUIをJavaScript(jQuery)等で実装してみた +Plus One World
スクロールしてもついてくるアレとか、スクロールしきったら出てくるアレとか。 - くま同盟コンピュータLab: Bloggerの「登録: 投稿 (Atom)」を表示されないようにしたい その2
「登録: 投稿 (Atom)」の消し方２。このテキスト（「登録: 投稿 (Atom)」）だと、フィードへのリンクってわかりにくいですもんね…。 - airyplace: （質問）ブログサービスに、なぜbloggerを選んだか？
これ、いろんな人に聞いてみたいかも。僕は選んだというより、IE に入れた Google バーをいじっているうちに、いつの間にか Blogger ブログができてしまったから…だったり。 - Known Issues for Blogger: bX-1io90b, bX-7ubjdv
AVG Search toolbar を入れている場合に JavaScript の競合で不具合が起きるとの報告。 - くま同盟コンピュータLab: Bloggerのラベル表示（カテゴリ表示）の時に「ラベル hogehoge の投稿を表示しています。 すべての投稿を表示」を表示されないようにしたい
ラベルページで「ラベル ○○ の投稿を表示しています。 すべての投稿を表示」を消す方法。 - BloggerでZenback関連記事ついに表示！色々リニューアルされました | ひきこもりのアウトドア
Zenback が blogspot.jp ドメインの投稿にも完全に対応した模様。
→ Zenback 運営に twitter で聞いてみたところ、Zenback は、blogspot.jp アカウントに改めても、あくまで blogspot.com 対象にデータを集める仕様を変えていないそうです。僕の勘違い…。 - Bloggerのヘッダー（header）をカスタマイズする方法 - AIUEO Lab
ヘッダー周りのガジェットの調整方法。 - Add an Animated Social Sharing Widget with Hover on Blogger
ピョーンと出てきて、シュッと引っ込むソーシャルガジェット。動きが楽しい！デモはこちらの左下。（記事） - [blogger]サイズ自由のサムネイル表示で、ランダムに記事を表示可能なブログパーツ！『複眼RSS』 - sunabox
サムネイルつきで記事へのリンクをランダムに表示してくれる「複眼 RSS」ガジェットの導入方法。 - Blogger API v3 | Blogger Developers Network
新しくなった Blogger API だと、JSON データを POST するだけで記事が投稿できるとのこと。OAuth2 認証が必要とはいえ、かなり便利そう。 - [blogger]消せなくなったガジェットを削除する方法！海外のテンプレートをテストするときには必須です。 - sunabox
旧ダッシュボードに戻すと消せるという話。旧ダッシュボードが残っている今のうちに、いろいろ新しいテンプレートを試してみるのがいいかも。 - Bloggerブログからエクスポートした投稿データXMLファイルをインポートするときの注意点 ≫ Google BloggerブログHacks Tips Tweaks
ブログエクスポート時に、「追記の区切り（続きを読むの区切り）」が別のものに変換されているそうな。インポート時には要注意。 - 20120624-123522-Blogger.jpg
なに、このビリビリの Blogger ロゴ…。初めて見た。 - The Real Blogger Status: Norton Safe Web Is Claiming That All BlogSpot Blogs Are Fraudulent
Norton が Blogger ブログを既知の詐欺サイトとして遮断してしまう不具合。日本でも報告あり。ライブアップデートすれば解消されるとか。
Blogger ブログの各エントリには、個別の URL（いわゆるパーマリンク）がついています。これまで、Blogger のパーマリンクは、投稿タイトル中のアルファベットを元にして、自動的に生成されてきました。この Blogger の自動 URL 付加の仕組みについては、以前に記事にしているので、興味のある人はご確認を。
上のスクリーンショットのように、Blogger in Draft からブログの新規投稿を行うと、投稿オプション設定に「パーマリンク」という欄が出てきます。
ここに
blogger-custom-permalink と入れると、このブログの場合だと、http://www.kuribo.info/2012/07/blogger-custom-permalink.html という URL になります。
これまで、投稿を公開し終えるまでその記事の URL が分からなかったことを思うと、前もって URL が分かるだけでもずいぶん進歩です。さらに URL を自由に指定できるとは！ブログ URL 中の単語自体 SEO に影響があると言われてすでに久しいですが、Google 傘下の Blogger もようやく SEO に本腰を入れてきたというところでしょうか。
このカスタムパーマリンク機能ですが、一応注意点をあげておくと、
- パーマリンクのカスタマイズは Blogger ではなく、Blogger in Draft から。
- URL で使えるのは半角英数とハイフン
-とドット（ピリオド）.。 - ハイフンやドットは、ファイル名の先頭でも末尾でも使える。連続もＯＫ。
- 大文字と小文字は区別される。（ABC と abc は別）
- 文字数制限なし。長すぎても公開はできる。アクセスすると 414 エラーが出る場合も。100 文字は OK、3000 文字は無理でした。（テスト）
- URL が指定できるのは、新規投稿時のみ。公開済み投稿の URL は変更できない。
…と、こんなところです。現在 Blogger in Draft にしかない機能のため、途中で仕様が変わる可能性も大いにあります。パーマリンクの指定は、無理せずこれまでの Blogger のきまりにしたがって、半角英小文字とハイフンのみ、39 文字以内にしておいた方が無難でしょうね。
関連：
追記（2012-07-18）：
コメント欄で教えてもらいました。このカスタムパーマリンク機能が、Blogger in Draft を卒業して、Blogger 標準でも使えるようになりました。
