WordPress 新テーマ作成、HTML5 & CSS3 に移行

久しぶりの更新になっちゃいました。
このブログ、WordPress で作ってるんですが、それのテーマ(cf. Wikipedia)を作ってました。作ってるあいだはなかなか記事を書く気になれず><。
ぼちぼち再開しますー。

さて大事なお知らせから。
今回から、サポートブラウザから Internet Explorer 6 と 7 を外しました。やはり今でもそれらを使っておられる方は、敢えてそうしているのではなく知らないからだと思うんですね。そもそも「ぶらうざ? それってなぁに?」というような。別にそれは悪いことでも恥ずべきことでもないのでいいんです。問題は、知らずに古いブラウザを使っていることにより、様々なリスクに晒されているということです。
例えば現地の状況に無知な旅行者が、現地住民でも普段行かないような危ないところに行こうとしていたら、教えてあげますよね? そこは危ないです、行かない方がいいですよと。もしジャーナリストのようなプロであれば「気をつけてくださいね」と言うでしょう。
それはやはり知っている人が教えてあげるべき事だと思うんです。
そういう目的もあり、敢えてここで Internet Explorer 6 と 7 をサポートせず、注意喚起のメッセージを表示させることにより、一ブログとして「更新した方がいいですよ」と言うことにしました。べ、別にめんどくさくなったわけじゃないんだからねッ!!

あと今のところ Internet Explorer 8 でもちょっと表示が不安定です。ずれたりすることがあります。原因がいまいち分からず、分かれば対応したいですが、少しずれるだけでクリティカルな問題ではないのでそのままにするかもしれません。次期 IE の 9 ではほとんど OK です。
その他、Firefox や WebKit 系(Google Chrome、Safari)、Opera では問題ないです。
少し修正するところがあるので、折を見て修正していきます。もしお気づきの点があれば教えてください。

思えば2009年9月の時点で

全体の15%くらいがIE6ユーザということになります。これが5%を切ったら実際にサポート外そうかと思っていますが、あと2年くらいは難しいかもしれないですね。5%じゃ厳しいかなあ、3%切ったら、でしょうか。

ブログ変更点まとめ – September 27th, 2009

と書いていました。2年目に入っていますが、私のサイトでは実際に IE6 と 7 それぞれ 5% を切り、合わせても 10% 未満となっています。3% になるのを待たずに決行しちゃいました(笑)。

あとは箇条書きにて。

◆全体的に見やすく
フォントの大きさを少し大きくしました。本ブログは全年齢対象版です(キリッ
もしかしたら今後フォントサイズ変更のオプションを用意するかも。

◆HTML5(cf. Wikipedia) に移行
ドキュメントタイプを、XHTML から HTML5 に。ずいぶんすっきりしました。
HTML5 についてはこちらの記事なども。
HTML5でサイトりにゅ~ある! – April 19th, 2010

◆一部に CSS3 を使用
このブログ、ボックス(白とかピンク色の)の四隅が丸くなっていると思います。これは丸くなった画像を用意しているのではなく、border-radius というプロパティを使って実現させています。
さきほど IE8 で不安定といったのは、IE8 以下にはこれに対応させるため手を加えていて(後述)、それが原因っぽいです、たぶん…。

◆Twitter、Facebook と連携
Tweet ボタンと Facebook の Like ボタンを設置しました。YOU! 押しちゃいなYO!

参考にしたサイトなど。ありがとうございます!

CSS3リファレンス – HTMLクイックリファレンス
分かりやすくまとめられています。

CSS3 角丸を表現する border-radius – CSS Lecture
非常に分かりやすく解説してくださっています。IE に実装させるための border-radius.htc の紹介が大変参考になりました。

WordPressで角丸 – CamCam
border-radius.htc を用意したにも関わらず動かないと思ったら WordPress では絶対パスで指定する必要ががが。
CSS ファイル内だと WordPress のテンプレートタグ、<?php bloginfo('template_url'); ?> などが使えず不便なので header.php 内で指定することに。私はとりあえずこのようにしています。

[xml highlight=”3,4,5,6″]
<!–[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<style>
pre, header, nav#page, .postbox, .commentbox, .post-content blockquote, h2#archv, .commentbox h2, ul.each-comment li.each-comment-content, .sidebox
{ border-radius:10px; behavior:url(<?php bloginfo(‘template_url’); ?>/js/border-radius-for-ie/border-radius.htc); }
</style>
<![endif]–>
[/xml]

ざっくりとした紹介になってしまいましたが、それぞれについてはまた機会があったら備忘録的に記事にするかも。

今回のテーマについてですが、なかなか気に入っています。全体的にざらっとした質感を出したかったんです。紙のぬくもりというか、「つるつるしてない」感じに。あと風景を取り入れたかった。「このサイトについて」のページでは試しに大きな写真を「ばん!」と出しましたがなかなかインパクトあっていいですね。

  • Posted at 13:25 on Jan 21, 2011
  • | No comments yet

Response

  • 現在、この投稿へのコメント/トラックバックは受け付けていません。