IE9でFC2blog閲覧時に角丸(border-radius)を適用させる

FC2blogではCSS3のborder-radiusなどを設定してもIE9では角丸が適用さません。その場合の対策です。

結論:<head>に<meta>要素を1つ追加する

  1. 次のmeta要素を<head>のすぐ下に追加すれば、IE9で閲覧時でもCSS3などが適用されます。たった一行です。コピペでOKです。

    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    

原因:FC2blogの仕様

  1. FC2blogでは、IE9で閲覧していても「IE7で表示できる程度」の機能までしか有効にならず、IE7で閲覧しているような表示になってしまいます。

  2. この現象はそれなりに有名なようですが、当ブログ管理人はIE9を利用できる環境がないため、今頃(2012年04月25日)気付いた次第です。次のページの説明が非常に丁寧で参考になります。

共有テンプレートを修正

  1. 当ブログの作者が作成したテンプレートで、現在公開しているものは修正済みです。

  2. 上記修正日時前に共有テンプレートをダウンロードされた方は、次のどちらかの対応をお願いします。お手数をおかけしますが、よろしくお願いします。

    • 修正後のテンプレートをダウンロードしていただく。
    • HTMLの<head>のすぐ下に、上記コードを手動で追加していただく。

修正せずにテンプレートを使えるか

  1. 上記meta要素を追加したり、修正後のテンプレートをダウンロードしたりしなくても、レイアウトが大きく崩れることはありません。しかし、IE9でブログが閲覧された際に角丸などのCSS3が適用されないままになります。

  2. 角丸やボックスシャドウなどのCSS3の機能に魅力を感じない場合は修正しなくてもいいかもしれません。しかし、そうでないのなら修正していただいた方がいいかと思います。

  3. 上述の説明では充分でないかも知れませんので、修正方法などで疑問などありましたらコメント欄からご連絡下さい。できる限り対応いたします。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク

コメント

No title
初めまして、テンプレート使わせていただいてます。
初歩的な質問で申し訳ないのですが 
テンプレート背景の色を変えたいのですがCSSの/*背景色*/の所のどの欄をかえればよろしいでしょうか?bodyを変えてみたんですが反映されないので・・
あと記事の文字の大きさも変えたいのですがそこのところもあわせて教えていただけると幸いです。
お忙しいとは思いますが、時間のあるときでよいのでよろしくお願いします。
No title
お世話になってます。テンプレート3カラムを使わせていただいてます。
さっそく質問したいのですが
記事の文字の大きさを変えたいのですがどこをいじればいいのかわかりません
カラムや続きを読むなどは文字の大きさを変えられたのですが本文だけわかりません
あと、ページ上部のナビゲーションの一つ一つを記事カテゴリにする方法など教えてもらえたら幸いです
お忙しいとは思いますがよろしくお願いします
カスタムはまったくの素人なので初歩時な質問かもしれませんが
Re: No title
はじめまして。
テンプレートのご利用およびコメントありがとうございます。

ご質問いただきました件ですが、コメント欄で返答するには長くなりましたので、記事を3つ書きました。
次のURLのページをご覧いただきたいです。

http://customtemplate.blog112.fc2.com/blog-entry-13.html
http://customtemplate.blog112.fc2.com/blog-entry-12.html
http://customtemplate.blog112.fc2.com/blog-entry-11.html

返答が的を射ていない場合や不十分な場合など、遠慮なくご指摘ください。
可能な限り対応いたします。
よろしくお願いします。
No title
迅速な返答ありがとうございます
記事を参考にやってみますね
No title
またまた質問すみません
文字は無事にサイズ変更できました ありがとうございます

背景色のところで聞きたいのですが
背景色変えるのはわかったのですが 全体的に統一した色で各記事ブロックだけ白にしたいのですが、/*記事部分*/のところで白にすると縦すべて白になってしまうのですが各記事ブロックだけ白にすることは可能ですか?
よろしくお願いします
Re: No title
ご丁寧にご連絡ありがとうございます。
また、コメントありがとうございます。

個別記事部分の背景色に関しまして次のページに追記しました。
http://customtemplate.blog112.fc2.com/blog-entry-11.html

返答が的を射ていない場合や不十分な場合など、遠慮なくご指摘ください。
グローバルナビゲーションの部分に関しましても、
ご希望のカスタム方法とは異なる場合は遠慮なくご連絡下さい。
可能な限り対応いたします。

よろしくお願いします。
No title
迅速な回答ありがとうございます
悩んでいたところも問題なくできました ありがとうございます

ブログを始めたばかりでなかなか気にいったテンプレートがなくそしてカスタムの仕方もよくわからなかったのですが
このテンプレートに出会ってそして初歩的な質問にもすぐに答えてくれてとても助かってます
また何かわからないところがあった時はよろしくお願いします
Re: No title
ご連絡ありがとうございます。
具体的かつ的確にご質問いただけましたので、
返答がすぐにできました。

テンプレートをご利用いただいている方にとって
かんたんにカスタムできるように改良していきます。

いつでもお気軽にコメントください。
今後ともどうぞよろしくお願いします。
No title
お世話になってます
またお聞きしたいのですが、サイドバーの背後で広告を設定したいのですが
デフォルトだと下部に表示されるのですがサイドバートップ、または2番目3番目などに表示するにはどうすればよいですか?
質問ばかりで申し訳ないのですがよろしくお願いします
Re: No title
お世話になります。
コメントありがとうございます。

ご質問いただきました件ですが、
「サイドバーの上下にプラグイン以外の項目(広告など)を追加する方法についてお尋ねである」
と解釈しました。

http://customtemplate.blog112.fc2.com/blog-entry-14.html

上記ページにて図解しましたので、ご確認いただきたいです。

ご希望される内容とは異なるようでしたら、遠慮なくその旨ご連絡下さい。
また、他にも疑問点などありましたらいつでもコメントください。
可能な限り対応いたします。

よろしくお願いします。
No title
迅速な回答ありがとうございます。
貼る場所はわかったのですが、プラグインみたいな枠なしでそのまま貼りたいのですが そのままはってしまうとその下のプラグインとくっついてしまいます。
縦に並ぶプラグインと同じような上下のスペースを広告の下にも作りたいのですがどうすればよろしいでしょうか
よろしくお願いします。
Re: No title
お世話になります。

HTMLを確認していない以上、あくまでも憶測による返答になりますことご了承願います。

>縦に並ぶプラグインと同じような上下のスペースを広告の下にも作りたいのですがどうすればよろしいでしょうか

挿入された広告のタグに次のスタイルを追加してみてください。
20pxの20を増減させることによりスペースを調整できます。

style="margin-bottom:20px;"

スペースができないようでしたら、
HTMLがどのような構造になっているのかをご連絡いただけますと、
適切に返答できるのではないかと思います。
遠慮なくご連絡下さい。

よろしくお願いします。
No title
素早い返答ありがとうございます。
style="margin-bottom:20px;" を追加したらスペースがちゃんとでき
よいレイアウトになりました。
おかげさまでブログサイトが充実してきました^^

サイトのURL貼っておきましたのでおかしい所があれば指摘していただけると
幸いです
いつもありがとうございます。
Re: No title
お世話になります。
レイアウト調整が無事にできましてよかったです。

> サイトのURL貼っておきましたのでおかしい所があれば指摘していただけると
> 幸いです

サイトを少しだけですが拝見させていただきました。
内容に関してはすばらしいの一言につきますが、
述べておいたほうがいいかもしれないと思うことが
アドセンスについてありました。

標準広告ユニットは通常、1ページあたり3つまでというルールがあります。
http://adsense-ja.blogspot.jp/2008/10/adsense-123.html
HOMEページやカテゴリーページでは、
個別記事の「続きを読む」の下のアドセンスの一部が表示されていないのはそういう理由です。

意図してこの状態にされておられるのなら何も言うことはありませんが、
この状況は想定外のようでしたらアドセンスコードの記載箇所を見なおした方がいいかもしれません。

以上が当方の認識ですが、間違っているとか情報が古いとかありましたら
逆にご指摘いただけますと幸いです。

またなにかありましたら、お気軽にコメントください。
可能な限り対応いたします。
よろしくお願いします。
No title
お世話になってます。
ご指摘の件見直してみました。
続きを読むをクッリクした後の事を忘れてました^^;
まだ始めたばかりなのでサイドのプラグインの内容がまだまだ充実しておらず、 アドセンスでスペースを埋めていこうと・・・
ご指摘いただいてありがとうございます。
 

また何かわからないことがあった時はよろしくお願いします。
Re: No title
お世話になります。
ご連絡ありがとうございます。

またなにかありましたら、お気軽にコメントください。
可能な限り対応いたします。
よろしくお願いします。

コメントの投稿

非公開コメント

(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)