ビジュアルエディターで広告を表示させずに記事を確認

先記事で「カスタマイズは、好きなだけやる!」と決めたけろら~ですが、、、

全体的なレイアウトもやってみようかと、、、
Simplicityの子テーマ独自テンプレートとLuxeritasもいじってみようとしましたが、、、今の知識では無理っぽいです。(T▽T)アハハ!

なのでSimplicityのスキン「Sinple Black」テーマを元にもう少し知識レベルをアップさせようと、日々、ちびちびとカスタマイズなぞ、やってます。

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

Simplicityを利用させていただいてから、2年は経つんですけど、ほぼ放置状態だったので、ブログ設定とか初心者レベル、、、。
最近になってやっと、

あ、これってそういうこと、、、?」と気付く事が多いです。(^▽^;)

その中の一つがビジュアルエディター

WordPressは、「ビジュアル」と「テキスト」モード、2つのエディタが標準装備されてます。
Wordpress-editor-tab

私は「ビジュアル」モードは、ほとんど使ってなくて、ずっと「テキスト」モードで記事を仕上げてました。
十年以上前にWordpressを初めて使った時に、ビジュアルエディターを何度か試した事はあるのですが、その時どうも使いづらかった記憶がありまして、、、。(^▽^;)

10年ほどのブランクを経て、Wordpress再デビューを果たした後も、テキストエディターの方が使いやすいと思い込んでいたので、ビジュアルエディタに切り替えてみる事さえしてなかったです。

ただここしばらく気になってたんですよね。
Wordpressの「テーマの編集」画面に出てくる「ビジュアルエディターのスタイルシート(editor-style.css)が。
editor-style.css
どうしてSimplicityにビジュアルエディターのスタイルシートがあるんだろう、、、?
そんな疑問を持ってはいたんですけど、、、自分には関係ないから触るのはやめておこう、、、なんて思ってたわけです、、、。

よくわからないファイルは、あれこれいじらないに限る、、、。
これモットーです、、、。(-。-;)

だったんですが、、、

ビジュアルエディターが便利だとやっと気付いた

私は記事を仕上げる時にめっちゃ「変更をプレビュー」ボタンでブラウザ確認をします。
枠付けたり、文字装飾したり、、、ちょっとした修正のたびにプレビューしちゃうんです。
まだ記事の書き方が定着してなくて、どうやったら見やすくなるか、読みやすくなるか、、、(一応)考えながらやってるせいもあるんですけど、、、。

でも、これって結構面倒くさいんですよね。
それに、アドセンスの広告も何度も表示させてしまう事も気になってました。
もっと手軽に見た目を確認出来る方法はないかなぁとあれこれ考えて時間を潰してたのに、、、

なんのことはない、、、

書いた記事のレイアウトを確認する時にビジュアルエディターに切り替えればいいんだ

って事にやっと気付いたんですよ~!!(^▽^;)

基本的なことじゃん、コレ。
今頃気付くなんて、、、私ってなんておバカなの?
なんだか、(/ω\) ハジカシーという気持ちでいっぱいです、、、はい。(-。-;)

ビジュアルエディターで記事内のレイアウトを確認するためにやる事

子テーマをカスタマイズして使用していても、、、
ビジュアルエディターに切り替えた時に、実際の表示と同じようにはなりません。
下記の参考記事を元にカスタマイズしてみました。

上記以外にも何記事が読ませていただたのですが、多分、Simplicityのバージョンによって方法や記述に多少違いがあるかもしれません。以下の方法はSimplicity2.5(子テーマ利用)でのカスタマイズとします。

editor-style.cssを編集する

管理画面「テーマの編集」から、editor-style.cssを開く

テーマのスタイルシートを適用するコードを記述する

この記述で、style.cssに記述したCSSがビジュアルエディターの表示でも適用されるようになります。
CSSの記述ーBefore   CSSの記述ーAfter

上記の記述をせずに、style.cssと同じCSSをeditor-style.cssに記述する事でも同じく適用されます。
あれもこれもいじりたくない面倒くさがりな私は、CSSを修正したくなった時に、style.cssのみ修正すればeditor-style.cssにも適用される上記の記述をしてます。
※2017/05/28追記
WordPressのビジュアルエディタにH2やH3のデザインを適用させる方法にて、ビジュアルエディターに表示させないCSS(サイドバーとかメニューとか)は省いて下さいとあったので、、、ビジュアルエディターに関係の無い余計なCSSを読み込ませるのは、あまりよろしくないかもしれません。(汗)

見出しのCSSを、class名を変更して記述する

※2017/05/28追記
以下のclass名を「.mceContentBody」に変更する記述は、この記事を書く以前に試した方法です。
カスタマイズ時にclass名を削除して「h2」のみでもよいという記事もあったので試したところ、うちでは反映されなかったので「.mceContentBody」に変更するカスタマイズをしました。
が、、、今日になって試しにclass名を削除してみたら、、、なんとちゃんと反映されてました。謎です、、、。(滝汗)
なので、「h2」のみでは反映されない方の場合、以下の方法を試してみて下さいね。

見出しだけは、テーマのCSSのclass名では反映されません。
ビジュアルエディタ独自のclass名での表示になるようです。

なので、見出しのclass名を「.mceContentBody」にしたCSSの記述をします。

Simplicityでは、見出しタグに「.article」というclass名が付いてます。

例えば、当ブログであれば、、、(Simplicity-スキン「Simple-black」デフォルト)

上記を置き換えて

と、、、記述します。

置き換えるとビジュアルエディターでもstyle.cssに記述したものと同じように表示されます。
見出しタグーBefore

見出しタグーAfter

ここまでのカスタマイズだと、1ミリの狂いもなく実際の画面と同じように表示させるまではいかないかもしれませんが、記事投稿時にちょっとした確認がしたいだけの私にとっては、コレで十分なので、以上でカスタマイズ終了です。
何か気になる事があれば、その都度調整する予定です。

これで、新規作成、記事編集も捗ります♪

今回のカスタマイズで、「変更をプレビュー」ボタンでいちいちブラウザ確認しなくてもよくなりました♪
新規記事だけでなく、過去記事をもう少し読みやすく、わかりやすい修正したいなぁと考えていたので、ビジュアルエディターの使い方に今更ながら気付けてよかったです♪(^▽^;)

参考記事を書いてくださった皆様に感謝です♪(^^)

スポンサーリンク
レクタングル(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レクタングル(大)