ウェブ屋のmodx指南-0000【ページ制作のツボ】

ウェブ屋のmodx指南 MODxページ制作のコツ

普通にDreamweaver等で制作したページは、たいていの場合は、modxで使えます。ただ、何が「普通」かは、人によって違う事もありますし、ちょっとしたことで、よりよく使う事ができる等、お勧めの方法もあります。

以下に、modxを使う際の（modxに限らないことがほとんどですが）、ページ制作のコツのようなことを書いておきます。それぞれ、三段階でお勧め度を表していますので、参考にしてください。

  • エンコードは「utf-8」（推奨度：★★★）
  • 拡張子は統一する（推奨度：★★★）
  • 一覧などは同じタグの繰り返しにする。（推奨度：★★★〜★★）
  • CSSは、記事本文＝bodyとして設定する（推奨度：★★）
  • 控えファイルを作っておく（推奨度：★）
推奨度：★★★

特別な理由がない限り、この通りにした方が良いです。ヒキダス流では、これが前提条件となっています。

推奨度：★★

この通りにしなければ、問題があるとまでは言いませんが、可能であるなら、総合的に考えて、このようにした方が良いと思われます。

推奨度：★

こうすれば、よりよく使うことができる、もしくは、こういう使い方もあります。というようなものです。


詳細を以下に説明します。

■エンコードは「utf-8」（推奨度：★★★）

「utf-8」は、今や最も標準的なエンコード（Windowsのメモ帳もUTF-8に対応していますね）なので、敢えて言う必要もないかもしれませんが、今でも、シフトJISやEUCを使ってページ制作をされる方も少なくないようなので、そういう方は注意してください。
「utf-8」以外では、正常に表示されない箇所が出る可能性があります。

■拡張子は統一する（推奨度：★★★）

modxでフレンドリーURLを使って、各ページのアドレスを「http://www.hogehoge.com/fugafuga/humuhumu.html」のようにする場合、modxで設定できる拡張子は一つですので、各ページの拡張子は「.html」、もしくは、「.htm」など、どれか一つに統一しておきます。

■一覧などは同じタグの繰り返しにする。（推奨度：★★★〜★★）

これは、modxに限らず、ブログでも他のCMSでも、多くのシステムで共通ですが、一覧表やリスト等で、（Ditto等を使って）自動的に繰り返す部分は、最初から最後まで同じタグ（同じ属性）の繰り返しにすべきです。

▼よくない例
繰り返しの途中に、例外的なタグ（この場合</tr><tr>）が入っています。

<table>
<tr>
<td>1.○○○○○</td>
<td>2.○○○○○</td>
<td>3.○○○○○</td>
</tr>
<tr>
<td>4.○○○○○</td>
<td>5.○○○○○</td>
<td>6.○○○○○</td>
</tr>
：
</table>


▼あまりよくない例
特定の1件だけ、特別な属性を持っています。

<div class="first_row">1.○○○○○</div>
<div class="row">2.○○○○○</div>
<div class="row">3.○○○○○</div>
<div class="row">4.○○○○○</div>
<div class="row">5.○○○○○</div>
：


▼よい例

<dl>
<dt>2009.00.00</dt><dd>1.○○○○○</dd>
<dt>2009.00.00</dt><dd>2.○○○○○</dd>
<dt>2009.00.00</dt><dd>3.○○○○○</dd>
<dt>2009.00.00</dt><dd>4.○○○○○</dd>
<dt>2009.00.00</dt><dd>5.○○○○○</dd>
：
</dl>


▼よい例
行を折り返す（tableの代替）例です。（※CSSの書き方は非推奨）

<style type="text/css">
.cell {
	float: left;
	width: 100px;
}
</style>

<div style="width:400px;  clear:both;">
<div class="cell">1.○○○○○</div>
<div class="cell">2.○○○○○</div>
<div class="cell">3.○○○○○</div>
<div class="cell">4.○○○○○</div>
<div class="cell">5.○○○○○</div>
：
</div>

■CSSは、記事本文＝bodyとして設定する（推奨度：★★）

リッチテキストエディタ（RTE：TinyMCE等のWYSIWYGエディタ）で編集する際、編集中のテキストには、bodyに効いているCSSがあたります。

ページ制作をする際、記事本文などに、

<div id="content">
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
</div>

のように、特別にIDを指定してCSSを当てる方も多いようですが、できれば、記事本文以外の、ヘッダー、フッター、メニュー、パン屑等は、それぞれに、idやclassでCSSを指定するようにして、記事本文は、bodyそのままのCSSを使うようにすれば、リッチテキストエディタで編集する際に、実際の表示に近い状態で編集することができます。

■控えファイルを作っておく（推奨度：★）

modxに組み込んだファイルを、たとえば、テンプレートなら「modxt_hogehoge.html」のようなファイル名にして保存しておきます。
こうしておけば、Dreamweaverで、Dreamweaverのテンプレートやライブラリを使っている場合はもちろん、一括置換などで、ヘッダーやメニューなどの共通部分をメンテナンスする場合でも、普通のページと同様に処理ができます。
該当ページで何か変更する必要があれば、このファイルを変更して、ソースをmodxに貼り付けるようにします。