世界中の１％の人々へ

顧客や上司に、写真をこんな感じに企業ブログで表示したいと頼まれたら、どのような解決方法があるだろうか？

「image」に、「class」を設定して対応するというのが一般的だが、写真を左にもしたい、写真じゃない画像（ロゴ・イラスト等）とかの場合は罫線はいらないとか言われたら…、制御別のclassのマニュアルを作って渡すしかないと思う。

でも、FCKeditorをカスタマイズすれば、運用マニュアルなんて必要ない。

本日のコラムもMovable Type 4.1/4.2を扱う、Web制作会社の方とか、企業サイトの更新管理を任されるWeb担当者の方に贈りたい。

◆「スタイル」ボタンの呼出方法

MT-Plugin-FCKeditor 1.2.jaのツールバーセットでは表示していないから、気づかない人もいるかと思うが、FCKeditorには、カスタムスタイルが登録できる、「スタイル」というプルダウンメニューがある。
＃この機能は環境に合わせてハックしないと役に立たないので、表示してない。

ボタンを呼び出すには、例によって、「fck.config.js」を編集する。

/mt-static/plugins/FCKeditor/fckeditor/fckconfig.js

129行目

 ['FontFormat','FontName','FontSize'],

これを、

 ['Style','FontFormat','FontName','FontSize'],

と書き換えて保存し、アップロードすれば、「スタイル」を呼び出すボタンがツールバーセットに表示される。

◆カスタマイズ例

「スタイル」のプルダウンメニューをカスタマイズするには、

/mt-static/plugins/FCKeditor/fckeditor/fckstyles.xml

を編集する。まずはソースをじっくり読んでほしい。

カスタマイズ例として、画像制御のスタイルを編集してみた。このスタイルは文字を選択しても表示されず、画像等のオブジェクトを選択したときのみ表示される。

120行目以下に下記ソースが記述されている。

◇オリジナルソース

    <!-- Object Styles -->

    <Style name="Image on Left" element="img">
        <Attribute name="style" value="padding: 5px; margin-right: 5px" />
        <Attribute name="border" value="2" />
        <Attribute name="align" value="left" />
    </Style>
    <Style name="Image on Right" element="img">
        <Attribute name="style" value="padding: 5px; margin-left: 5px" />
        <Attribute name="border" value="2" />
        <Attribute name="align" value="right" />
    </Style>
</Styles>

ソースを読めば、おおよそわかると思うが、写真に対して文字を回り込ませる制御が書いてある。でも、XHTML1.0では推奨されない、border="2"や、align="raight"があったりして気にいらないので、全面的に書き直してみた。

◇書き直したソース

    <!-- Object Styles -->

    <Style name="&#30011;&#20687;&#24038;&#32257;&#21462;&#26377;" element="img">
        <Attribute name="style" value="margin-right: 1em; margin-bottom: 1em; float: left; padding: 5px;     border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #666666; border-bottom: 1px solid #666666;" />
    </Style>
    <Style name="&#30011;&#20687;&#21491;&#32257;&#21462;&#26377;" element="img">
        <Attribute name="style" value="margin-left: 1em; margin-bottom: 1em; float: right; padding: 5px; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #666666; border-bottom: 1px solid #666666;" />
    </Style>
</Styles>

日本語は通らないから、例によって数値実体参照変換を利用している。完成したら保存して元の場所にアップロードすれば、カスタムスタイルが使えるようになる。

◆操作手順

画像をアップロードして選択。

スタイルから「画像右縁取有」を選択してクリック。

できあがり。上記のカスタムスタイルを利用すると、こんな事が簡単にできる。
他にもいろいろカスマイズできるので、ソースをじっくり読んでカスタマイズにトライしてみてほしい。

◆実際の出力結果

美ヶ原牧場散策

美ヶ原高原は僕の大好きな場所のひとつで、
海抜2000m級の高原はどこまでも続く広大な青空をプレゼントしてくれる。2

お勧めは、山本小屋から美ヶ原山頂の王ヶ頭(2,034m)までの片道約１時間のハイキングコースだ。

山本小屋を出て歩きはじめると、海抜2000mの美ヶ原は見渡す限りの空、空、空。
高原の空気が実に心地よい。

◆まとめ：商用Webに既製品はありえない。

カスタムテンプレート、リアルWYSIWYG編集、カスタムスタイルと3日間にわたって、プロのWeb制作者や、企業のWeb担当者向けにFCKeditorのカスタマイズ方法を書いた。
100の顧客があれば、Webに対して100の仕様があり、それぞれに最適なカスタマイズを行うのがプロのWeb制作者の当たり前の姿で、Web制作者は、エンドユーザーの使い方に合わせてカスタマイズして納品できてこそ、プロを語る資格がある。
一連のカスタマイズは、XHTML＋CSSをきちんと理解している人なら、誰でもカスタマイズできるようドキュメントを書いたつもりなので、時間を作って挑戦してみてほしい。

参考になれば幸い。

せっかくのWYSIWYGエディタなんだから、編集画面も表示画面と同じにしたいよね。

WYSIWYG（ウィジウィグ）とは、IT用語辞典よれば、『「見たものが、手に入るもの」という意味。作成・編集時にディスプレイ画面で見たものが、そのまま印刷物やHTML文書として出力できることを言う。』ということなのだが、FCKeditorを使っても、編集画面ではエントリーで利用するCSSは読み込んでくれない。

Webで調べると、他のCMSでは可能なようなので、「なんとかMT版でもリアルWYSWYGで編集したいよな」と思って試行錯誤していたが、ようやく解決！
＃スキルのなさに情けなくなる

どうすれば解決するのかと言えば、FCKeditorの編集エリアに、エントリーで利用するCSSを読み込ませればいい。その方法を以下に解説。

カスタマイズするなら、まずドキュメントを読め！

ということで、「fck.config.js」を確認すると、それらしい1行があった。

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + ‘css/fck_editorarea.css’ ;

なるほど、この行を書き換えればいいのだな。
そこで、

FCKConfig.EditorAreaCSS = ‘http://www.dakiny.com/style.css’ ; 

と修正したが、うまくいかない

そこで、該当ファイルをまず読んでみた。
編集エリアを制御する画面は下記にある。

mt4/mt-static/plugins/FCKeditor/fckeditor/editor/css/fck_editorarea.css

以下、ファイル全文を添付しておく。

◇「fck_editorarea.css」ソース

/*
 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
 * Copyright (C) 2003-2008 Frederico Caldeira Knabben
 *
 * == BEGIN LICENSE ==
 *
 * Licensed under the terms of any of the following licenses at your
 * choice:
 *
 *  - GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 *
 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
 *    http://www.gnu.org/licenses/lgpl.html
 *
 *  - Mozilla Public License Version 1.1 or later (the "MPL")
 *    http://www.mozilla.org/MPL/MPL-1.1.html
 *
 * == END LICENSE ==
 *
 * This is the default CSS file used by the editor area. It defines the
 * initial font of the editor and background color.
 *
 * A user can configure the editor to use another CSS file. Just change
 * the value of the FCKConfig.EditorAreaCSS key in the configuration
 * file.
 */

/*
    The "body" styles should match your editor web site, mainly regarding
    background color and font family and size.
*/

body
{
    background-color: #ffffff;
    padding: 5px 5px 5px 5px;
    margin: 0px;
}

body, td
{
    font-family: Arial, Helvetica, Tahoma, "Trebuchet MS", Verdana,"ヒラギノ角ゴ Pro W3",Osaka,"メイリオ","ＭＳ Ｐゴシック", sans-serif;
    font-size: 12px;
}

a[href]
{
    color: -moz-hyperlinktext !important;        /* For Firefox... mark as important, otherwise it becomes black */
    text-decoration: -moz-anchor-decoration;    /* For Firefox 3, otherwise no underline will be used */
}

/*
    Just uncomment the following block if you want to avoid spaces between
    paragraphs. Remember to apply the same style in your output front end page.
*/

/*
p, ul, li
{
    margin-top: 0px;
    margin-bottom: 0px;
}
*/

/*
    The following are some sample styles used in the "Styles" toolbar command.
    You should instead remove them, and include the styles used by the site
    you are using the editor in.
*/

.Bold
{
    font-weight: bold;
}

.Title
{
    font-weight: bold;
    font-size: 18px;
    color: #cc3300;
}

.Code
{
    border: #8b4513 1px solid;
    padding-right: 5px;
    padding-left: 5px;
    color: #000066;
    font-family: 'Courier New' , Monospace;
    background-color: #ff9933;
}

赤字部分を意訳すると、このような意味が書かれている。

『このファイルは、編集領域で使われるためのデフォルトCSSです。それは、エディタと背景色の最初のフォントを定めます。
ユーザーは編集領域で、もう一つのCSSファイルを読み込ませて使用することができます。カスタマイズでFCKConfig.EditorAreaCSSの価値を変えてください。』

ではと、気を取り直して

@import 'url(http://www.dakiny.com/style.css)';

とコード先頭に追記したが、またしてもダメ

FCKeditorの編集エリアでは、Movable Typeで設定したIDは認識しない。

なんでかな?と考えて出た結論は、CSSで設定したIDは、あくまでも表示画面のものであるので、FCKeditorの編集エリアでは認識しないんじゃないだろか？ということ。

僕は通常、下記のように、CSSを記述する。

#content img {
	border: solid 1px #CCCCCC;
	}

これを下記のように書き直して、直接「fck_editorarea.css」に追記してみた。

img {
	border: solid 1px #CCCCCC;
	}

大成功

既存ファイルを直接書き直すのはリスクが大きい。

初期設定ファイルを直接編集するのはリスクが大きいので、同じデレクトリにインポートCSSファイルを作るやり方をお勧めする。

たとえば、僕は「fck_editorarea.css」と同じデレクトリに、「custom.css」ファイルを作って置いた。

◇「custom.css」ソース（例）

/*
 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
 * Copyright (C) 2003-2008 Frederico Caldeira Knabben
 *
 * == BEGIN LICENSE ==
 *
 * Licensed under the terms of any of the following licenses at your
 * choice:
 *
 *  - GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 *
 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
 *    http://www.gnu.org/licenses/lgpl.html
 *
 *  - Mozilla Public License Version 1.1 or later (the "MPL")
 *    http://www.mozilla.org/MPL/MPL-1.1.html
 *
 * == END LICENSE ==
 *
 * このファイルはFCKeditorの編集エリアに、
 * 出力画面で利用しているCSSを追加するためのものです。
 *
 * あなたが、利用しているCMSのエントリーで利用するCSSを
 * この以下に追記してください。
 *
 * CSSを追記すれば、編集エリアで出力画面とほぼ同じ表示で
 * 編集が可能になります。
 *
 * なお、編集エリアで利用できるのはclassのみです。
 * IDはご利用になれません
 *
 */

/*リンク色制御*/

a {
text-decoration: none;
}

a:link {
    text-decoration:none;
    color: #3366cc;
    }

a:visited {
    text-decoration:none;
    color: #3366cc;
    }

a:active {
    color: #3366cc;
    }

a:hover {
    color: #2244cc;
    background-color: #D4ECFB;
    }


/*回り込み解除*/

.clear {
    clear: both;
    }


/*強調と、より強調の制御（斜体を太字に、太字を一回り大きな太字に変更）*/

em {
    font-weight: bold;
    font-style: normal;
    }

/*コンテンツブロック制御*/

#content {
    float: left;
    width: 539px;
    overflow: hidden;
    font-size: 86%;
    font-style: normal;
        font-family: Arial, Helvetica, Tahoma, "Trebuchet MS", Verdana,"ヒラギノ角ゴ Pro W3",Osaka,"メイリオ","ＭＳ Ｐゴシック", sans-serif;
    line-height: 150%;
    border-top: solid 0px #4477CE;
    border-right: solid 1px #4477CE;
    background-color: #FFFFFF;
    text-align: left;
    }


/*記事のタイトル*/

h3 {
    color: #996633;
    background-position: top left;
    font-family: Verdana, Arial, sans-serif;
    text-align: left;
    font-weight: bold;
    line-height: 1.2em;
    font-size: 120%;
    text-align: left;
    font-weight: bold;
    padding: 0px 0px 0px 0px;
    margin-bottom: 1em;
    margin-top: 0px;
    }

h4 {
    color: #464646;
    background-position: top left;
    font-family: Verdana, Arial, sans-serif;
    text-align: left;
    font-weight: bold;
    line-height: 1.2em;
    font-size: 110%;
    text-align: left;
    font-weight: bold;
    padding: 0px 0px 0px 0px;
    margin-bottom: 1em;
    margin-top: 0px;
    }


/*記事部分*/
p {
    color: #464646;
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
    text-align: left;
    padding: 0px 0px 0px 0px;
    margin-bottom: 1.5em;
    margin-top: 0px;
    }

del{
    color: #666666;
    }

ol {
    padding: 0px 8px 0px 28px;
    margin: 0px 0px 2em 0px;
    }

ul {
    padding: 0px 8px 0px 20px;
    margin: 0px 0px 2em 0px;
    }

li {
    color: #464646;
    padding: 0px 0px 0px 0px;
    margin-bottom: 0px;
    }

/*表制御*/

table {
    background-color: #FFFFFF;
    text-align: left;
    border-top: 1px solid #66CCFF;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 1px solid #66CCFF;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 2em;
    padding: 0px;
    }

th {
    background-color: #FFFFFF;
    color: #464646;
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
    font-size: 90%;
    line-height: 120%;
    border-top: 0px;
    border-right: 1px solid #66CCFF;
    border-bottom: 1px solid #66CCFF;
    border-left: 0px;
    margin: 0px;
    padding: 4px;
    }

td {
    background-color: #FFFFFF;
    color: #464646;
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
    font-size: 90%;
    line-height: 120%;
    border-top: 0px;
    border-right: 1px solid #66CCFF;
    border-bottom: 1px solid #66CCFF;
    border-left: 0px;
    margin: 0px;
    padding: 4px;
    }

/*引用*/

blockquote {
    background-color: #DDEDFF;
    text-align: left;
    line-height: 150%;
    margin-top: -5px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 2em;
    border-width: 1px;
    border-style: dashed;
    border-color: #66CCFF;
    padding: 8px;
}


/*整形*/

pre {
    overflow: auto;
    background-color: #DDEDFF;
    margin-top: -5px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 2em;
    border-width: 1px;
    border-style: dashed;
    border-color: #66CCFF;
    padding: 8px;
}

/*罫線*/

hr {
    color:#66CCFF ;
    border: 0;
    height: 1px;
    background-color:#66CCFF;
    margin-bottom: 2em;
    }


/*画像制御*/

img {
    border: solid 1px #CCCCCC;
    }

img.zero {
    border: solid 0px;
    }

img.left {
    float:left;
    margin: 0em 1.5em 1.0em 0em;
    border: solid 1px #CCCCCC;
    }

img.right {
    float:right;
    margin: 0em 0em 1.0em 1.5em;
    border: solid 1px #CCCCCC;
    }

.clear {
    clear: both;
    }

/*位置制御*/

div.center {
    margin: 0px 9px 2em 9px;
    text-align: center;
    }

div.em2 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 2em;
    margin-left: 0px;
    padding: 0;
}

次に、「fck_editorarea.css」のコード先頭に

@import 'custom.css';

と追記して完了。以上で、編集画面と、表示画面の表示がほぼ同じになる。
このハックをおこなえば、ブロガーも、Web屋さんも、Webマスターも、みんな幸せ

なお、FCKeditor  日本語ローライズ版の入手とインストール方法に関しては下記URLを読んでほしい。
http://www.dakiny.com/archives/movable-type/ajaxwysiwygfckeditor_26_mt/

FCKeditor日本語ローカライズ版、今後の開発に関する方向性

FCKeditor日本語ローカライズ版の仕様は極力汎用性を高めてはいるが、全ての人や環境に対応するのは無理だ。ハック情報はこのブログでFCKeditorを検索すれば出てくるので、参考にして、各自お好みに応じてハックして使ってほしい。また、今後もハック情報は掲載していく予定であるし、汎用性が高いと思えば、日本語ローカライズ版に組み込んでいく予定だ。

参考になれば幸い。

Movable Typeで、上記画像のような出力結果を得たいときは、どんな作成手段をとるといいだろう？

条件として、ブログ記事やウェブページを作成・修正するのは、HTMLをほとんど知らない顧客だと仮定する。
この場合、直接ソースをタイプする方法はもちろん、Dremaweaver等のWYSIWYGエディタは使えない可能性が高いので、カスタムフィールドに頼ることになるだろうが、テンプレートが複数のパターンになったらどうだろう？MTではなく、MTOSを使わなければならない場合はどうだろう？僕ならFCKeditorで解決する！

カスタムフィールドが使えないMTOSでも、FCKeditorを少しカスタマイズしてあげれば、HTMLに詳しくない人でも簡単にスタイリッシュなエントリーが作れるようになる。

というのが今日のコラムのテーマ。自由自在にエントリーを作りたいけど、HTMLのスキルを持ってない顧客を抱えているWeb制作会社の方とか、企業サイトの更新管理を任されるWeb担当者の方に贈る。

◆新規ブログ記事やウェブページの作成

1. ツールバーセットから、「テンプレート」を選び、任意のカスタムテンプレートを選んでクリックする。

2. 画像を変更したり、文言を修正して保存する。

予めテンプレートをきちんと作っておけば、たったこれだけで、エントリーは完成。とても簡単だ。
以下、カスタマイズ方法を説明。
※このテンプレートは僕が作ったものなので標準には含まれてない。

◆カスタムテンプレートの作り方

▼事前準備：ファイルマネージャーを使えるようにする。

「SourceForge.JP: FCKeditor Japan Project File List」から「FCKeditor_Customkit_v22.zip」をダウンロードする。

1.ダウンロードしたファイルを解凍して以下のファイルを探し

/mt-static/plugins/FCKeditor/fckeditor/editor/filemanager/connectors/php/config.php

33行目と40行目のパスを利用者のWebのファイル保存ディレクトリの環境に書き換える。

// Path to user files relative to the document root.
$Config['UserFilesPath'] = 'http://www.hoge.com/files/' ;

// Fill the following value it you prefer to specify the absolute path for the
// user files directory. Usefull if you are using a virtual directory, symbolic
// link or alias. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'.
// Attention: The above 'UserFilesPath' must point to the same directory.
$Config['UserFilesAbsolutePath'] = '/virtual/hoge/public_html/www.hoge.com/files/' ;

僕の例（赤字が変更部分）

// Path to user files relative to the document root.
$Config['UserFilesPath'] = 'http://www.dakiny.com/archives/' ;

// Fill the following value it you prefer to specify the absolute path for the
// user files directory. Usefull if you are using a virtual directory, symbolic
// link or alias. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'.
// Attention: The above 'UserFilesPath' must point to the same directory.
$Config['UserFilesAbsolutePath'] = '/virtual/dakiny/public_html/www.dakiny.com/archives/' ;

変更が完了したら保存してする。画像のアップロードだけならば、これだけで動作する。

2. mt-staticを上書きインストール。

3. ブラウザを再起動して確認。

フィルマネージャーを起動すると、設定した場所に、「image」という名のフォルダーが自動的に作られる。あらかじめ「image」フォルダーがある場合は、そこに画像がアップロードされる。
画像がアップロードできない場合は、パーミッションに問題がある場合が多いので、書き込み可にしてあげること。
参考まで、CORESERVER.JPを使ってる僕は755にしてある。

▼インストール前の注意

セーフモード対策で下記のファイルを同梱してある。

/mt-static/plugins/FCKeditor/fckeditor/editor/filemanager/connectors/php/.htaccess

不要な方はアップロード前に削除しないと不具合がでる。
※ローカルサーバーの場合はまず不要

▼カスタムテンプレートのファイル構造

FCKeditorのテンプレートは、XHTMLファイルと、アイコン画像に分けられる。

XHTMLソースの場所は下記

/mt-static/plugins/FCKeditor/fckeditor/fcktemplates.xml

アイコンは下記

/mt-static/plugins/FCKeditor/fckeditor/editor/dialog/fck_template/images/

にある。

▼カスタムテンプレートの作り方

1. アイコンを作る。画像ソフトで100px×70pxの大きさで作り、GIFで保存。
2. ソースを編集する。下記ソースをご覧いただきたい。

◇テンプレートのXMLファイルソース

カスタムテンプレートはXMLファイルにXHTMLを埋め込んで作る。下記ソースの文字背景に色がついている部分がカスタムテンプレートの１セット。

<?xml version="1.0" encoding="utf-8" ?>
<!--
 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
 * Copyright (C) 2003-2008 Frederico Caldeira Knabben
 *
 * == BEGIN LICENSE ==
 *
 * Licensed under the terms of any of the following licenses at your
 * choice:
 *
 *  - GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 *
 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
 *    http://www.gnu.org/licenses/lgpl.html
 *
 *  - Mozilla Public License Version 1.1 or later (the "MPL")
 *    http://www.mozilla.org/MPL/MPL-1.1.html
 *
 * == END LICENSE ==
 *
 * This is the sample templates definitions file. It makes the "templates"
 * command completely customizable.
 *
 * See FCKConfig.TemplatesXmlPath in the configuration file.
-->
<Templates imagesBasePath="fck_template/images/">
	<Template title="&#21830;&#21697;&#26696;&#20869;" image="template5.gif">
		<Description>&#24038;&#12459;&#12521;&#12512;&#12395;&#21830;&#21697;&#30011;&#20687;&#12289;&#21491;&#12459;&#12521;&#12512;&#12395;&#21830;&#21697;&#35500;&#26126;&#12364;&#20837;&#12426;&#12414;&#12377;&#12290;</Description>
		<Html>
			<![CDATA[
<div style="clear: both;">
<img style="margin: 0pt 20px 20px 0pt; float: left;" class="mt-image-left" src="http://localhost/mtos42rc1/files/image/works/nekomimi2b.gif" alt="ネコミミデザイン" title="ネコミミデザイン" height="150" width="200">
<div style="width: 255px;float: left;">
<ul>
<li><strong>&#39015;&#23458;</strong>&#65306;&#27598;&#26085;&#12467;&#12511;&#12517;&#12491;&#12465;&#12540;&#12471;&#12519;&#12531;&#12474;</li>
<li><strong>&#12459;&#12486;&#12468;&#12522;&#12540;</strong>&#65306;&#12487;&#12514;&#12469;&#12452;&#12488;</li>

<li><strong>&#20844;&#38283;&#26085;</strong>&#65306;2008&#24180;3&#26376;22&#26085;</li>
<li><strong>&#21033;&#29992;&#12471;&#12473;&#12486;&#12512;</strong>：Movable Type</li>
<li><strong>&#12467;&#12513;&#12531;&#12488;</strong>：&#26360;&#31821;&#12302;Movable Type &#12503;&#12525;&#12501;&#12455;&#12483;&#12471;&#12519;
&#12490;&#12523;&#12539;&#12473;&#12479;&#12452;&#12523;&#12288;MT4.1&#23550;&#24540;&#12303;&#12398;&#20013;&#12391;&#25945;
&#26448;&#12392;&#12375;&#12390;&#21033;&#29992;&#12377;&#12427;&#12469;&#12531;&#12503;&#12523;&#12469;&#12452;&#12488;&#12398;&#23436;&#25104;
&#21697;&#12391;&#12377;&#12290;<br>
&#12418;&#12385;&#12429;&#12435;MT4.1&#12391;&#27083;&#31689;&#12375;&#12289;&#27083;&#25104;&#12289;&#12487;&#12470;
&#12452;&#12531;&#12289;&#12452;&#12521;&#12473;&#12488;&#12289;&#12510;&#12540;&#12463;&#12450;&#12483;&#12503;&#12377;&#12409;&#12390;&#12362;
&#12371;&#12394;&#12387;&#12390;&#12356;&#12414;&#12377;&#12290;<br>
&#12510;&#12540;&#12463;&#12450;&#12483;&#12503;&#12399;W3C&#12398;&#22522;&#28310;&#12395;&#28310;&#25312;&#12375;&#12390;
&#12414;&#12377;&#12398;&#12391;&#12289;&#27491;&#30906;&#12373;&#12434;&#12372;&#30906;&#35469;&#12367;&#12384;&#12373;&#12356;&#12290;&#12450;
&#12463;&#12475;&#12471;&#12499;&#12522;&#12486;&#12451;&#12395;&#12418;&#27880;&#24847;&#12434;&#25173;&#12387;&#12390;&#12362;&#12426;&#12414;
&#12377;&#12289;&#12473;&#12479;&#12452;&#12523;&#12471;&#12540;&#12488;&#12434;&#12399;&#12378;&#12375;&#12390;&#12372;&#35239;&#12367;&#12384;
&#12373;&#12356;&#12290;<br>
&#26360;&#31821;&#12391;&#12399;&#12289;&#12459;&#12473;&#12479;&#12512;&#12486;&#12531;&#12503;&#12524;&#12540;&#12488;&#12475;&#12483;
&#12488;&#12391;&#37197;&#24067;&#12375;&#12390;&#12356;&#12414;&#12377;&#12290;</li>
<li><strong>URL</strong>：<a href="http://nekomimi.dakiny.com" target="_blank">http://nekomimi.dakiny.com</a></li>
</ul>
</div>
</div>
			]]>
		</Html>
	</Template>
</Templates>

グーレ文字の部分は触る必要はない。構造は以下。

<Template title="テンプレートのタイトル" image="hoge.gif">
    <Description>ここにはテンプレートの概要を記述する</Description>
        <Html>
            <![CDATA[
                任意のXHTMLソース
            ]]>
        </Html>
</Template>

仕組みさえ理解できれば、テンプレートを作るのはさほど難しくない。「任意のXHTMLソース」部分に、XHTMLを入力するだけで、かなり複雑なテンプレートでも容易に作成できる。
タグの中以外は、日本語は使えないので、対処方法としては「数値実体参照」を利用することになる。
数値実体参照の変換は下記サイト等を利用いただければいいだろう。

文字列 → 数値実体参照変換
http://yasu.asuka.net/orkut/conv.html

Unicode Number Entity Reference Converter
http://ideas.paunix.org/utfrefcon.htm

◆実際の出力結果

上記のテンプレートを利用すると、こんな画面になる。

• 顧客：毎日コミュニケーションズ
• カテゴリー：デモサイト
• 公開日：2008年3月22日
• 利用システム：Movable Type
• コメント：書籍『Movable Type プロフェッショ ナル・スタイル　MT4.1対応』の中で教 材として利用するサンプルサイトの完成 品です。
  もちろんMT4.1で構築し、構成、デザ イン、イラスト、マークアップすべてお こなっています。
  マークアップはW3Cの基準に準拠して ますので、正確さをご確認ください。ア クセシビリティにも注意を払っておりま す、スタイルシートをはずしてご覧くだ さい。
  書籍では、カスタムテンプレートセッ トで配布しています。
• URL：http://nekomimi.dakiny.com

◆まとめ：予算もスキルがない場合は、諦めるんじゃなくて、アイデアで勝負すればいい！

予算もスキルもない場合は、新規作成や修正は運用で解決しがちだが、「ちょっと待て！」と言いたい。運用解決は、顧客は妥協しているだけで満足はしていない。
まして、運用マニュアルを作るのは楽な仕事じゃない。簡単なようで実は大変な作業だ。スキルのない人が対象であるほど、きちんとしたマニュアルを作らねばならない。
そんな時は、まず他の方法がないかどうか考え抜くこと。FCKeditorをカスマイズしテンプレートを作れば、更新にスキルはほとんど必要ない。文字入力が出来て、画像のアップロードができる人なら、誰でもちょっとしたブログ記事やウェブページを作成することができる。

余談

実は、このブログに書いてあることは、6月21日に開催する、WebSig24/7MT4分科会第2回勉強会で行うワークショップの資料として作ったものだが、Open Sourceは利用者に対してもオープンであるべきなので、ワークショップに先行して一般公開とさせていただいた。

参考になれば幸い。