世界中の１％の人々へ

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

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をきちんと理解している人なら、誰でもカスタマイズできるようドキュメントを書いたつもりなので、時間を作って挑戦してみてほしい。

参考になれば幸い。