TopMovable Typeカスタマイズ管理画面 > Movable Type で簡単に valid な XHTML 文書を作る
2009年8月 5日

Movable Type で簡単に valid な XHTML 文書を作る

Posted at August 5,2009 1:55 AM
Category:[管理画面]
Tag:[, , , ]

Movable Type のブログ記事作成・編集画面やウェブページ作成・編集画面にある、本文・追記のリッチテキストは、強調文字や下線、リンクあるいは画像など、いわゆる WYSWYG による編集ができるフォーマットです。

リッチテキストフォーマット

例えば、Amazon アフィリエイトのリンクも次のように、実際に表示されるイメージで編集できたりします。

Amazon アフィリエイトのリンク

私は普段、Movable Type でブログ記事を書くときにリッチテキストを使ってないので(すいません)、あまり機能把握ができていなかったのですが、リッチテキストを使用すると、valid でない XHTML を valid にできるそうで、全く知りませんでした。教えて頂いたヲレサイトさん、ありがとうございました。

上に貼り付けた Amazon アフィリエイトのリンクも、元のマークアップは一部 valid でないのですが、この状態で保存するだけでかなり valid な XHTML になります。

ということで、どこまで valid な XHTML にできるのか、色々試してみました。動作は Firefox 3.5.1 で確認しています。

ここで試している方法は、以下の手順で行なっています。

  1. フォーマットから「なし」を選択する
  2. valid でない(X)HTMLマークアップ等を記述
  3. フォーマットを「リッチテキスト」を選択する
  4. 再び「なし」を選択して(X)HTMLマークアップを確認する

実際の利用では、4.を実施せず、3.の「リッチテキスト」の状態で保存すれば、以下に示す変換が行なわれた状態で保存されます。変換を確認したい方は4.まで行なっても良いでしょう。

また、XHTML に不慣れな方で、生のマークアップを行いたい方は、フォーマットを「なし」にした状態で、マークアップを書き、そのあと上の変換作業を行なえば、正しいマークアップの勉強にもなります。

1.空要素タグでスラッシュの前に空白がない場合

br 要素のスラッシュの前に半角スペースがない場合、半角スペースを挿入してくれます。

変換前
変換前

変換後
変換後

img 要素のように属性がある場合も変換可能です。

変換前
変換前

変換後
変換後

2.空要素タグでスラッシュがない場合

br 要素にスラッシュがない場合、半角スペースとスラッシュを挿入してくれます。

変換前
変換前

変換後
変換後

3.終了タグがない場合

p 要素の終了タグがない場合、終了タグを付与してくれます。

変換前
変換前

変換後
変換後

親子関係のある順不同リストでも変換可能です。

変換前
変換前

変換後
変換後

定義リストも可能です。

変換前
変換前

変換後
変換後

4.実体参照

& は & に変換してくれます。

変換前
変換前

変換後
変換後

ちなみに &は& には変換されません。

< と > も、<lt; および >gt; に変換してくれます。

変換前
変換前

変換後
変換後

ダブルクォーテーションは実体参照に変換されません。

5.実体参照の解除

これまでとは逆に、「~」や「¥」などを実体参照した状態で設定し、同じ手順で変換すると、実体参照が解除されます。

変換前
変換前

変換後
変換後

<lt;/>gt;/&amp; は解除されませんでした。

6.関連サイト

下記です。ありがとうございました。

Posted by yujiro   このページの先頭に戻る
関連記事
この記事を読んだ人はこんな記事も読んでいます
人気エントリー
Hatena Hot Entries
Hatena Entries
トラックバックURL


コメント

検証おつかれ様でした。
MT4.0の頃あたりはお茶目なタグを挿入してくれたりしましたが、4.1くらいになってからかなり使えるリッチテキストエディタになったかと思います。W3CのバリデーションやFirefoxのエラーコンソールに怒られないくらいにはXHTML-validにしてくれる感じですね。
「改行を変換」フォーマットで文書だけずらずらと書いた後にエイっとリッチテキストフォーマットに切り替えて戻すと、pタグやbrタグがかなり適切に挿入されているのがお気に入りです。
使うブラウザがIEやFirefoxですと最新のMTでは問題は見受けられませんがGoogle Chromeを使うととんでもないタグが挿入されたりするので注意が必要かもです。これはMTのリッチテキストエディタだけではないみたいですね。

[1] Posted by ヲレ : August 5, 2009 8:03 AM

>ヲレさん
こんにちは。
リッチテキストエディタはブラウザ依存の部分があるということですね。
情報ありがとうございました。

[2] Posted by yujiro logo : August 11, 2009 6:54 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)

Now loading...
Introduction
Entries of this Category
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.12