WordPress editor-style エディタと実際の記事の表示を同じにする
WordPressには記事投稿の際のエディタ（編集する”Edit”為のソフト）に
「ビジュアルエディタ」と「テキストエディタ」があります。
WEB上のサイト運営を「ブログ」からスタートした方は
「ビジュアルエディタ」が慣れ親しいものだと思います。便利ですものね。
私はPCでメモを取る時やhtmlファイルをちょっとだけ更新する時等に、
TeraPadというテキストエディタを多用しているので、
記事を投稿する時、下書きする時はTeraPadを使う感覚で
普段は「テキストエディタ」で編集しています。
でも「ビジュアルエディタ」を全然使用しない訳ではないです。
TinyMCE Advanced をインストールしてからは、テキストカラー＋背景色を付けたい時や
フォントの字体（フォントファミリー）を変えたい時等は、
「ビジュアルエディタ」は重宝しますので切り替えて使っています。
「ビジュアルエディタ」を使う目的の一つに
「簡単にプレビュー出来る」という事があると思います。
「テキストエディタ」で書いていても「今、どんな感じに表示されるかな?」と、
気になる時、視覚的に確認できるのは便利です。
ですが、CSSで、自分の書きなように見た目のデザインを変更した場合
ビジュアルエディタに切り替えても、同じように表示されません。
スタイル変更をすると、ビジュアルエディタと実際の見た目が違う。
これを解消してエディタと実際の記事の表示を同じにし、使いやすくしたいと思います。
先ずは、前記事同様に（この記事自体が前記事からの続きになっています😓）
前記事参考リンク⇓
最強のテーマSimplicityが実装されており、(2015/11/05追記*最新バージョン：1.9.0 20151012でもOK)
且つSimplicityの子テーマが有効化されている事を前提として記載していますので、
予め、ご了承頂けますよう。
Simplicity、子テーマのビジュアルエディターのスタイルシート(editor-style.css)を使います。
Simplicityダウンロードページ Simplicityの子テーマ
（ダウンロードしインストールする方法はこちらでレクチャーされています。）
因みにインストール方法はWordPress内でインストールする方法が書かれていますが、
pcにもZIPファイルを保存しておくと、後々役に立ったりします。
エディタと実際の記事の表示を同じにするには
Simplicityの子テーマには前記事でも書きましたが、
参考記事⇓
空のビジュアルエディターのスタイルシート(editor-style.css)があります。
このeditor-style.cssに、style.cssで書いた、見た目のデザイン変更を書き足してやります。
Simplicity子テーマ、ビジュアルエディターのスタイルシート(editor-style.css)の編集ページ
Simplicity子テーマのビジュアルエディターのスタイルシートの編集ページは、
ダッシュボードの「外観」項目内、一番下の「テーマの編集」をクリックすると
以下の画像の様に
「Simplicity child: ビジュアルエディターのスタイルシート (editor-style.css)」が開きます。
Simplicity child: ビジュアルエディターのスタイルシート (editor-style.css)
この編集ページに、自分が変更した見た目のデザインの記述を書きます。
※見出し部分（hタグ）はstyle.cssからのコピペだけでは駄目なので変更して書きます。
articleクラス(.article )を書かない。
「クラスって何?」と気になる方は、”css リファレンス“等とググると
沢山解説サイトが出てきますのでお勉強がてら訪問されても良いと思います😀
私の場合の主な変更は、前記事に記載のように、
参考記事⇓
「見出しh1～h4」、「記事文字の大きさFONT size」ですので、以下の様に書き足します。
ビジュアルエディタのスタイルシートにはクラスの記述は必要ありません。
h1 {
font-size:20px;
}
h2 {
font-size:18px;
background: #2098a8;
color: #fff;
padding: 12px 0px 12px 14px ;
border-left: none;
box-shadow: 0 2px 5px #999;
}
h3 {
font-size:17px;
border-bottom: none;
border-left: 7px solid #bc0019;
padding: 8px 0px 8px 12px;
box-shadow: 0 2px 5px #999;
}
h4 {
font-size:16px;
border-bottom: 2px dotted #bc0019;
padding: 4px 0px;
}上記のように、articleクラスを外してやって、
スタイルシート(style.css)と同じように書くだけです。
すると、以下の画像のように、殆ど同期する事が出来ました。
ビジュアルエディタの表示
ブラウザの表示
他にもスタイルシート (style.css)で行間を変えたりするとき等に、
ついでにビジュアルエディタのスタイルシート (editor-style.css)も同じように書いてやると
ブラウザーでの見た目とビジュアルエディターでの見た目が同じになり
確認しやすくなると思います。
全ては慣れ。と言うところもあると思うので見え方に違和感があったり、
確認作業を簡単にされたい方はやってみて下さい😃
お粗末でした😞
コメント