HTML5: テーマOrigamiをインストールした

中々無い長期休み(の一寸前の3連休)なのでテーマを変更する事にしました。Origamiをベースに手を加える事にしましたよ。

さて、ウィジェットあたりは適当に配置してバリデータチェックをしたら早速出ました。

W3C Validator Output #1

どうやらリンクタイプとして category が使えないという事で叱られたようです。 Quick fix for rel=”category tag” in WordPress | Whitney Krape を参考にして function.php の最後に追加しました。しかし、これ取っちゃって良いのかな(若干不安)

add_filter( 'the_category', 'add_nofollow_cat' );
function add_nofollow_cat( $text ) {
	$text = str_replace('rel="category"', "", $text); return $text;
}

そして次はこのエラー。
続きを読む HTML5: テーマOrigamiをインストールした

W3Clove: サイトまるっと文法チェック

Base URLを指定するとそこから一連のURLに対して W3C Markup Validation を適用してくれる中継サイト。なので、MIMEタイプをエージェントチェックで判別して見せている場合には HTTP_USER_AGENT の値が W3C_Validator の場合に application/xhtml+xml で出力してあげれば出力タイプでの警告なしに結果を受け取る事ができます。

因みにこのサイトでは header.php の先頭にスクリプトを書いてMIMEタイプを決定しています。

<?php
$ACCEPT = $_SERVER['HTTP_ACCEPT'];
$UAGENT = $_SERVER['HTTP_USER_AGENT'];
if (eregi("MSIE", $UAGENT)) {
    header ("Content-Type: text/html; charset=UTF-8");
} elseif (eregi("(Another_HTML-lint)|(W3C_Validator)", $UAGENT)) {
    header ("Content-Type: application/xhtml+xml; charset=UTF-8");
} elseif (ereg("application/xhtml+xml",$ACCEPT)) {
    header ("Content-Type: application/xhtml+xml; charset=UTF-8");
} else {
  header ("Content-Type: text/html; charset=UTF-8");
}
echo "<?xml version="1.0" encoding="";
echo bloginfo('charset') . ""?>n";
?>

それで W3Clove を通したら問題ありませんでした。良かった良かった。

via
W3Clove :: site-wide markup validation tool
The W3C Markup Validation Service

RSS広告削除社: フィード掲載広告除外サービス

RSSリーダーでフィードを集めて読んでいると広告が結構な頻度で差し込まれています。1つのフィードに1件か2件なら広告としての効果もあると思いますが、あまり頻繁に差し込まれると単に煩わしいだけのモノになってしまいますよね。そんなわけで「フィード 広告 削除」のキーワードで検索したところ一発で引っかかったのがこのサービスでした。

広告を除外したいフィードのURLを貼り付けるだけで作業は完了。提供URLからフィードを拾うと広告が除外されています。但し、サイトに掲載されているフィルタに限定されますので、それ以外の条件で広告が掲載されている場合には製作サイドに連絡の必要があるようです。

フィード配布元にももう少し工夫をしてもらえると、こういうサービスを使わなくても良くなるのですがね。

via
RSS広告を削除ならRSS広告削除社

CSS3 Validatorの在り処

W3CのCSS Validatorをそのまま使うとCSS 2.1までの検証しかしてくれません。CSS 3の検証を行う場合の方法を How to Link to the W3C CSS3 Validation Page | Bryan Hadaway's Web + Tech Blog で知りました。

実際にコードまで書いてくれているので付け足す事は何もありません。

So, as a compromise, instead of linking our pages to the referrer link, we’ll have to link our stylesheet to the CSS3 Validator like so:

<a href=”http://jigsaw.w3.org/css-validator/validator?uri=http://www.website.com/css/style.css&profile=css3″>Valid CSS</a>

これで検証できます。参照元記事のエントリが2010年ですから既に2年近く放置状態。早くW3C側で整備して欲しいですね。

via
W3C CSS 検証サービス

Add Litebox Pluginによる文法エラーの解消

何で今まで気がつかなかったんだろうという場所で文法エラーが発生している事に気がつきました。

Line 80, Column 103: character “[” is not allowed in the value of attribute “rel”

…e_2011-12-24-6-7-36.png” rel=”lightbox[2481]”><img src=”http://cefa.sakura.ne.…

It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.

何とかならないモノかと調べていたところ、Lightbox 2 and XHTML 1.1 validation | simon.schönbeck.dkの記事にたどり着きました。 “[” は”_” で置き換えられそうな雰囲気なので、Lightbox Plugin の add-lightbox/lightbox-auto.php を触ります。

function addlightboxrel_replace ($content)
{   global $post;
        $pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png)('|")(.*?)>(.*?)</a>/i";
    $replacement = '<a$1href=$2$3.$4$5 rel="lightbox['.$post->ID.']"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

ここの場所を次のように書き換えてみます。

function addlightboxrel_replace ($content)
{   global $post;
        $pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png)('|")(.*?)>(.*?)</a>/i";
    $replacement = '<a$1href=$2$3.$4$5 rel="lightbox_'.$post->ID.'"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

これで解決できました。

序にDTDの指定について警告が出ていたので修正。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">

やはり偶にはValidatorを実行しないといけないなあ…と反省のクリスマスイヴでした。
続きを読む Add Litebox Pluginによる文法エラーの解消

CSS: application/xhtml+xml表示で空白ができる件

application/xhtml+xmlに配信MIMEタイプを切り替えたら、WPの標準スタイルでの表示時にトップに空白ができてしまいました。生成されたXHTMLに変な空白ができている訳でもないし、CSSも特に変なところは無いし…ということで検索したらヒットしました。

via
HashiMのたわごと(?) : XML-Mediaについてごにょっと(ry

今まで,bodyの方にbackground urlを指定していたのですが,bodyの基盤となる要素ってhtmlなので,そっちの方にbackground urlを指定してあげないと上部分だけが抜けた感じになるようです(苦笑)

というわけで backgruound-url を body から html へ付け替え。これだけで直りました。でも仕様上納得いかないなあ。これってFirefoxのバグじゃないんだろうか。

MathML: itexToMMLを導入する

MT4からWP2.3に移行した最大の理由がMathMMLの記述をサポートしてくれるプラグインitex2MMLの動作にあります。MT版のプラグインがPerlで書かれたものしか無い為に、ダイナミックパブリッシングと組み合わせる為には別途プラグインが必要になってきてしまうのです。

プラグインの動作の為に別途プラグインが必要で…という図式は個人的にあまり好ましいものではありません。やはり独立して動かしたいものです。…というわけでWP2.3にitex2MMLを組み込んでみます。あ、そうそう。itex2MMLのバイナリには一切手を加えていません。MTの時と同じものを使っています。

プラグインのダウンロード

WP1.2用のプラグインを用いました(via: WordPress 1.2, MathML Goodness | Musings)。単純にitexの書式からの変換だけをしたかったのでこれで十分です。

実際に表示をしようとすると次の問題点が発覚しました。

  1. math要素を一意にブロック扱いしている為に$で囲われた内容についてもp要素を付加してしまう。
  2. &rightarrowなどの記号を実体参照表示できるように強制変換してしまう。

2番目の問題は兎も角1番目についてはapplication/xhtml+xmlで表示しようとする以上致命的です(結果的にエラーで表示されない)。そこで実際にWPのコードに手を入れる事になりました。

wp-includes/formatting.phpの修正

上記の問題点を解決すべく書き換えて、前後でdiffを取ったものを次に示します。

% diff formatting.php.org formatting.php
60a61,66
> // ++ add 2008-02-04
> function clean_math($matches) {
>       if ( is_array($matches) )
>              $text = $matches[1] . $matches[2] . "</math>";
>       else
>               $text = $matches;
61a68,75
>       $text = str_replace('&#038;', '&',$text);
>       $text = str_replace('<br />', '', $text);
>       $text = str_replace('<p>', "n", $text);
>       $text = str_replace('</p>', '', $text);
>
>       return $text;
> }
> // -- add 2008-02-04
66c80,85
<       $allblocks = '(?:table|thead|tfoot|caption|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr)';
---
> // ++ del 2008-02-04
> //    $allblocks = '(?:table|thead|tfoot|caption|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr)';
> // -- del 2008-02-04
> // ++ add 2008-02-04
>       $allblocks = '(?:table|thead|tfoot|caption|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|form|map|area|blockquote|address|style|input|p|h[1-6]|hr)';
> // -- add 2008-02-04
89a109,112
> // ++ add 2008-02-04
>       if (strpos($pee, '<math') !== false)
>               $pee = preg_replace_callback('!(<math.*?>)(.*?)</math.*?>!is', 'clean_math', $pee );
> // -- add 2008-02-04

これで一応キチンと表示されるようになりました。

本当はもっと巧い遣り方もあったのかも知れませんが、とりあえずはこれでOKかと。

続きを読む MathML: itexToMMLを導入する

Acid2: IE8が合格

via
IEBlog : Internet Explorer 8 and Acid2: A Milestone

HTML, CSSの規格標準化のテストケースとしてAcid2というものがあるんですね。知らなかった…。そのテストケースに開発中のIE8が合格したそうです。でも実はFirefox 3も合格しているそうです。っていうかすでにOperaやSafariは既に合格しているそうですので、実はそんなに「うお!すげぇ!」ってニュースでも無いのかな?なんてこのエントリを作成しながら考えているところです。

それでも規格の標準化っていうのはデザイナーの方々にとっても重要なファクターですし、何だかんだ言っても世界中で圧倒的なシェアを誇るIEの標準化ですから意味する所が大きい事には間違いありませんよね。これでCSS系のバグやブラウザ依存のタグ解釈の違いが無くなってくれる事を祈ります。

参考URL
Acid2 Browser Test – The Web Standards Project

?:謎の文字で文字表記の方向が逆になる?

via
҉←「文字の流れを左右逆にする特殊文字」のトリック : 亜細亜ノ蛾 – Weblog

この不思議な記号は、コピーしてブラウザの URL 入力欄に張り付けたりしても、不思議な効果は続きます。なので、ブログの記事を書くときに、コピペしただけだとメチャメチャ扱いづらい!(実際、ものすごく苦労した)

‫‬‭‮‪‫‬‭‮҉

この文字をペーストした後に文書を書いて行くと通常 ltr の文字方向が rtl となります。確かにエントリの作成中にコピペしたら以降の文章が一気にひっくり返りました。というわけで上に記載している҉は文字実体参照です。要は次の文字列が重要なわけですよね。いやはや恐れ入りました。

&#8235;&#8236;&#8237;&#8238;&#8234;&#8235;&#8236;&#8237;&#8238;

だから最後の҉は別に҈でも良いと。

‫‬‭‮‪‫‬‭‮҈

試しにチョット何か文章を…と最近はやりのアレで。

‫‬‭‮‪‫‬‭‮҈糸色望先生

…申し訳ありませんでした。因みにもともとの҈はキリル文字で ‘COMBINING CYRILLIC MILLIONS SIGN’ を示すものらしいですよ。この場合どう訳したものなんでしょうか。数百万の結合?なんのこっちゃ。

参考URL
Unicode Character ‘COMBINING CYRILLIC MILLIONS SIGN’ (U+0489)

[amazonjs asin=”B000VR5WWS” locale=”JP” title=”さよなら絶望先生 序~絶望少女撰集~ DVD”]

続: 画像の使用を(略)CSS大会: 画像ゼロ部門に参加してみた

主催の壱茉さんより受付完了のメール頂きました。無事に公開もしていただいてホッと一息。

画像の使用を極力控えてかっこいいCSSデザインをやってみよう – Gallery
画像を一切使用しない部門
div,class,id なし
58.若菜色を基調に

最初は空間部分調整して着色して終わりにしようかとも思ったのですが、何となくヘッダに :before を指定してみました。残念ながら IE は未対応なんで表示されないのですが、読んでいく時にヘッダの番号が明示されていれば辿りやすいかな?なんていう思い付きからの発想です。

そうそう参加特典のSafariのスクリーンショット受け取りました。これを見る度に Mac に憧れるんですよね。Mac 欲しいよ Mac!