このサイトでも利用させてもらってる、Movaable Type をモバイル対応にするCGIのMT5に暫定対応版のalpha16が公開されました。テンプレートのxhtml化と絵文字対応のほか、バグフィックスがなされています。
素晴らしいスクリプトに感謝です、皆さんもぜひお試しください。
- ダウンロードと解説
-
今回は、テンプレートのxhtml化については開発途中版ということもあるので完全に対応しているわけではありませんので、若干CGI本体に手を入れてxhtml化を少し進めてみることにします。
手順1.トップロゴまわり
524行目以降の
# ----- トップロゴ -----
sub index_title_logo {
my $str;
if (( $ua eq 'i-mode' && $cfg{Logo_i} ) || ( $ua ne 'i-mode' && $cfg{Logo_o} )) {
$str = ($ua eq 'i-mode') ? "<img src=\"$cfg{Logo_i}\">" : "<img src=\"$cfg{Logo_o}\">" ;
を
# ----- トップロゴ -----
sub index_title_logo {
my $str;
if (( $ua eq 'i-mode' && $cfg{Logo_i} ) || ( $ua ne 'i-mode' && $cfg{Logo_o} )) {
$str = ($ua eq 'i-mode') ? "<img src=\"$cfg{Logo_i}\" alt=\"$blog_name\" />" : "<img src=\"$cfg{Logo_o}\" alt=\"$blog_name\" />" ;
とし、トップロゴ画像にalt属性を付与します。
手順2.画像にalt属性を追加
817行以降の
$caption = "<img src=\"./$cfg{MyName}?mode=thumbnail&".$bid_str."img="
.($hentities == 1 ? encode_entities($src) : $src)."\" />";
を
$caption = "<img src=\"./$cfg{MyName}?mode=thumbnail&".$bid_str."img="
.($hentities == 1 ? encode_entities($src) : $src)."\" alt=\"$alt\" />";
とし、画像にalt属性を付与します。
手順3.bqタグ部の色変更をコメントアウト
# bqタグ部の色変更
if ($cfg{BqColor}) {
$text=~s/<blockquote>/<blockquote><font color="$cfg{BqColor}">/ig;
$text=~s/<\/blockquote>/<\/font><\/blockquote>/ig;
}
を
# bqタグ部の色変更
# BqColorをCSSで定義（2010.10.23 Hironori Shikida）
# if ($cfg{BqColor}) {
# $text=~s/<blockquote>/<blockquote><font color="$cfg{BqColor}">/ig;
# $text=~s/<\/blockquote>/<\/font><\/blockquote>/ig;
# }
と、bqタグ部の色変更を後述するテンプレートを変更しCSSで定義するためコメントアウトします。
さらに、3924行
$tmpl->param(BODY_VLINK_COLOR => $cfg{VlnkColor});
の次に
$tmpl->param(BODY_BQ_COLOR => $cfg{BqColor});
を付け加え、ここでBqColorを定義します。
手順4.optionタグを閉じる
3861行の
push @categories, "<option value=\"$id\"$selected>$label($count)";
を
push @categories, "<option value=\"$id\"$selected>$label($count)</option>";
とし、optionタグを閉じます。
手順5.header.tmplテンプレートの書き換え
12行目以降
</head>
<body bgcolor="<TMPL_VAR NAME="BODY_BG_COLOR">" text="<TMPL_VAR NAME="BODY_TEXT_COLOR">" link="<TMPL_VAR NAME="BODY_LINK_COLOR">" alink="<TMPL_VAR NAME="BODY_ALINK_COLOR">" vlink="<TMPL_VAR NAME="BODY_VLINK_COLOR">">
を
<style type="text/css">
body {
background: <TMPL_VAR NAME="BODY_BG_COLOR">;
color: <TMPL_VAR NAME="BODY_TEXT_COLOR">;
a:link: <TMPL_VAR NAME="BODY_LINK_COLOR">;
a:active: <TMPL_VAR NAME="BODY_ALINK_COLOR">;
a:visited: <TMPL_VAR NAME="BODY_VLINK_COLOR">;
}
blockquote {
background: <TMPL_VAR NAME="BODY_BG_COLOR">;
color: <TMPL_VAR NAME="BODY_BQ_COLOR">;
}
</style>
</head>
<body>
と書き換え、CSSで色を定義します。
手順6.index.tmplテンプレートの書き換え（好みで）
3行目以降
<h1 align="center" style="color:#FF0000">
<TMPL_VAR NAME="BLOG_LOGO">
</h1>
<div style="text-align:center">
mobile ver.
</div>
<TMPL_IF NAME="ADMIN_MODE">
<h2 align="center" style="color:#FF0000">
管理者モード
</h2>
を
<h1 style="color:#FF0000; text-align:center">
<TMPL_VAR NAME="BLOG_LOGO">
</h1>
<div style="text-align:center">
mobile ver.
</div>
<TMPL_IF NAME="ADMIN_MODE">
<h2 style="color:#FF0000; text-align:center">
管理者モード
</h2>
とします。
以上、覚書でした。
