有限会社Willさんいん ホーム

サイトマップ

お問い合わせ

0852-28-6220(平日 9時30分から17時30分)

このページの位置: Home > フロントエンドエンジニアのblog > TinyMCE

フロントエンドエンジニアのblog

RSS

タグ: TinyMCE

ビジュアルエディタと公開画面で CSS を共有する

この記事は2016年7月22日に書かれたものです。情報が古い可能性がありますのでご注意ください。

WordPress の投稿画面のスタイルを実際のサイトの見た目に近づけるために、ビジュアルエディタ用の CSS を作成して管理画面に読み込ませることができますね。editor-style.css などとして CSS ファイルを用意し、functions.php の中で

add_editor_style("editor-style.css");

を記述することで、ビジュアルエディタにeditor-style.css が適用されます。

しかし、これでは記事部分の CSS を変更する際に、公開画面用の CSS とビジュアルエディタ用の CSS の両方を編集する必要があります。

そこで editor-style.css を公開画面と共有すると便利です。header.php の中で style.css と共に読み込ませるか、style.css の先頭で editor-style.css をインポートすればよいわけですが、記事部分を囲む要素の class 属性の値を工夫する必要があります。

“ビジュアルエディタと公開画面で CSS を共有する” の続きを読む »

TinyMCE のブロック要素とフォントサイズの選択肢

この記事は2015年7月16日に書かれたものです。情報が古い可能性がありますのでご注意ください。

WordPress の ビジュアルエディタ TinyMCE の機能を拡張するプラグインとして、TinyMCE Advanced が有名です。この TinyMCE Advanced、バージョンが 4.0 以上になってから更に使いやすくなり、挿入されるタグも非推奨タグが少なくなってきたように思います。まだ一部テーブル関連で非推奨属性が残っていますが。

この設定方法や使い方は、数々のブログ等で山ほど紹介されていますのでここでは書きませんが、ブロック要素の選択肢とフォントサイズの選択肢をもう少し踏み込んで設定するうえで、あまり情報が無かった以下の2件のカスタマイズ方法を紹介します。

  • ブロック要素(見出し)の選択肢を、投稿タイプによって切り替える
  • フォントサイズの選択肢を、ラベルを px、値を % で定義する

“TinyMCE のブロック要素とフォントサイズの選択肢” の続きを読む »

このページの先頭へ