記事の投稿

ビジュアルエディタとテキストエディタの使い分け

ビジュアルエディタとテキストエディタの使い分け

WordPressにて記事(固定ページ)の投稿ページでは基本的に2種類のエディター(記事編集画面)があります。

  • ビジュアルエディタ
  • テキストエディタ

ここではその二つの違いと、使い分けの方法について解説します。

 

ビジュアルエディタとテキストエディタの違い

この二つ大きな違いとしては、画像や文字装飾したものを見ながら編集できるか、HTMLタグそのもの見ながら編集するかの違いになります。

 

ビジュアルエディタの場合

投稿の編集_‹_Webデザイン&Webマーケティング 加古川 Gammy_Design_Works_—_WordPress

 

ビジュアルエディタの場合は、見出しや画像、文字の装飾がそのまま表示されるので、初心者でもわかりやすく直感的にページを作成することができます。

また、画像の大きさをドラッグすることで変更することもでき、ボタンを増やすためのプラグインも存在します。(「Tiny MCE Advanced」など)

 

テキストエディタの場合

投稿の編集_‹_Webデザイン&Webマーケティング 加古川 Gammy_Design_Works_—_WordPress 2

 

テキストエディタの場合は画像はもちろん、改行や文字装飾もHTMLタグの表示になるので、初心者には少し敷居が高く感じられるかもしれません。

 

ですが、テキストエディタにしかできない事もあるので、ポイントを押さえて使い分ける必要が出てきます。

 

 

二つのエディタの使い分け

この二つの使い分けとして、タグの貼り付け時に、その必要が出てきます。

 

  • 基本的な文章作成(ビジュアルエディタ)

普通に文章を入力して画像やリンクを貼るだけなら、ビジュアルエディタが直感的に作成できるので、こちらをオススメします。

 

  • YouTube動画埋め込みコードの貼り付け(テキストエディタ)

YouTubeの埋め込みコードをビジュアルエディタで貼り付けると、HTMLタグがそのまま表示されます。

こういったHTMLコードはテキストエディタにしてから貼り付けをしましょう。

 

  • アフィリエイト広告のバナーを設置(テキストエディタ)

YouTubeと同様に、アフィリエイト広告のバナーもHTMLコードになります。

こういったものに限らず、HTMLコードはテキストエディタにして貼り付けましょう。

 

  • ビジュアルエディタの修正(テキストエディタ)

ビジュアルエディタ上ではHTMLタグが表示されないので、いざ公開した時に意図していないところにHTMLタグが適用されてしまっている場合があります。(特に見出しタグ)

そういった場合に、余計なタグが紛れ込んでいないか?というのをテキストエディタで確認、修正することができますが、そのための基礎知識が必要になります。

 

  • ビジュアルエディタに無いHTMLタグを使う。(テキストエディタ)

例えば文字サイズの細かい設定、カラーパレットに無い色を使いたい場合や、グラーデーション装飾が使いたい場合など、そういったビジュアルエディタのボタンにないHTMLタグを使いたい場合はテキストエディタで編集する必要があります。

また、アメブロでよく使われているフレームについても同様に、テキストエディタでの編集が必要です。

 

  • 記事全体の確認(ビジュアルエディタ)

作成した記事の内容を大まかに確認する場合はビジュアルエディタがわかりやすいです。

ですが、公開した後に実際の記事でも意図しない装飾がされていないか、よく確認しましょう。

 

 

編集中にエディタを切り替える時の注意点

ビジュアルエディタとテキストエディタを頻繁に切り替えると、ブログの表示が崩れる場合があります。

特に改行が崩れる場合が多く、それにはWordpressの自動整形機能が関係していると思われます。

※自動整形機能とは、行間を空けたにもかかわらず自動で行間を詰める機能です。

 

行間が適度に空いていないときゅうくつで読みにくい文章になるため、この自動整形機能は止めた方が良いでしょう。

 

その自動整形機能を止めるプラグインがいくつか存在するのでご紹介しておきます。

  • 「PS Disable Auto Formatting」をインストールする。
  • 「TinyMCE Advanced」をインストールし、設定ページにて「Stop removing the〜」にチェックを入れる 。
  • 「brBrbr」をインストールする。

これらの方法で防ぐことが確認されていますが、環境によって違う場合もあるので、一つずつ試してみてください。

 

以上「ビジュアルエディタとテキストエディタの使い分け」の解説とします。

 

コメントを残す

*