MovableTypeの小技（微技）

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>

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

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

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

Posted

コメント

スペーサー画像を使用するのは、アクセシビリティに反するのではありませんか？

<MTEntryIfExtended>
<div id="a<$MTEntryID pad="1"$>more"> <$MTEntryMore$> </div>
</MTEntryIfExtended>
とすることで、追記が無い時の空のdivを生成することを回避出来ます。

投稿者 小夜鳴鳥 :

小夜鳴鳥様、コメント及びご教授ありがとうございます。そうですね、マニュアル通りIfを利用すれば簡単な方法がありますね。早速、上記を使用させていただきます。

「スペーサー画像を使用するのは、アクセシビリティに反する」の考え方は、レイアウト目的等でスペーサー画像にaltを指定しない場合と考えております。

全ての音声ブラウザで完全に対応可能出来るのか検証しなければなりませんが、【alt="ここから続き"】とすることで、音声読み上げにも対応可能ではないかと思います。

投稿者 @Style :

Tags