ビジュアルエディターの使い方

ワードプレスの投稿画面で「ビジュアルエディタ」を使用すると、実際にブログでどのように表示されているのかを確認しながら記事を書く事が出来ます。

ビジュアルエディタを使用する上でのメリット・デメリット、注意点などについて書いて行きます。

ビジュアルエディタ

メリットは実際にどの様な見た目で書かれているかを確認しながら記事を書く事が出来るという事。

上部のツールバーを使って、部分的に太字にしたり、色を変えたりするのが簡単というメリットがあります。

逆にデメリットは、タグが自動生成されてしまうという事。
実際にHTMLの中身が把握できないという事です。

ビジュアルエディタで色々いじってると自動生成が繰り返されて、タグがぐちゃぐちゃの状態になってしまう事がありますね。

HTMLを直接記述＆編集する場合は、テキストエディタで書いた方がいいです。

文章はテキストエディタで書いた後、記事の最終確認や、部分的な色付けや太字にしたりなどのデコレーションはビジュアルエディタで…
といった順番をお勧めしますね。

ちなみに、ビジュアルエディタのツールバーはここです。

ビジュアルエディタ　ツールバー

矢印の部分をクリックすると、色を付けたりなどのツールも出てきます。

ビジュアルエディタで最も気を付けるべきポイントは改行と段落です。

改行とは同じ文の中で行を変える事。
段落は若干スペースが空いて、文自体が変わるといった感じです。

※赤で囲まれた部分が一つの段落

HTMLだと、＜br＞が改行で、＜P＞で囲まれた部分が段落になります。
基本的に普通の記事では、この改行と段落を分けて書いて行く事になりますね。

ビジュアルエディタで改行をする時は「Shift+Enterキー」。
段落を空ける時は「Enterキー」です。

また、段落は連続して空ける事は出来ません。
それがWEBページ的に正しく、連続して改行・段落をする事はワードプレスでもテキストエディタでは出来ないようになってます。

ビジュアルエディタでは、連続して段落を空けられますが、無理やり半角スペースを空けて段落を付けるという仕組みになってますね。

基本的にEnterキーを連続してスペースを見せる方法は良くないので、
スタイルシートでmarginを空けるなどして行間スペースは空けるようにしましょう。

ビジュアルエディターを使うと明朝体だしフォントの大きさもいつもと違うと思います。
また、基本的に外部に置いたCSSのスタイルも効いてませんよね。

いつもと同じビジュアルにするには、ビジュアルエディタ用のCSSで、そこにいつもと同じスタイルを適用させてあげます。

ビジュアルエディターのスタイルを変更するには、「テーマの編集」で「editor-style.css」を編集します。
「editor-style.css」が無い場合は作らなければなりませんね。

CSSをカスタマイズ出来る人はやってみて下さい。