CMSコミュニケーションズの寺田さんから、Zope/Ploneアドベントカレンダーのバトンがまわってきました。

幸いにも今日はZope/Plone開発勉強会。この場を借りていろいろ調べることができました。

テーマは、kupuの編集画面の「スタイル一覧」のプルダウンのカスタマイズです。Plone は最新の3.2.2 を使います。

その１：タグを追加する

ヘッダ最上部のテキストリンクの一番右「サイト設定」をクリックして、サイト設定画面を表示。Visial Editor を選択し、「Kupuツールバー設定」を表示します。localhostにインストールしたときのパスは http://localhost:8080/Plone/kupu_library_tool/kupu_config となります。
この画面の「スタイル」のグループにある「パラグラフスタイル」の項を見てください。

ここを変更していきます。
初期状態ではパラグラフスタイルは以下のようになっています。

Heading|h2
Subheading|h3
Literal|pre
Discreet|p|discreet
Pull-quote|div|pullquote
Call-out|p|callout
Highlight|span|visualHighlight
Odd row|tr|odd
Even row|tr|even
Heading cell|th|
Page break (print only)|div|pageBreak
Clear floats|div|visualClear

ここでの記述は

[プルダウンの表示名称]|[タグ]|[クラス名] 

という構造になっています。

ここを以下のようにして、保存してみました。

中見出し|h2
小見出し|h3
さらに小見出し|h4
もっと小見出し|h5
ソース|pre
ひかえめ|p|discreet
Pull-quote|div|pullquote
注意|p|callout
ハイライト表示|span|visualHighlight
奇数行|tr|odd
偶数業|tr|even
見出しセル|th|
Page break (print only)|div|pageBreak
フロートをクリア|div|visualClear

すると、kupuのプルダウンがこんなふうになります。

編集画面で設定し、保存するとこういうふうになります。

プルダウンの項目名に日本語も通りました。

その２：スタイルを追加する

プリセットの設定項目だけでは満足行かないことが多いと思います。例えば文字色を変えたいとか。

それをやってみます。

(1) kupuのパラグラフスタイルにタグとスタイルのペアを追加

まず、先ほどの「Kupuツールバー設定」画面の「パラグラフスタイル」に項目を追加します。今回は「ハイライト表示|span|visualHighlight」の下に「強調赤|span|red」を追加しました。

これで編集画面では「強調色赤」が設定できるようになりますが、スタイル定義がないのでまだ赤で表示されません。

(2) span class="red" に対応するスタイル定義を作成

いろいろやり方はあるのですが、ZOPE管理画面でやります。

サイト設定 -> Zope管理インターフェース(ZMI)  を選択します。
（画面の後ろのURLはlocalhostにインストールした場合）
以下の画面  http://localhost:8080/Plone/manage_main が表示されます。
(chart6)
"portal_skins (Controls skin behaviour (search order etc))"をクリック

http://localhost:8080/Plone/portal_skins/manage_main
(chart7)
plone_stylesをクリック

http://localhost:8080/Plone/portal_skins/plone_styles/manage_main
(chart8)
ploneCustom.cssをクリック

http://localhost:8080/Plone/portal_skins/plone_styles/ploneCustom.css/manage_main が表示されるので、"Customize" ボタンをクリック。

編集画面が表示されるので、

/* DELETE THIS LINE AND PUT YOUR CUSTOM STUFF HERE */

のところを消して、以下を追加

.red {
    color : #FF0000;
} 

(chart10)

前後の

/* <dtml-with base_properties> (do not remove this :) */
/* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either :) */

/* </dtml-with> */

これらを消すと動かなくなるので要注意です。
「Save changes」をクリック。

(3) CSSがすぐに変更されるようにちょっと細工する

サイト設定 -> Zope管理インターフェース(ZMI)
http://localhost:8080/Plone/manage_main

"portal_css (CSS Registry)"をクリック

 "Debug/development mode"をチェックして、画面最下部の"Save" をクリック

画面を再表示するとこんな感じ

「強調赤」の追加完了です。

• 一覧表にタグを追加するのは簡単だけど、cssの変更はちょっと慣れが必要ですね。
• ちなみに、Safariではkupuでspanを使おうとすると <span Apple-style-span>という余分なタグが挿入され、class=redが正しく入らないという妙な現象があるので、使わない方が無難。これは他のTinyMCEなど他のVisualEditorでも同様だと思います。
• cssが反映されないところを寺田さん、たかのりさんに助けてもらいました。ありがとうございました。
  

お、次のバトンはどうしようかな。

ytakeuchi さんお願いしまーす