WORDPRESS

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイントを初心者向けに解説【クラシックエディタの記事作り】

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイント
 

あずきです🐥

 

WordPressで記事を作るうえで、事前に押さえておきたい超基礎的なポイントの1つ…

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

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 

まず大前提として、現在のWordPressでは今回ご紹介していく…

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

という違い以前に、もっと大きな括りとして…

  • クラシックエディタ
  • グーテンベルグ(ブロックエディタ)

という「2タイプ」の投稿編集モードにわかれています

つまり、記事を作っていくときの「操作画面タイプ」のことだね!
 

関連

「そもそもクラシックエディタとグーテンベルグってなに…?」という場合はこちらをどうぞ ↓(重要です)

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

で!

 

前者の「クラシックエディタ」を選択してWordPressに導入した場合は…

 

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイント top-01

 

↑ WordPress管理画面 > 投稿 > 新規追加 で「記事作成の画面」を開いたら、そのなかの右上に表示されている…

 

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイント top-02

 

↑ こちらの…

  • ビジュアル
  • テキスト

という「2つの編集モード」を、好みや必要に応じて使い分けていく形になるんですね

これが今回の「ビジュアルエディタ」と「テキストエディタ」のこと!
 

これだけ聞くと、初心者さんにとっては「なんか面倒くさそう」と思うかもですが…

 

ビジュアルエディタ・テキストエディタの使い分けは「超簡単」

 

です(本当に)

 

ということで、今回は2つのポイントで丁寧に解説していきます

  1. 普段は「ビジュアルエディタ」側を使っていけばOK
  2. 「テキストエディタ」が活躍するのってどういう場面?

さっそく見ていきましょー🐥

 

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならプラグイン「すごいもくじLITE」の無料配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイントを初心者向けに解説【クラシックエディタの記事作り】

ステップ1:普段は「ビジュアルエディタ」側を使っていけばOK【読者視点の極めて見やすい編集画面で、かつ「Word」のようにシンプルな操作性】

WordPress ヘッダー c-01

 

いきなり結論から言ってしまうと、WordPressにおける普段の「投稿編集」つまり記事作成の画面では…

ビジュアルエディタ

側の編集モードを使っていけばOKです

 

そもそも【ビジュアルエディタ】は、もう一方の【テキストエディタ】と違って…

  • プログラミングのように複雑な画面ではなく、「読者視点」の極めて見やすい編集画面
  • すなわち、実際に公開される画面を「視覚的」にイメージしながら記事を執筆しやすい
  • またWordのように「基本に忠実」な操作性で、とにかく癖がなく初心者にも優しい

という特徴があります

画像つきで具体例を出してみるよ!
 

例えば、読者のスマホやPCに表示された「実際のブログ画面」が…

 

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイント 1-1-01

 

↑ こんな内容だとして、こちらの記事はまず【テキストエディタ】側の編集画面上だと…

 

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイント 1-1-02

 

↑ このように、小さな文字でビッシリの羅列で形成されているんですね

コンピューターはこの羅列を読みとって「実際の画面」を表示してるということ!
 

でもこのサンプル記事を、編集画面の右上にある…

 

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイント 1-1-03

 

↑ こちらのタブから、【ビジュアルエディタ】側に切り替えてみると…

 

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイント 1-1-04

 

↑ このように、テキストエディタの「複雑な文字列」で表示されたのと同一記事とは思えないくらい、「読者視点に近い」スッキリした編集画面が表示されます

ちょー見やすい
 
 

もちろん、WordPressユーザーさんのなかには…

自分はテキストエディタが慣れてるし使いやすいから、ビジュアルエディタは使わんよ?

という人も、大勢いらっしゃるはずです

 

ただそれは、あくまで「プログラミングなどに慣れている場合」かもしれないですよね

 

僕自身もそうでしたが、「プログラミング系の知識ゼロ」でWordPressを始めた場合で…

ビジュアルエディタは一切使わずに、あえて「テキストエディタのみ」で記事を作る

という人は、正直少ないんじゃないかなと

まずコードの意味がわからないよね
 

ただ!

 

そんななかでも【テキストエディタ】へ一時的に切り替えることになる場面というのが、WordPressで記事を作っていると「地味にある」んですね

 

ということで、お次は【テキストエディタ】が活躍する「具体例」について見ていきましょう🐥

 

ステップ2:「テキストエディタ」が活躍するのってどういう場面?【ブログに「広告リンク」を貼るとき】

WordPress ヘッダー c-02

 

WordPressで記事を作っている最中に…

  • 普段は実際の公開画面に近い、【ビジュアルエディタ】側の編集モードを開いている
  • そのうえで、でも【テキストエディタ】側のモードに切り替えるときも、地味にある

そんな【テキストエディタ】が必要になるシーンとして代表的なのが、ズバリ…

記事内に「広告リンク」を貼るとき

です

 

まず普段ネットで見かける「広告」というのは、通常その広告ごとの「専用コード」が表示箇所に貼り付けてあるんですね

つまり、プログラミングみたいな「文字の羅列」のこと!
 

で!

 

ここからが重要なんですが、こうした「広告」などをブログ上で表示させるための各種「コード」というのは基本的に…

 

【テキストエディタ】に画面を切り替えてから貼る

 

という必要があります

 

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイント 1-2-01-a

 

↑ 記事の編集画面を一旦【テキストエディタ】に切り替えて、広告を載せたい箇所に…

 

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイント 1-2-01-b

 

↑ 提携している広告主から配布された「専用コード」を貼り付けると…

 

WordPress「ビジュアルエディタ・テキストエディタ」の違いとは?使い分けの実践的なポイント 1-2-02

 

↑ 実際のブログ画面上では、このように広告が表示されるという流れですね

テキスト広告の場合も同じだよ!
 

関連

WordPressにおける「広告の貼り方」については、当ブログガイドの第8章「収益化」編にて、1から丁寧に解説しています ↓

WordPressでアフィリエイト広告を貼って収益化しよう
【2021年】WordPressでアフィリエイト広告を貼って収益化しよう【あずきのワードプレスブログ「完全初心者」ガイド/第8章】

続きを見る

 

もちろんこうした「広告リンクを貼るとき」以外にも、人によって【テキストエディタ】を使うシーンというのが色々あるとは思います

 

ただ最近は、そもそも「WordPress本体」や「WordPressテーマ」の性能が充実してきて「使い勝手が最適化されつつある」ので…

 

なるべく【ビジュアルエディタ】だけで基本操作が完結できる

 

ような便利な環境になっているんですね

ありがたい
 

なので、特にブログ初心者さんのうちは…

最初から【テキストエディタ】のことを心配する必要は全然ない

のかなと、専業ブロガー4年目の経験から思っています🐥

 

今回の記事はこちらの章に属しています

 第7章 記事投稿 編          

次の章はこちらからどうぞ

 第8章 収益化 編           

全9章のTOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

 

 ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

 ✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!

 ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

 

※新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

今ならプラグイン「すごいもくじLITE」の無料配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

-WORDPRESS