■担当者：蒲生トシヒロ
■目 的：カスタムフィールドの使えないMTOSにおいて、高機能WYSIWYGエディタであるMT-Plugin-FCKeditor-1.2.ja Ver.2の機能を使い、任意のカスタムテンプレートを作り、エントリー入力をおこないやすいものとします。
■参加対象：業務でMovable Typeを扱い。エンドユーザーに更新を任せたい方
■参加資格：HTML＋CSSが使える人ならOK
■ゴール：
FCKeditorを使って任意のカスタマイズテンプレートの作り方を覚えてもらえばOK！
■Agenda
１．FCKeditorのインストール
２．FCKeditorの構造解説
３．テンプレート機能を使うためのFCKeditorのカスタマイズ
４．テンプレート画像作成
５．テンプレート作成
６．動作確認
■事前準備
XAMPPかMAMPでローカルサーバーを用意してくること
Movable Type Open Source 4.2をインストールしてくること
※MTOS4.2のバージョンはその時点のもので構いません。
MT-Plugin-FCKeditor-1.2.ja Ver.2をインストールまではすませておくこと
http://
○XAMPP for WindowsにImageMagickを設定する方法は下記をご覧になるか、書籍「Movable Type プロフェッショナル・スタイル」の301頁以降をお読みください。
http://
■参加者課題
作りたいテンプレートを用意してくること。
プレーンなHTML＋CSS（極力style利用のこと）で用意してきてください。
■その他
参加者人数分の資料は用意します。
当日の成果物は、クリエイティブ・コモンズライセンスの「表示ー非営利ー改変禁止 2.1 日本 ライセンス」で配布ということで、ご了承願います。
■目 的：カスタムフィールドの使えないMTOSにおいて、高機能WYSIWYGエディタであるMT-Plugin-FCKeditor-1.2.ja Ver.2の機能を使い、任意のカスタムテンプレートを作り、エントリー入力をおこないやすいものとします。
■参加対象：業務でMovable Typeを扱い。エンドユーザーに更新を任せたい方
■参加資格：HTML＋CSSが使える人ならOK
■ゴール：
FCKeditorを使って任意のカスタマイズテンプレートの作り方を覚えてもらえばOK！
■Agenda
１．FCKeditorのインストール
２．FCKeditorの構造解説
３．テンプレート機能を使うためのFCKeditorのカスタマイズ
４．テンプレート画像作成
５．テンプレート作成
６．動作確認
■事前準備
XAMPPかMAMPでローカルサーバーを用意してくること
Movable Type Open Source 4.2をインストールしてくること
※MTOS4.2のバージョンはその時点のもので構いません。
MT-Plugin-FCKeditor-1.2.ja Ver.2をインストールまではすませておくこと
http://
○XAMPP for WindowsにImageMagickを設定する方法は下記をご覧になるか、書籍「Movable Type プロフェッショナル・スタイル」の301頁以降をお読みください。
http://
■参加者課題
作りたいテンプレートを用意してくること。
プレーンなHTML＋CSS（極力style利用のこと）で用意してきてください。
■その他
参加者人数分の資料は用意します。
当日の成果物は、クリエイティブ・コモンズライセンスの「表示ー非営利ー改変禁止 2.1 日本 ライセンス」で配布ということで、ご了承願います。
|
|
|
|
コメント(13)
cremaこと、黒野明子と申します。
東京都在住のフリーランスWebデザイナーで、Movable Type無しには生きていけない身体です。
▼こんな書籍の執筆に参加いたしました。
「CMSとして使うMovable Typeガイドブック 」
http://www.amazon.co.jp/dp/4798113174/
「Movable Type プロフェッショナル・スタイル MT4.1対応」
http://www.amazon.co.jp/dp/4839927537/
しかし、AltTemplateについては知らないことばかりですので、
これを機会にしっかり学習させていただこうと思っております！
皆さま、どうぞよろしくお願い申し上げます。
東京都在住のフリーランスWebデザイナーで、Movable Type無しには生きていけない身体です。
▼こんな書籍の執筆に参加いたしました。
「CMSとして使うMovable Typeガイドブック 」
http://www.amazon.co.jp/dp/4798113174/
「Movable Type プロフェッショナル・スタイル MT4.1対応」
http://www.amazon.co.jp/dp/4839927537/
しかし、AltTemplateについては知らないことばかりですので、
これを機会にしっかり学習させていただこうと思っております！
皆さま、どうぞよろしくお願い申し上げます。
こんばんは、yoshiといいます。
分科会当日に、仕事の時間が空いたので突然参加させていただきました。
Dakinyさんのテーブルではなかったのですが、Dakinyさんのテーブルのお題は帰宅後独自にクリアしました。
以下自分のとこからの転載です。
--------------------------------------------------------------------------
昨日帰り際、Dakinyさんから「僕のお題もやってよね」と言われました。
ワークショップが始まる前も、実はFCKEditorでの動作画面を見せてもらいました。
いや実は私は日記ではないエントリは全て手書きマークアップするんです。なのでWYSIWYGエディタの類は全く使用しないのですが...
ただ、私が、サービスを提供する立場であると仮定すると、「できません」では済まされないことのような気がする（というか、知らなくてもいいんだろうけど、知ってれば強みのひとつになるか？）ので、やってみようか、と思い立ちました。
手順：
【MT4分科会第2回勉強会】FCKeditorを使ったカスタムテンプレートの作成
http://mixi.jp/view_bbs.pl?id=30907083&comm_id=2486638
ここの関連リンクのとおりにすれば、できると思います。手順や設定は細かくて少し面倒ではありますが、ドキュメントをよく読んで、丁寧に進めればできるはず。
自作テンプレート作りました：
まず画像をおき、dl、dt、ddでリストを作るテンプレートを試作。キャプチャ画像はこの追加したテンプレート。コードは以下。
※実際は、日本語は実体参照にしている
<Template title="テストテンプレート" image="test.gif">
<Description>FCKEditorのテンプレートテスト。</Description>
<Html>
<![CDATA[
<img width="200" height="150" src="hoge" alt="画像説明" title="画像タイトル" />
<dl>
<dt>商品名</dt>
<dd>ここを書き換えます</dd>
<dt>メーカー</dt>
<dd>ここを書き換えます</dd>
<dt>在庫状況</dt>
<dd>ここを書き換えます</dd>
<dt>価格</dt>
<dd>ここを書き換えます</dd>
<dt>納期</dt>
<dd>ここを書き換えます</dd>
<dt>説明</dt>
<dd>ここを書き換えます</dd>
</dl>
]]>
</Html>
</Template>
後記：
パスが深いので、設定とか画像ファイルコピーとか少々面倒なところがあります。仕方がないです（私が嫌いなもの：にょろにょろケーブルの山、深いIfネスト、深いフォルダ）。
あと、全角日本語を実体参照文字に変換するとこが非常に面倒。ただ、これはテンプレートを作成するときのみ一回なんで、さほど問題にならないかと思います。
あと、普段ブラウザにはFireFox2.0.0.14を使用しておりますが、それだとテンプレートのボタンが表示されません。理由はわかりません。IE7でやるとうまくいきました。
学習〜実装完了まで、所要時間は、3時間です。
（まだたいして使ってはおりませんが）このFCKEditorエディタは、MT標準のものよりいいです。高機能です。
今後の課題：
1.エディタのテキストフィールドの高さが少し低い（狭い）ので、初期値で広げてあげておくと使いやすい気がします。
デフォルトは恐らく194pxです。MTOS内部を調べましたが、disp_prefs_height_bodyという変数が気になります。
2.テンプレート内に記述する、全角文字を実体参照にせねばいけない点。やはり面倒と感じます。どうにかならないだろうか？
--------------------------------------------------------------------------
それで、その後、Dakinyさんから
「<dl><dt><dd>のstyle指定がほしいところです。」
「以下、「今後の課題」についてですが、
１．の、初期値はMTが記憶しますので、最初に広げてあげれば問題ないと思います。
２．の、実体参照については、ja.jsに記述してあげる手もないではないですが、最初に作って使い回すものですから、複雑なものでも1時間とかからず、修正できます。 」
というアドバイスをいただきました。
ありがとうございます。
分科会当日に、仕事の時間が空いたので突然参加させていただきました。
Dakinyさんのテーブルではなかったのですが、Dakinyさんのテーブルのお題は帰宅後独自にクリアしました。
以下自分のとこからの転載です。
--------------------------------------------------------------------------
昨日帰り際、Dakinyさんから「僕のお題もやってよね」と言われました。
ワークショップが始まる前も、実はFCKEditorでの動作画面を見せてもらいました。
いや実は私は日記ではないエントリは全て手書きマークアップするんです。なのでWYSIWYGエディタの類は全く使用しないのですが...
ただ、私が、サービスを提供する立場であると仮定すると、「できません」では済まされないことのような気がする（というか、知らなくてもいいんだろうけど、知ってれば強みのひとつになるか？）ので、やってみようか、と思い立ちました。
手順：
【MT4分科会第2回勉強会】FCKeditorを使ったカスタムテンプレートの作成
http://mixi.jp/view_bbs.pl?id=30907083&comm_id=2486638
ここの関連リンクのとおりにすれば、できると思います。手順や設定は細かくて少し面倒ではありますが、ドキュメントをよく読んで、丁寧に進めればできるはず。
自作テンプレート作りました：
まず画像をおき、dl、dt、ddでリストを作るテンプレートを試作。キャプチャ画像はこの追加したテンプレート。コードは以下。
※実際は、日本語は実体参照にしている
<Template title="テストテンプレート" image="test.gif">
<Description>FCKEditorのテンプレートテスト。</Description>
<Html>
<![CDATA[
<img width="200" height="150" src="hoge" alt="画像説明" title="画像タイトル" />
<dl>
<dt>商品名</dt>
<dd>ここを書き換えます</dd>
<dt>メーカー</dt>
<dd>ここを書き換えます</dd>
<dt>在庫状況</dt>
<dd>ここを書き換えます</dd>
<dt>価格</dt>
<dd>ここを書き換えます</dd>
<dt>納期</dt>
<dd>ここを書き換えます</dd>
<dt>説明</dt>
<dd>ここを書き換えます</dd>
</dl>
]]>
</Html>
</Template>
後記：
パスが深いので、設定とか画像ファイルコピーとか少々面倒なところがあります。仕方がないです（私が嫌いなもの：にょろにょろケーブルの山、深いIfネスト、深いフォルダ）。
あと、全角日本語を実体参照文字に変換するとこが非常に面倒。ただ、これはテンプレートを作成するときのみ一回なんで、さほど問題にならないかと思います。
あと、普段ブラウザにはFireFox2.0.0.14を使用しておりますが、それだとテンプレートのボタンが表示されません。理由はわかりません。IE7でやるとうまくいきました。
学習〜実装完了まで、所要時間は、3時間です。
（まだたいして使ってはおりませんが）このFCKEditorエディタは、MT標準のものよりいいです。高機能です。
今後の課題：
1.エディタのテキストフィールドの高さが少し低い（狭い）ので、初期値で広げてあげておくと使いやすい気がします。
デフォルトは恐らく194pxです。MTOS内部を調べましたが、disp_prefs_height_bodyという変数が気になります。
2.テンプレート内に記述する、全角文字を実体参照にせねばいけない点。やはり面倒と感じます。どうにかならないだろうか？
--------------------------------------------------------------------------
それで、その後、Dakinyさんから
「<dl><dt><dd>のstyle指定がほしいところです。」
「以下、「今後の課題」についてですが、
１．の、初期値はMTが記憶しますので、最初に広げてあげれば問題ないと思います。
２．の、実体参照については、ja.jsに記述してあげる手もないではないですが、最初に作って使い回すものですから、複雑なものでも1時間とかからず、修正できます。 」
というアドバイスをいただきました。
ありがとうございます。
>> 「<dl><dt><dd>のstyle指定がほしいところです。」
>は、時間がありましたら、是非よろしくお願いします。
できました。
ちょっと時間がないので、調整が甘いかもですが（dtのアンダーラインがなかった！）
このような感じで行けばよい、というのはわかりました。
<Template title="テストテンプレート" image="test.gif">
<Description>FCKEditorのテンプレートテスト。</Description>
<Html>
<![CDATA[
<img width="200" height="150" src="hoge" alt="画像説明" title="画像タイトル" />
<dl>
<dt style="margin: 18px 0 3px 0;padding: 0;line-height: 130%;border-left: #cdcdcd 5px olid; font-size: 100%;font-weight: bold;">商品名</dt>
<dd style="margin: -1.5em 4px 10px 8em;padding: 0;line-height: 130%;border-bottom: #666666 1px dotted">ここを書き換えます</dd>
<dt style="margin: 18px 0 3px 0;padding: 0;line-height: 130%;border-left: #cdcdcd 5px olid; font-size: 100%;font-weight: bold;">メーカー</dt>
<dd style="margin: -1.5em 4px 10px 8em;padding: 0;line-height: 130%;border-bottom: #666666 1px dotted">ここを書き換えます</dd>
<dt style="margin: 18px 0 3px 0;padding: 0;line-height: 130%;border-left: #cdcdcd 5px olid; font-size: 100%;font-weight: bold;">在庫状況</dt>
<dd style="margin: -1.5em 4px 10px 8em;padding: 0;line-height: 130%;border-bottom: #666666 1px dotted">ここを書き換えます</dd>
<dt style="margin: 18px 0 3px 0;padding: 0;line-height: 130%;border-left: #cdcdcd 5px olid; font-size: 100%;font-weight: bold;">価格</dt>
<dd style="margin: -1.5em 4px 10px 8em;padding: 0;line-height: 130%;border-bottom: #666666 1px dotted">ここを書き換えます</dd>
<dt style="margin: 18px 0 3px 0;padding: 0;line-height: 130%;border-left: #cdcdcd 5px olid; font-size: 100%;font-weight: bold;">納期</dt>
<dd style="margin: -1.5em 4px 10px 8em;padding: 0;line-height: 130%;border-bottom: #666666 1px dotted">ここを書き換えます</dd>
<dt style="margin: 18px 0 3px 0;padding: 0;line-height: 130%;border-left: #cdcdcd 5px olid; font-size: 100%;font-weight: bold;">説明</dt>
<dd style="margin: -1.5em 4px 10px 8em;padding: 0;line-height: 130%;border-bottom: #666666 1px dotted">ここを書き換えます</dd>
</dl>
]]>
</Html>
</Template>
>は、時間がありましたら、是非よろしくお願いします。
できました。
ちょっと時間がないので、調整が甘いかもですが（dtのアンダーラインがなかった！）
このような感じで行けばよい、というのはわかりました。
<Template title="テストテンプレート" image="test.gif">
<Description>FCKEditorのテンプレートテスト。</Description>
<Html>
<![CDATA[
<img width="200" height="150" src="hoge" alt="画像説明" title="画像タイトル" />
<dl>
<dt style="margin: 18px 0 3px 0;padding: 0;line-height: 130%;border-left: #cdcdcd 5px olid; font-size: 100%;font-weight: bold;">商品名</dt>
<dd style="margin: -1.5em 4px 10px 8em;padding: 0;line-height: 130%;border-bottom: #666666 1px dotted">ここを書き換えます</dd>
<dt style="margin: 18px 0 3px 0;padding: 0;line-height: 130%;border-left: #cdcdcd 5px olid; font-size: 100%;font-weight: bold;">メーカー</dt>
<dd style="margin: -1.5em 4px 10px 8em;padding: 0;line-height: 130%;border-bottom: #666666 1px dotted">ここを書き換えます</dd>
<dt style="margin: 18px 0 3px 0;padding: 0;line-height: 130%;border-left: #cdcdcd 5px olid; font-size: 100%;font-weight: bold;">在庫状況</dt>
<dd style="margin: -1.5em 4px 10px 8em;padding: 0;line-height: 130%;border-bottom: #666666 1px dotted">ここを書き換えます</dd>
<dt style="margin: 18px 0 3px 0;padding: 0;line-height: 130%;border-left: #cdcdcd 5px olid; font-size: 100%;font-weight: bold;">価格</dt>
<dd style="margin: -1.5em 4px 10px 8em;padding: 0;line-height: 130%;border-bottom: #666666 1px dotted">ここを書き換えます</dd>
<dt style="margin: 18px 0 3px 0;padding: 0;line-height: 130%;border-left: #cdcdcd 5px olid; font-size: 100%;font-weight: bold;">納期</dt>
<dd style="margin: -1.5em 4px 10px 8em;padding: 0;line-height: 130%;border-bottom: #666666 1px dotted">ここを書き換えます</dd>
<dt style="margin: 18px 0 3px 0;padding: 0;line-height: 130%;border-left: #cdcdcd 5px olid; font-size: 100%;font-weight: bold;">説明</dt>
<dd style="margin: -1.5em 4px 10px 8em;padding: 0;line-height: 130%;border-bottom: #666666 1px dotted">ここを書き換えます</dd>
</dl>
]]>
</Html>
</Template>
- mixiユーザー
- ログインしてコメントしよう！
|
|
|
|
WebSig24/7 MT4分科会 更新情報
-
最新のアンケート
-
まだ何もありません
-
WebSig24/7 MT4分科会のメンバーはこんなコミュニティにも参加しています
人気コミュニティランキング
- 1位
- アラフォーからのアニカラ部
- 1154人
- 2位
- 写真を撮るのが好き
- 209915人
- 3位
- 30代〜40代から友達作り【友活】
- 35310人