PCリンクスでは、パソコンの設定・修理から組込み機器の受託開発まで承ります。

 

ビジュアルエディタにテーマのCSSを適用し実際の表示に合わせる

 ビジュアルエディタを使用して記事を作成する場合、実際の投稿画面と表示が異なり、記事の作成中に何度か「変更をプレビュー」で確認しないいけません。この手間を無くす良い手段があります。

editor 295x300 ビジュアルエディタにCSSを適用

 

ビジュアルエディタの表示に、実際の表示に使用するスタイルシートの一部分をコピーして、個別に指定します。すると、実際の表示と同じイメージで表示することが出来ます。

ビジュアルエディタで、見出し等をこのように表示させることができます。 (実際の表示と同じイメージで確認できます)

ビジュアルエディタにCSSを適用

ビジュアルエディタにスタイルシートを適用するために、TinyMCE Advanced プラグインの設定を変更します。
WordPressにログインし、管理画面からプラグインの設定を変更します。変更箇所は、Advanced Options設定の[Import editor-style.css.]にチェックを入れて、設定を保存するでけで、CSSを適用することができます。

tinyMCE1 ビジュアルエディタにCSSを適用

スタイルシート(editor-style.css)の新規作成

テーマファイルのスタイルシートが保存されているディレクトリへ”editor-style.css”ファイルを設置します。
新規にファイルを作成し、スタイル指定を記述します。当方は、見出しと表組みの書式等を記述しました。
テーマのスタイルシートから、必要な部分をカット&ペーストすれば簡単に、指定することができます。

デフォルト状態での表示を下記に示します。

editor style none ビジュアルエディタにCSSを適用

スタイルシートを使用した場合の表示を下記に示します。

  editor style ビジュアルエディタにCSSを適用

実際の表示を以下に示します。実際の表示とビジュアルエディタ上の表示を、ほぼ合わせることができました。

real style ビジュアルエディタにCSSを適用

以上で、「WPでエディタ上の表示をCSS指定」を終了します。

コメント

コメントを受け付けておりません。