WordPressでよく使われるプラグイン、TinyMCE Advanced。
基本の設定でclass名やid名を追加できる属性アイコンがあるんですが、そこに独自のclass名やid名を追加する方法です。
この設定をすると記事を書く方は決まったclass名等を選択すればいいだけなのでHTMLのタグやclass属性を書かなくていいのでクライアントワークとして使うのが一般的でしょう。
目次
TinyMCE Advancedの設定方法
editor-style.cssを作成
style.css等をおいているテーマフォルダに「editor-style.css」という名前のCSSファイルを作成します。
※元々のテーマに既にある場合も有り。その場合は新しく作る必要はありません
editor-style.cssを読み込むため管理画面から設定
管理画面の設定→TinyMCE Advancedから下の図の部分「Import editor-style.css」にチェックをいれる。保存忘れずに。
プルダウンに表示される
投稿画面に戻り、アイコン「属性の挿入/削除」をクリック
すると、ウィンドウが開き、「クラス」セクションのプルダウンメニューの中に先ほど作ったeditor-style.cssに書いたクラス名が出現しました。
クラス名を選択し「挿入」をクリック。プレビューでcssが適用されています。（今回はfont-size: 40px;としてみた）
保存して確認してみる
保存してちゃんとCSSが適用されているか確認してみましょう。記事をプレビューします。以下の図のように作成したCSSが適用されました。
まとめ
クライアントワークでいちいちclass名をクライアント側で打つというのは知識がない限り難しいので、こういうツールを使ってだれでもできるようにしてあげるというのは更新の壁を低くするという点で使えますね。
作ったら終わり…ではなく更新する人の立場やスキルに合わせてカスタマイズする気持ちが大事なのでは、、、と思います。
