備忘録: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, プラグイン   パーマリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>