サイト管理者用情報 for MovableType

W3CのHTML 4.01規格を厳密に満たすため、MovableTypeの特性を考えてコーディングするための資料。

MovableTypeページビルド用タグ設定

タグ名	機能
fancybox	画像ポップアップJavaScript Fancybox 有効化
meta_viewport	モバイルデバイスのViewport有効化(meta viewportを出力しない)
no_counter	カウンタ用タグを出力しない

「改行を変換」の場合の自動段落設定への対応

「改行を変換」モードの場合、空白行（改行のみの行）で段落（<p>）が設定されるので、段落をつけるべくタグの前後には必ず改行を入れる。

<h4>セクションのタイトル</h4>
    ← ここに改行のみの行
段落となるべく文章をこのあたりに記述...。
    ← ここに改行のみの行
<div class="...">
    ← ここに改行のみの行
DIVタグ内の文章...
    ← ここに改行のみの行

セクション（H1 など）と、DIV などが隣接して行間が圧縮されるのを防ぐためには、次のようにする。

<h4>セクションのタイトル</h4>
&nbsp;    ← ここに&nbsp;のみの行
     ← ここに改行のみの行
<pre>
ソースコードなど...

空の改行を２行続けて入れると、他のタグを挟んだ形で段落タグ（<p>）が設定されるときもあるので、改行で行間調整しない。行間調整するときは

<div style="height:5em;"></div> のようなコードを挿入する。

見出し

各見出しのスタイルと、前後のマージンは次のように表現される。

<h1>見出しレベル1</h1>
<h2>見出しレベル2</h2>
<h3>見出しレベル3</h3>
<h4>見出しレベル4</h4>
<h5>見出しレベル5</h5>

本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

見出しレベル１

本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

見出しレベル2

本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

見出しレベル3

本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

見出しレベル4

本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

見出しレベル5

本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

レイアウト

タイトルヘッダ

<div id="layout_header" style="background-image: url('http://oasis.halfmoon.jp/pics/画像ファイル.png'); background-repeat: no-repeat; background-attachment: scroll; background-position: 0% 50%">
<p>タイトル文字列１行目<br />
タイトル文字列２行目</p>
</div>

縦100pxのアイコン画像を左端に、文字列を右端に表示する。文字列は２行目がちょうど画像の上下中心線付近になる。

タイトル文字列１行目

タイトル文字列２行目

タイトル文字列３行目

リンクスタイル

通常のリンクスタイルは、このようになる。それ以外に、次のようなリンクスタイルが定義されている。

<div class="menu_large_brown">
  ～～
</div/>

リンク書式

本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

リンク書式（説明文と同じ段落）
本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

<div class="menu_small_brown">
  ～～
</div/>

リンク書式

本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

リンク書式（説明文と同じ段落）
本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

<div class="menu_small_blue">
  ～～
</div/>

リンク書式

本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

リンク書式（説明文と同じ段落）
本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

リンクいろいろ

ページ内にジャンプ先のセクションを記載する例。

<div id="Section_test"> </div>
 
～～
 
<a href="#Section_test">セクションに飛ぶ</a>

各種ファイルへのリンクを記載する例。

<a href="#test" class="link_external">外部サイト</a>
<a href="#test" class="link_lock">httpsサイト</a>
<a href="#test" class="link_file">ファイル</a>
<a href="#test" class="link_document">文書ファイル</a>
<a href="#test" class="link_audio">オーディオファイル</a>
<a href="#test" class="link_video">ビデオファイル</a>
<a href="#test" class="link_download">ダウンロード</a>
<a href="#test" class="link_orange">矢印アイコン付き</a>
<a href="#test" class="link_blue">矢印アイコン付き</a>
<a href="#test" class="link_red">矢印アイコン付き</a>
<a href="#test" class="link_black">矢印アイコン付き</a>
<a href="#test" class="link_gray">矢印アイコン付き</a>
<a href="#test" class="link_orange_dot">丸アイコン付き</a>
<a href="#test" class="link_blue_dot">丸アイコン付き</a>
<a href="#test" class="link_red_dot">丸アイコン付き</a>
<a href="#test" class="link_black_dot">丸アイコン付き</a>
<a href="#test" class="link_gray_dot">丸アイコン付き</a>
<a href="#test" class="link_return">前のページに戻る</a>
<a href="#test" class="link_right">進む</a>
<a href="#test" class="link_left">戻る</a>

外部サイトへのリンク
 httpsサイトへのリンク
 ファイルへのリンク
 文書ファイルへのリンク
 オーディオファイルへのリンク
 ビデオファイルへのリンク
 ファイルをダウンロードする(123,456 kBytes)
矢印アイコン付き
 矢印アイコン付き
 矢印アイコン付き
 矢印アイコン付き
 矢印アイコン付き
 丸アイコン付き
 丸アイコン付き
 丸アイコン付き
 丸アイコン付き
 丸アイコン付き
 前のページに戻る
 進む
 戻る

ファイルへのリンクアイコンはMediaWikiパッケージから、矢印アイコンは無料素材倶楽部より借用。ダウンロード、戻る・進むアイコンは自作。

画像

背景色付きの写真用フレーム

DIVのクラス： photo_left, photo_right

写真を回り込んで表示されている文章が短い場合、後に続く文章が上にずれて表示される。それを回避するため、回り込み解除タグ（div class="clear"）を文章末尾に挿入する。

<div class="photo_right">
<img src="画像ファイル.jpg" width="000" height="000" alt="代替txt" title="図の説明文" /><br />
写真のキャプション<br/>「右寄せ写真」
</div>
文章を記述。文章は写真の左側に回りこんで表示される。
<div class="clear"></div>
<div class="photo_left">
<img src="画像ファイル.jpg" width="000" height="000" alt="代替txt" title="図の説明文" /><br />
写真のキャプション<br/>「左寄せ写真」
</div>
文章を記述。文章は写真の右側に回りこんで表示される。

写真のキャプション
「右寄せ写真」

本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...　本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...　本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...　本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...　本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...　

写真のキャプション
「左寄せ写真」

なお、文章途中で回り込みを解除する場合は、 <div class="clear"></div> を解除位置に記述する。

背景色なしの図形画像用フレーム

DIVのクラス： fig_left, fig_center, fig_right

<div class="fig_right">
<img src="画像ファイル.jpg" width="000" height="000" alt="代替txt" title="図の説明文" /><br />
図のキャプション<br/>「右寄せ図」
</div>
文章を記述。文章は図の左側に回りこんで表示される。
<div class="clear"></div>
<div class="fig_left">
<img src="画像ファイル.jpg" width="000" height="000" alt="代替txt" title="図の説明文" /><br />
図のキャプション<br/>「左寄せ図」
</div>
文章を記述。文章は図の右側に回りこんで表示される。
<div class="fig_center">
<img src="画像ファイル.jpg" width="000" height="000" alt="代替txt" title="図の説明文" /><br />
図のキャプション<br/>「中央揃えの図」
</div>

写真のキャプション
「右寄せ図」

写真のキャプション
「左寄せ図」

写真のキャプション
「中央揃えの図」

Lightbox

MovableTypeの"タグ"にfancyboxと入力することで、ページ内の全てのjpgファイルを開くタグ（<a href=...>）に対してFancybox関連のJavaScriptが有効化される。Lightboxでのキャプション（写真の説明）は<a href=...>タグ内にtitle"..."を設定する。Lightbox内で写真をマウスのスクロールボタン等で前後に切り替えるには、<a href=...>タグ内にrel="lightbox_group"を設定する。

<a rel="lightbox_group" title="写真のキャプション" href="/example/photo.jpg">
 <img src="/thumb/thumb.jpg" />
</a>

ページ内の写真を全て別ウインドウで開く

MovableTypeの"タグ"にnew_windowと入力することで、リンク（<a href=...>）のデフォルトターゲットが"_new"となる。

ソースコード、記事

ソースコード

「改行を変換」モードの自動変換が誤動作して、<div>を挟んで段落を設定してしまうため、ソースコード中で、改行だけの行を作らないこと。　改行だけの行を表示したい場合は、１文字スペース文字を入れる。

<pre>
#include<stdio.h>
 
int main(void)
{
    printf("Hello World\n");
    return 0;
}
</pre>

または

<div class="codetitle">hello.c</div>
<div class="code">
#include<stdio.h>
 
int main(void)
{
    printf("Hello World\n");
    return 0;
}
</div>

タイトル付きのコード領域は、次のように表示される。

hello.c

#include <stdio.h>

int main(void)
{
printf("Hello World\n");
return 0;
}

縦サイズを指定した（縦スクロールバー付き）コード領域は次のように表示される。（divディレクティブ中に、style="height: 0000px;"を追加すればよい。なお、IE6以下では未サポート）

#banner-header
{
font-family: "Courier New", sans-serif;
color: #000000;
font-size: 30px;
letter-spacing: .3em;
text-align: right;
}

#banner-description
{
font-family: "Courier New", sans-serif;
color: #000000;
font-size: 12px;
letter-spacing: .3em;
text-align: right;
}

#alpha { margin: 15px 15px 0 15px; }
#beta { background: #ECE1BF; }
#gamma, #delta { width: 180px; background: #faeada; }

引用記事

<div class="topictitle">HTML 4.01仕様書</div>
<div class="topic">
本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので
 
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html

HTML 4.01仕様書

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html

テーブル

<table>
<caption>欧州の主要空港の比較（2007年旅客数）</caption>
<tbody><tr>
<th>空港名</th>
<th>国</th>
<th>年間旅客数</th>
<th>世界順位</th>
</tr>
<tr>
<th>ヒースロー空港</th>
<td>イギリス（ロンドン）</td><td>68,066,028人</td><td>3位</td>
</tr>
<tr>
<th>シャルル・ド・ゴール空港</th>
<td>フランス（パリ）</td><td>59,922,177人</td><td>6位</td>
</tr>
<tr>
...

欧州の主要空港の比較（2007年旅客数）
空港名	国	年間旅客数	世界順位
ヒースロー空港	イギリス（ロンドン）	68,066,028人	3位
シャルル・ド・ゴール空港	フランス（パリ）	59,922,177人	6位
フランクフルト空港	ドイツ（フランクフルト）	54,161,856人	8位
バラハス空港	スペイン（マドリード）	52,122,702人	10位
スキポール空港	オランダ（アムステルダム）	47,794,994人	12位
ガトウィック空港	イギリス（ロンドン）	35,218,374人	25位
ミュンヘン空港	ドイツ（ミュンヘン）	33,959,422人	28位

箇条書き

通常の箇条書き

<ul>
<li>項目１
<ul>
<li>項目２－１</li>
<li>項目２－２</li>
</ul></li>
<li>項目３</li>
<li>項目４</li>
</ul>

本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

項目１
- 項目２－１
- 項目２－２
項目３
項目４

インデント代わりに利用する箇条書き

箇条書き番号が出ないようにしているため、文章上でインデント１段必要となった場合に使う。

<ol>
<li>インデント１段が付く
<ol>
<li>インデント２段が付く</li>
</ol></li>
<li>インデント１段が付く</li>
<li>インデント１段が付く</li>
</ol>

本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

インデント１段が付く（本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...）
1. インデント２段が付く（本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...）
インデント１段が付く（本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...）

その他のタグ

水平線

普通の水平線は、 </p><div class="hl"></div> と記述する。

水平線（点線）は、 <div class="hl_dash"></div> と記述する。

ひとつ前のページに戻るリンク

<div class="link_right"><a href="./index.html"><img alt="戻る" src="/pics/btn_up.gif" height="25" width="25" />一つ前のメニューに戻る</a></div>

一つ前のメニューに戻る

フォントの色など

W3Cに厳格に準拠させるため、fontタグは用いない。赤く着色する場合は、 <span style="color:red;">赤く着色</span> とする。　なお、太字や斜体は <b>太字</b> や <i>斜体</i> のように記述する。

ピクトグラム

ジュネーブコルナヴァン駅（12：55発） → リヨンパール・デュ駅（15：25着）
TER22350列車（運賃23ユーロ＝ 2550円）

徒歩：スヴェティ・ネウム（7：30） → 国境（8：15）

<div class="fig_left" style="margin:0px 3px 0px 0px;"><img src="/pics/pict-train.png" border="0" width="38" height="38" alt="Train" /></div>
ジュネーブ コルナヴァン駅 （12：55発） → リヨン パール・デュ駅 （15：25着）<br /><span style="color:grey;">TER22350列車 （運賃23ユーロ ＝ 2550円）</span><div class="clear"></div>
 
<div class="fig_left" style="margin:0px 3px 0px 0px;"><img src="/pics/pict-walk.png" border="0" width="38" height="38" alt="Walk" /></div>
<br style="line-height:0.5em;" />徒歩 ： スヴェティ・ネウム （7：30） → 国境 （8：15）<div class="clear"></div>

<img src="/pics/pict-air.png" border="0" width="38" height="38" alt="Airline" />
<img src="/pics/pict-ship.png" border="0" width="38" height="38" alt="Ship" />
<img src="/pics/pict-train.png" border="0" width="38" height="38" alt="Train" />
<img src="/pics/pict-metro.png" border="0" width="38" height="38" alt="Metro" />
<img src="/pics/pict-tram.png" border="0" width="38" height="38" alt="Tram" />
<img src="/pics/pict-bus.png" border="0" width="38" height="38" alt="Bus" />
<img src="/pics/pict-car.png" border="0" width="38" height="38" alt="Car" />
<img src="/pics/pict-walk.png" border="0" width="38" height="38" alt="Walk" />
<img src="/pics/pict-hotel.png" border="0" width="38" height="38" alt="Hotel" />

<img src="/pics/pict-travel.png" border="0" width="38" height="38" alt="Travel" />
<img src="/pics/pict-camera.png" border="0" width="38" height="38" alt="Photo" />
<img src="/pics/pict-mouse.png" border="0" width="38" height="38" alt="Software" />
<img src="/pics/pict-microphone.png" border="0" width="38" height="38" alt="Announce" />

一つ前のメニューに戻る

サイト管理者用情報 for MovableType

MovableTypeページビルド用タグ設定

「改行を変換」の場合の自動段落設定への対応

見出し

見出しレベル１

見出しレベル2

見出しレベル3

見出しレベル4

見出しレベル5

レイアウト

タイトルヘッダ

リンク スタイル

リンクいろいろ

画像

背景色付きの写真用フレーム

背景色なしの図形画像用フレーム

Lightbox

ページ内の写真を全て別ウインドウで開く

ソースコード、記事

ソースコード

引用記事

テーブル

箇条書き

通常の箇条書き

インデント代わりに利用する箇条書き

その他のタグ

水平線

ひとつ前のページに戻るリンク

フォントの色など

ピクトグラム

リンクスタイル