ワードプレス

WordPressの「ビジュアルエディタ&テキストエディタ」とは?【クラシックエディタにおけるブログ記事編集】

wp-editor-visual-and-text-20200308_ec



今回は、WordPressブログにおける「2種類」の記事編集モード…

「ビジュアルエディタ」と「テキストエディタ」

の違いと使い分けについて、1から優しく解説していきたいと思います

まずいきなり結論として、WordPressの「クラシックエディタ」という編集タイプで記事を書く場合は、この…

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

という「2つのモード」の存在を知ったうえで、これらを必要に応じて切り替えながら使っていく必要があります

でも、ブログ初心者の方にとっては…

ちょい待ち! まず「クラシックエディタ」ってなんぞや?

って感じですよね

  • 今回の「ビジュアルエディタ」とか「テキストエディタ」とは、また別のエディタなの?
  • 「~~~~エディタ」ってのが色々ありすぎて、もうなんなのさ!

これが本音じゃないかと思います

なのでまず!

今回の「ビジュアルエディタ」と「テキストエディタ」について知るには、「クラシックエディタ」の存在から知っておく必要があります

「さっさと記事を書き始めたいのにめんどくさい…」と思うかもですが、WordPressをやっていくうえでは極めて大事なポイントなので、必ずチェックしておきましょう

3分でわかるよ!

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

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

WordPressブログにおける「ビジュアルエディタ」と「テキストエディタ」とは?使い分けのポイント【クラシックエディタの記事編集】

まずWordPressの記事編集は、「グーテンベルグ」と「クラシックエディタ」の2タイプある【初期設定はグーテンベルグ】

pc-work-202001_01

まず絶対に知っておきたい大前提として、WordPressでの記事作成には…

  • グーテンベルグ
  • クラシックエディタ

という2種類の「編集タイプ」があります

これは、「どちらか使いたい方を好きに選択できる」という意味です

ちなみに、初期設定では「グーテンベルグ」になってます

このどちらのタイプを選ぶかで、編集画面の仕様がまるで変わってくるんですね

wp-editor-visual-and-text-20200308_1-01b

「グーテンベルグ」の編集画面

wp-editor-visual-and-text-20200308_1-02b

「クラシックエディタ」の編集画面

つまり、最終的にできあがるページは同じ「1つの記事」だとしても、完成までの「作業場」がガラッと変わるといったイメージですね

この「グーテンベルグ」と「クラシックエディタ」について、くわしくは ↓ をどうぞ♪

wp-editor-gutenberg-or-classic-20200307_ec
WordPressの「グーテンベルグ&クラシックエディタ」とは?どっちがおすすめ?【ブログ記事編集の新エディタ・旧エディタ】

続きを見る

ちなみに僕は、「クラシックエディタ」を愛用してます

「クラシックエディタ」に切り替える手順は ↓ から♪

wp-classic-editor-202001-ec
【Classic Editor】WordPressプラグイン「クラシックエディタ」とは?機能と導入手順【Gutenberg→旧エディタ】

続きを見る

1分でできるよ!

この大事な前提をふまえたうえで、本題が次パートです

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

「クラシックエディタ」を使う場合、さらに「ビジュアルエディタ」と「テキストエディタ」を切り替えながら書く

pc-work-202001_02

そもそもWordPressの記事編集タイプには…

  • グーテンベルグ
  • クラシックエディタ

の2種類があります

で、もし「クラシックエディタ」側を使っていく場合は、さらに…

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

の2つを、記事編集のなかで(必要に応じて)切り替えながら、記事を書いていきます

wp-editor-visual-and-text-20200308_2-01

「ビジュアルエディタ」の編集画面

wp-editor-visual-and-text-20200308_2-02

右上の「テキスト」タブをクリックすると…

wp-editor-visual-and-text-20200308_2-03

画面が「テキストエディタ」に切り替わる

とはいえブログ初心者の方にとっては…

  • ビジュアルエディタとテキストエディタを切り替えながら書くとか、なんとなく面倒くさそう
  • 響きだけでもむずかしそう

と思うかもですよね

でも大丈夫

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

そもそも「テキストエディタ」は、めったに使いません

ということで、次パートです

基本はすべて、「ビジュアルエディタ」で書く【テキストエディタを使うシーンはごくわずか】

pc-work-202001_03

「クラシックエディタ」で記事を書いていく場合、さらに編集画面のなかで…

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

を切り替えつつ、記事を完成させていきます

ただ!

そうは言っても、基本はほぼほぼ「ビジュアルエディタ」を使います

割合で言うと…

  • ビジュアルエディタを使ってる時間 → 98%
  • テキストエディタを使ってる時間 → 2%

こんな感じです

あくまで体感

プログラミングが得意な方とかだと、もしかしたら「テキストエディタしか使わない!」ということもあるかもですが、かなり稀だと思います

少なくともWordPress初心者、ブログ初心者の方ならまず「ビジュアルエディタ」を使います

なぜなら、ビジュアルエディタなら…

  • プログラミングみたいな難しい画面ではなく、実際のブログ画面に近いイメージでそのまま書ける!
  • つまり、記事を書きながら「実際にブログ上で表示されるイメージ」を想像しやすい!

からですね

wp-editor-visual-and-text-20200308_3-01

ビジュアルエディタの画面

wp-editor-visual-and-text-20200308_3-02

同じ内容を「テキストエディタ」で見ると、こうなる

テキストエディタは細かいコードがビッシリで引くと思うけど、こういうのを1つ1つ覚えてく必要はまったくないからご安心を!

じゃあ逆に、一見めちゃめちゃ難しそうに見える「テキストエディタ」を使うシーンなんてあるのか?

結論は、「あります」

最後のパートです

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

「テキストエディタ」が活躍するのは、ほぼほぼ「広告リンク」みたいな特定のコードを貼るとき

pc-work-202001_04

プログラミングとかに詳しくて、「テキストエディタ」をバリバリ使いこなす人を除いたら、大半のWordPressユーザーにとっては…

テキストエディタを使うのは、ズバリ…

  • 「特定のコード」を貼ったりするとき

です

とはいえ…

特定のコードってなに?

って感じですよね

具体的には、例えば「広告リンク」を貼るときとかです

というのも、WEBサイト上でよく見かける「バナー広告」や「テキスト広告」とかって実際の構造は…

長々としたプログラミングコード

みたいなものが、その箇所に貼り付けてあるんですね

その専用コードが、読者のPCやスマホには「バナー広告」や「テキスト広告」となって表示されます

で、めちゃめちゃ大事なポイントとして…

この広告リンクとかの専用コードは、「テキストエディタ」に切り替えてから貼る必要があります

wp-editor-visual-and-text-20200308_4-01

オレンジ枠の場所に、バナー広告を貼るとして…

wp-editor-visual-and-text-20200308_4-02

まず「テキストエディタ」に切り替える

wp-editor-visual-and-text-20200308_4-03

このオレンジ枠の場所に…

wp-editor-visual-and-text-20200308_4-04

そのバナー広告専用のコードを、コピペで丸ごと貼りつける

wp-editor-visual-and-text-20200308_4-05

「ビジュアルモード」に戻してみると、バナー画像が表示されてる(サンプルなのでモザイクをかけてます)

「ビジュアルエディタ」のままコードを貼っても、広告は表示されないよ

なので実質、そういった「コードを貼る」ための用途として、この「テキストエディタ」は活躍します

強いて言えば、ほかにも…

「ビジュアルエディタ」で文章やパーツの表示がおかしいときに、「テキストエディタ」に切り替えて修正する

といった用途もありますが、まだWordPressを始めたてのうちは、そこまで考える必要はないです

つまり結論…

  • 基本は全部、「ビジュアルエディタ」で書く!
  • たまに広告用とかの「専用コード」を記事のなかに貼ったりするときに、「テキストエディタ」に切り替える!

こんなイメージでOK

簡単!

おさらい

pc-work-202001_08

まとめ

  • WordPressの記事編集タイプは、そもそも「グーテンベルグ」と「クラシックエディタ」の2種類ある!
  • 「クラシックエディタ」に切り替えた場合、編集画面のなかで、さらに「ビジュアルエディタ」と「テキストエディタ」を使い分ける!
  • とは言っても、普段使うのはほぼほぼ全部「ビジュアルエディタ」の方!
  • やや専門的な領域の「テキストエディタ」をいじるのは、広告リンクなどのコードを丸ごと貼り付けるときくらい!

今回の「ビジュアルエディタとテキストエディタ」については、これで以上となります

大変お疲れさまでした♪

あずき🐥

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。