Home > html5

html5 Archive

[PR]

2024-11-21 (Thu)

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments (Close):
TrackBack (Close):

wp.Vicunaをなんちゃってhtml5化してみる（断念）

2009-12-06 (Sun)
html5

HTML5勉強会＠Operaでダニエルさんのlive codingを見て、
僕もやりたくなったので、wp.Vicunaを（本当にちょっとだけ）いじってみました。

html5.bornneet.com

・・・はい、微妙です。
まぁせっかくなのでこれから作っていくであろう、
html5系の作品の公開に使おうと思います。

というわけで、以下作業ログ。

0. 準備

まず、ローカルに環境を整えます。
（さすがに公開サーバ上でテンプレを弄ってくわけにはいかんので）

で、面倒なのでapache friends - xampp for macos xを使用して
環境構築は一瞬で終わらせました^^

それでは作業開始です。

1. DOCTYPEを変更

# diff wp.vicuna/header.php wp.vicuna5/header.php 
1,3c1
< <?php echo '<?xml version="1.0" encoding="'. get_bloginfo('charset') . '" ?>'; ?>
< 
< <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
---
> <!DOCTYPE html>

The W3C Markup Validation Serviceでチェックしてみると、もうhtml5です。
（元はxhtml 1.0S Strict）

ネタとしてはこれだけでもいいかもですが、一応できるところまでやってみます。

2. <head>をスマートに

11c9
< <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $lang; ?>" xml:lang="<?php echo $lang; ?>">
---
> <html lang="<?php echo $lang; ?>">
13,14c11
< 	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
< 	<meta http-equiv="Content-Script-Type" content="text/javascript" />
---
> 	<meta charset="<?php bloginfo('charset'); ?>" />
22c19
< 	<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
---
> 	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
28c25
< 	<script type="text/javascript" charset="utf-8" src="<?php echo get_vicuna_javascript_uri() ?>"></script>
---
> 	<script src="<?php echo get_vicuna_javascript_uri() ?>"></script>

3. <header>

こいつらを全部置換↓（preview以下はめんどいので除外）

# grep 'div id="header"' wp.vicuna5/*
wp.vicuna5/404.php:<div id="header">
wp.vicuna5/archive.php:<div id="header">
wp.vicuna5/category.php:<div id="header">
wp.vicuna5/index.php:<div id="header">
wp.vicuna5/page.php:<div id="header">
wp.vicuna5/search.php:<div id="header">
wp.vicuna5/single.php:<div id="header">
wp.vicuna5/tag.php:<div id="header">

# grep '#header' wp.vicuna5/* wp.vicuna5/*/*
wp.vicuna5/footer.php:	<p class="return"><a href="#header"><?php _e('Return to page top'); ?></a></p>
※ 扱いに困ったのでとりあえず#で逃げた
wp.vicuna/style-vega/core.css:  div#header
wp.vicuna/style-vega/core.css:div#header {
wp.vicuna/style-vega/core.css:div#header p.siteName {
wp.vicuna/style-vega/core.css:div#header p.siteName a {
wp.vicuna/style-vega/core.css:div#header p.siteName a:hover {
wp.vicuna/style-vega/core.css:div#header p.description {
wp.vicuna/style-vega/layouts.css:div#header,
wp.vicuna/style-vega/layouts.css:body.eye-h div#header {
wp.vicuna/style-vega/layouts.css:body.eye-h div#header p.siteName {
wp.vicuna/style-vega/layouts.css:body.eye-h div#header p.description {
wp.vicuna/style-vega/layouts.css:body.eye-hb div#header {
wp.vicuna/style-vega/layouts.css:body.eye-hb div#header p.siteName {
wp.vicuna/style-vega/layouts.css:body.eye-hb div#header p.siteName a {
wp.vicuna/style-vega/layouts.css:body.eye-hb div#header p.description {
wp.vicuna/style-vega/layouts.css:body.gt div#header {
wp.vicuna/style-vega/layouts.css:body.al div#header,
wp.vicuna/style-vega/layouts.css:body.f800 div#header,
wp.vicuna/style-vega/layouts.css:body.f850 div#header,
wp.vicuna/style-vega/layouts.css:body.f900 div#header,
wp.vicuna/style-vega/layouts.css:body.f950 div#header,
wp.vicuna/style-vega/layouts.css:body.f1000 div#header,

知らない要素はinline描画される可能性があるので、block化
/*
 http://html5doctor.com/html-5-reset-stylesheet/
 http://people.opera.com/danield/presentations/html5/html5-markup.pdf
 */
article, aside, dialog, details, figure,
footer, header, hgroup, nav, section, time {
	display:block;
}

やばい、思ったよりしんどい。
でもなんとか見た目は崩れずに成功。

4. <footer>

やることはheaderと同じ。
# grep 'div id="footer"' wp.vicuna5/*
wp.vicuna5/footer.php:<div id="footer">
t-no-macbook:themes root# grep '#footer' wp.vicuna5/* wp.vicuna5/*/*
wp.vicuna5/style-vega/core.css:  div#footer
wp.vicuna5/style-vega/core.css:div#footer {
wp.vicuna5/style-vega/core.css:div#footer a {
※ 文字色が変わっちゃったので!importantで逃げた
wp.vicuna5/style-vega/core.css:div#footer a:hover {
wp.vicuna5/style-vega/core.css:div#footer ul {
wp.vicuna5/style-vega/core.css:div#footer ul li {
wp.vicuna5/style-vega/core.css:div#footer address {
wp.vicuna5/style-vega/layouts.css:div#footer {
wp.vicuna5/style-vega/layouts.css:body.al div#footer {
wp.vicuna5/style-vega/layouts.css:body.f800 div#footer {
wp.vicuna5/style-vega/layouts.css:body.f850 div#footer {
wp.vicuna5/style-vega/layouts.css:body.f900 div#footer {
wp.vicuna5/style-vega/layouts.css:body.f950 div#footer {
wp.vicuna5/style-vega/layouts.css:body.f1000 div#footer {

※ IE対応

header.phpにhtml5.jsを仕込めばok。

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

中身はこんなの。
（IEは知らない要素のスタイル指定を無視するので、
事前にcreateElementして知ってる要素として扱わせる）
// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()