サイト管理者用情報 for MovableType

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

現在のCSSファイルを表示する

スタイル変更用テストサイト

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

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

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

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

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

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

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

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

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

見出し

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

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

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

見出しレベル1

本仕様は、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>タイトル文字列1行目<br />
タイトル文字列2行目</p>
</div>

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

タイトル文字列1行目
タイトル文字列2行目
タイトル文字列3行目

リンク スタイル

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

<div class="menu_large_brown">
  ~~
</div/>
<div class="menu_small_brown">
  ~~
</div/>
<div class="menu_small_blue">
  ~~
</div/>

リンクいろいろ

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

<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>
文章を記述。文章は写真の右側に回りこんで表示される。
Tirana
写真のキャプション
「右寄せ写真」

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

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

本仕様は、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>
Tirana
写真のキャプション
「右寄せ図」

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

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

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

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

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

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>を挟んで段落を設定してしまうため、ソースコード中で、改行だけの行を作らないこと。 改行だけの行を表示したい場合は、1文字スペース文字を入れる。

<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仕様書
本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので

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>項目1
<ul>
<li>項目2-1</li>
<li>項目2-2</li>
</ul></li>
<li>項目3</li>
<li>項目4</li>
</ul>

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

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

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

<ol>
<li>インデント1段が付く
<ol>
<li>インデント2段が付く</li>
</ol></li>
<li>インデント1段が付く</li>
<li>インデント1段が付く</li>
</ol>

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

  1. インデント1段が付く (本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...)
    1. インデント2段が付く (本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...本仕様は、World Wide Webの出版用言語であるハイパーテキストマーク付け言語を定義するもので...)
  2. インデント1段が付く (本仕様は、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> のように記述する。

ピクトグラム

Train
ジュネーブ コルナヴァン駅 (12:55発) → リヨン パール・デュ駅 (15:25着)
TER22350列車 (運賃23ユーロ = 2550円)
Walk

徒歩 : スヴェティ・ネウム (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>

Airline Ship Train Metro Tram Bus Car Walk Hotel

<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" />

Travel Photo Software Announce

<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" />