日別アーカイブ: 2011/03/06

備忘録:tinymce-advancedのスタイル機能を勉強してみる

今回はwordpressの記事投稿のおともに、tinymce-advanced!そんな代名詞も聞こえてきそうなくらい便利なプラグイン、tinymce-advancedの拡張機能「スタイル」を勉強。 で、このスタイルという機能。記事に個別のCSSをclass指定で付加してくれるというものです。 設定は簡単! tinymce-advancedのプラグイン設定メニューから「スタイル」をドラップドロップするだけ! これだけで「スタイル」が使えるようになります。※ここ重要 ここからが大変。 自分が使うであろうclassのCSSをこのtinymce-advancedのCSSと本体のCSSに書き込まないといけません!2つにですよ?2つに!編集めっさめんどくせぇ(´△` ) どっちか間違ってるだけで反映されません。 さらにtinymce-advancedのCSSが合ってて、本体CSSが間違ってると、記事投稿編集画面ではtinymce-advancedのCSSなのでちゃんと出ますが記事をアップロードすると本体のCSSに切り替わるので=間違ってる場合、出てこない。 確認めんどいわっ!(ノ▽`) あ、言うのがわすれましたが、tinymce-advancedのCSSは wp-content/plugins/tinymce-advanced/css/tadv-mce.css ←このCSSに設定したいclassを書き込んでいきます。 んで書き込んだらそれを本体のCSSにもコピーを忘れずに。 そうすると、記事編集画面でスタイルを押せば、設定したCSSがドロップダウンで一覧表示されます。 で、文字を選択したりカーソルを置いたりで設定できるわけですが。 どうやらこのclassスタイル。<span>属性に付くみたいで、CSSにbackground-imgってやるとちょっと大変。 文字サイズになるんでdisplay:block;をやらないといけなくなるんですが、 このdisplay:block;でpaddingをやろうもんならgooglechomeで壊れるわけですね。 これで職場のワードプレスのデザインは一苦労でした。(俺の知識不十分なだけで打開策ありそうですが) だので、基本font関係、text関係で作ったほうが難なんですかねー。 編集楽だし。画像はもう打ちこめって感じ? さて、備忘録っていうか半分愚痴になった気もしますが、とりあえずこんな感じかなー。 twitterにも簡単に愚痴って書き込んでますので、そちらを見るとわかりやすいか、も?

カテゴリー: wordpress, プラグイン | コメントをどうぞ