ブログのIE6対応とか

ブログの書けない理由の一つ、MT->WP移行が完了していないの対応。

一つはPukiWikiのテキストフィルタ対応。Movable Typeでは記事ごとに任意のテキストフィルタ(htmlの変換ルール)を指定できたけど、WordPressではできないのでPukiWikiフィルタを適応していた記事が正しく表示されていなかった。(ページの方はテンプレートを指定できるのでpukiwiki変換するテンプレートを作成して移行済みだったが)

最初はカスタムフィールドでON/OFFの設定でも入れようかと思ったがwp_metaとかでカスタムフィールドが全部表示されたりするっぽいので、おとなしくthe_contentのフィルタで変換することにした。[]のpukiwikiで囲むとpukiwikiで変換する。

続いてIEでレイアウトが崩れる問題。ひとつはPukiWikiプラグインが悪さをしていてget_headerのフィルタでpuwiki_navigaterをhtmlを履いてたら出力の最初にでちゃっててDOCTYPEの判定を妨げていた予感。

さらにMTからWPにテンプレートを移植したときにie6.cssを入れるのを忘れていた。

IE6は幅の計算するのが苦手な子なので、うかつにwidth:100%やwidth:autoは使うと親のコンテナの指定幅を超えてしまうことがある。floatで厳密に並べている場合、1pxセルでもずれると回り込みが下にいってしまう。これがレイアウト崩れの原因。

kwLogではこの対策としてie6.cssで明示的にpxを指定してあげることにしている。

<!--[if lt IE 7 ]>
<link rel="stylesheet" href="blog_ie6.css" type="text/css" />
<![endif]--> 

レイアウトを重視する場合、エントリの幅を固定にしてoverflow-x:hiddenにする方法がある。今までこの設定は避けてたんだけどie6.cssにして指定することにした。

今まで避けていたのはレイアウトが崩れることによって何がはみ出しているのかを知るためであったが、実際にはIE6なんて使わないのでどのみち気がつかないじゃないか、ということを認識したので対応することにした。

基本的にIE6なんてシラネ。なのでレイアウトを重視。IE6な人はバージョンをあげてください。

# そしてWordPressなSyntaxHighlgihterを使うのが面倒なので早速PukiWiki + coreprettfyプラグインのあわせ技でコードハイライトしている俺。

人見知りソフトウェアエンジニアです。ビジュアル系、お笑い、Pixarが好き。勢いで吉本超合金おたけびBOTを作った。オールザッツ漫才が放送されない東京在住。

趣味や日常からアウトプットの場としてブログを書いています。自作のWordPressプラグインにGitHub Flavored MarkdownAmazonJSなど。