Untitled
※にっくさんへ
Jiraでは画像のURLを「!」ではさむと、画像がそのままインラインで表示されます。下記文面はすでに「!」ではさんでます
——————————————————————-
開発チームのみなさんはご存じのことと思いますが、投稿画面のtextareaは自由にカスタマイズすることができます。
!http://farm3.static.flickr.com/2557/3802793543_3aa5d529a2_o.png!
デフォルトではこのようになっていますが
!http://farm3.static.flickr.com/2424/3802793547_380cc4a8cd_o.png!
このようにカスタマイズできます。
方法は簡単、Tools→System configurationの「Path to CSS file」に投稿画面用のスタイルシートファイルのパスを記述するだけです。
※スタイルシートのパスを仮想パスで記述する場合は、下記の対応が必要です。
http://svn.modxcms.com/jira/browse/TINYMCE-21
しかし多くのユーザは、このようなカスタマイズが可能であることに気付いてません。MODxインストール直後のデフォルトでこのようなカスタマイズを施しておくことで、「どうやってこのようなカスタマイズを実現しているのか？」という興味と関心を呼び起こすことができます。
今回提案する方法は、サイトで利用しているスタイルシートと投稿画面で用いるスタイルシートを共用するノウハウです。この方法は実際に試してみてうまくいかなかった人がきっと多いと思います。
以下に解説します。もしよければ日本チームでファイル一式を作って提供します。
●参考サイト
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/body_id
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/body_class (今回は使わない)
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/content_css
(MODxでは「Path to CSS file」として、すでに実装済み)
●考え方
投稿画面をカスタマイズするには、基本的にはTinyMCEのcontent_cssオプションで関連づけられたスタイルシートにスタイルを定義します。この場合、少し考えると分かると思いますが、セレクタ表現を用いることはできません。たとえば「class=contentブロックの中のp要素」といった指定を入れると、その指定は投稿画面には反映されません。
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/content_css
上記ページの末尾を見ると分かると思いますが、TinyMCEの投稿画面は仮想的に「body.mceContentBody」の直下に出力されていることになっています。この「.mceContentBody」の部分を、サイトのスタイルシートと合わせるとよいでしょう。
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/body_id
上記オプションを指定することで、「.mceContentBody」を、MODxHostテンプレートで利用されている「#content」に置き換えることができます。
●手順
「content.css」などの適当な名前でスタイルシートを新規作成し、MODxHostディレクトリ内に置きます。そしてMODxHostテンプレートで利用されているlayout.cssを開き、#content関係の記述を全てcontent.cssに移動します。
!http://farm4.static.flickr.com/3459/3802880673_9525822058_o.png!
次に、TinyMCEプラグインの設定画面を開き、Configurationタブの「Custom Parameters」に「body_id : “content”,」と記述します。
次に、Tools→System configurationの「Path to CSS file」に、content.cssのパスを設定します。
この時点で投稿画面のスタイルは適用されています。
次に、MODxHostテンプレートの編集画面を開き、
<link rel=”stylesheet” href=”assets/templates/modxhost/content.css” type=”text/css” media=”screen” />
このように追記します。
以上で、サイトと投稿画面で共用できるスタイルシートの作成と、その共用設定は完了です。
そして、これらの設定がMODx導入時に適用されるように、MODxのインストーラを改修します。
