@Style

先日、公開した【MovableType 3.2 Base Web標準テンプレート】の適用方法をダウンロードページに追加しました。基本的にバックアップを取り、ダウンロードしたテンプレートをFTPするだけでOKです。これにあわせてファイル名も変更しました。

このBlogにも記載しておきますので、よろしくお願いいたします。

テンプレートの適用方法

1. FTPクライアントで default_templatesディレクトリにある18のテンプレートのうち、 以下のテンプレートをダウンロードしバックアップを取る。
   • main_index.tmpl
   • master_archive_index.tmpl
   • category_archive.tmpl
   • datebased_archive.tmpl
   • individual_entry_archive.tmpl
2. search_templatesディレクトリのdefault.tmplをダウンロードしバックアップを取る。
3. 解凍済みのフォルダ内に以下のテンプレートをdefault_templatesディレクトリにアップする。
   • main_index.tmpl
   • master_archive_index.tmpl
   • category_archive.tmpl
   • datebased_archive.tmpl
   • individual_entry_archive.tmpl
4. ブラウザで管理画面にログインし、テンプレートの編集を選択する
5. メインページとアーカイブページのチェックボックスにチェック を入れ「その他の操作」 のドロップダウンメニューから「テンプレートを更新する」 を選択。 「Go」 ボタンをクリックする
6. 更新を確認し、戻る
7. アーカイブタブをクリックしエントリー・アーカイブ、カテゴリー・アーカイブ、日付アーカイブの全てのチェックボックスにチェックを入れ「テンプレートを更新する」を選択して 「Go」 ボタンをクリックする。
8. 更新を確認しサイトを再構築する
9. default.tmplをsearch_templatesディレクトリへFTPする

先のエントリー【MovableTypeの小技（微技）】には、やはり不具合がありそうです。

音声ブラウザに対応しいても、追記のないエントリーに対して、【ここから続き】のスペーサー画像（0px）が挿入されます。本文を読み終わった後に【ここから続き】まで読み上げてしまいます。
とりあえず、Lynxにて表示させてみたのですが、本文の最後に表示されています。

音声ナビゲーションとして【ここから続き】を挿入したい場合には、MTEntryIfExtendedを利用し、追記のあるもののみに対して、【ここから続き】を挿入するようにするべきではないでしょうか。

<MTEntryIfExtended>
<div id="a<$MTEntryID pad="1"$>more"><img src="<MTCGIPath>images/spacer.gif" alt="ここから続き" width="0" height="0" /> <$MTEntryMore$> </div>
</MTEntryIfExtended>

MovableTypeをAnother HTML-lint gatewayで検証した場合、【<div> と </div> の間が空です。】や【<a> と </a> の間が空です。】と指摘されます。

MovableType 3.171の場合

<div id="a<$MTEntryID pad="1"$>more">
<$MTEntryMore$>
</div>

MovableType 3.2の場合

<div id="more" class="entry-more">
<$MTEntryMore$>
</div>

ここに0pxのスペーサー画像を挿入します。スペーサー画像はMovableTypeにはじめから用意されています。

MovableType 3.171の場合

<div id="a<$MTEntryID pad="1"$>more">
<img src="<MTCGIPath>images/spacer.gif" alt="ここから続き" width="0" height="0" />
<$MTEntryMore$>
</div>

MovableType 3.2の場合

<div id="more" class="entry-more">
<img src="<MTCGIPath>mt-static/images/spacer.gif" alt="ここから続き" width="0" height="0" />
<$MTEntryMore$>
</div>

これでAnother HTML-lint gatewayをごまかすことが出来ます。

spacer.gifは【トップへ戻る】等のナビゲーションアンカーにも使えますので重宝します。

【追記】

小夜鳴鳥様よりご指摘いただき、本Blogを以下の通り修正いたしました。

<MTEntryIfExtended>
<div id="a<$MTEntryID pad="1"$>more">
<$MTEntryMore$> </div>
</MTEntryIfExtended>

音声ブラウザなどの読み上げ対応を検証しました後、改めてご報告いたします。

不具合もありそうです。次のエントリー・【ここから続き】のスペーサー画像 もご参照ください。

関連するエントリー：ナビゲーションとスペーサー画像

やっと、MovableType 3.2 Base Weblogテンプレートの解析に取り掛かった。スタイルシートにはWin IEやMac IEにも対応させるような小技が見られますが、かなりひどい出来です。NucleusのDefaultスキンのほうがよっぽどよい。

今まで通りのトップページのみ2カラムですが、サイドバーにはブロックを作り、装飾を加えている。こんなものは望まない。posted回りも複雑になっている。

シンプルで手の加えやすいものが最善ではないのか？

文字サイズは、全て固定されている。IEなどの一部のブラウザで文字サイズを変更できないのではアクセシビリティ ガイドラインから大きく外れ、時代に逆行している。

この状態から作り直すと大変。
今までのテンプレートを修正する方向で行きます。

GUIでの見た目はよくありません。

スタイルシートを切ってみるとよくわかるのですが、h1にすぐ下にナビゲーションリンクを設定して、それぞれのエリアへスムーズに移動できるようにしました。

通常はWebInspectorのみのアクセシビリティの検証ですが、aDesignerの非常に厳しいチェックを行い、合格いたしました。音声ブラウザでも十分読み取れるページ構成となっています。

公共性の強いサイト・利用者の年齢層が高いサイトなどにご利用いただきたいと思います。

いろんなところのMovableType構築サービスを調べてみたのですが、Validなテンプレートは数少ないようです。

XHTML1.0なのにタグを閉じてなかったり、たくさんの問題が・・・

http://www.w3.org/MarkUp/2004/xhtml-faqによると

Can I just put the XML declaration on top of existing HTML documents? Can I intermix HTML 4.01 and XHTML documents?
（XHTML に移行するには）現在あるHTML文書の先頭にXML宣言を入れるだけでいいんでしょうか? また、文書中の記述においてHTML 4.01とXHTMLを混在させてもいいでしょうか?

http://www.w3.org/MarkUp/2004/xhtml-faq

No. HTML is not in XML format. You have to make the changes necessary to make the document proper XML before you can get it accepted as XML.
ダメです。HTMLはXMLの形式を取っていません。文書をXMLとしてアクセスさせる前に、HTML文書を XML に適合するように変更しなければいけません。

http://www.w3.org/MarkUp/2004/xhtml-faq

そんな訳で、企業のサイトに使用してもよいくらいのデザインを少々加えたStrictなMovableTypeテンプレートを制作いたしました。

昨日のエントリの通り、XHTML 1.0 StrictのMovableType テンプレートはXREAへ移転いたしました。

XHTML 1.0 Strict MovableType テンプレート

完成いたしましたので、ご確認ください。

HINAGATA Photo 0.7でちょっと遊んでみました。

XHTML 1.0 Validはもちろん、Another HTML-lint gatewayでもとりあえずは100点です。

5月まで当サイトにて使用していた3段カラムの装飾を全て削除したテンプレートです。本文・サイドバーのHTML記述順序。リキッドデザインのためサイドバーに多くのBlogPartsを挿入してもメインの幅は充分にあります。
カスタマイズ素材としてご利用ください。

3Column3テンプレート

2Column Flowerご利用いただいている方へご案内いたします。

2Column Flowerのスタイルシート以外のテンプレートにおいて、エントリーの日付フォーマットに誤りがありましたので以下のように修正をお願いいたします。

誤
%Y年 %e月 %B日
正
%Y年 %m月 %e日

現在公開中のものは修正がすんでおります。
よくわからない場合には、全てのテンプレートを修正をお願いいたします。

この場でお詫びいたします。
ご迷惑をおかけいたしますが、よろしくお願いいたします。

省略されている方も多いと思いますが、必ず一行目にXML宣言を記入し<?php echo '～'."\n" ?>でかこみます。

<?php echo '<?xml version="1.0" encoding="<$MTPublishCharset$>"?>'."\n" ?>

次は、サイドバーなどのモジュール化ですね・・・

MovableTypeのPHP化の設定は以下の手順で行います。

ウェブログの設定＞ウェブログの設定 にて「アーカイブのファイルの拡張子」をphpへ変更。

アーカイブの設定で、Individual Entry Archiveを以下のように変更します。

<$MTArchiveDate format="%Y/%m/%d_%H%M"$>.php

これで年および月別のディレクトリを生成して何日の何時何分のエントリという形式のパーマネントリンクとなります。（/はディレクトリをあらわします。）
全てを再構築。

テンプレートのインデックス・テンプレートの
Main Indexの出力ファイル名：index.php
Master Archive Indexの出力ファイル名：archives.phpに変更。

新規構築の場合は再構築を行えば完了です。

運営中のBlogをPHP化する場合には以下の設定もお忘れなく。

新しいインデックス・テンプレートを作るより、
テンプレートの名前：htaccess
出力ファイル名：htaccess.phpとして
テンプレートの中身に以下を記入します

<MTArchiveList archive_type="Individual">
Redirect permanent /x/archives/<MTEntries><$MTEntryID pad="1"$>.html</MTEntries> <$MTBlogURL$>archives/<$MTArchiveDate format="%Y/%m/%d_%H%M"$>.php
</MTArchiveList>　

再構築すると、htaccess.phpが出来ます。

htaccess.phpをダウンロードし、月別アーカイブやカテゴリーアーカイブの追加記入をしてアップロードします。アップロード後、ファイル名を.htaccessに変更。

全てのhtmlファイルを削除して、終了です・・・

これでPHPとなり、サイドバーやフッターのモジュール化が行えるようになります。