【記事を書く】ビジュアルエディタとテキストエディタの使い方

2016/04/08

【記事を書く】ビジュアルエディタとテキストエディタの使い方

ワードプレスでブログ

ブログ記事を書くには「文章で伝える力」や「SEO対策」が必要なんだな…とわかった、たのちん管理人なむ。

しかしその前にもっと基本的な、WordPressブログの記事を書くためのビジュアルエディタとテキストエディタの使い方についてまとめます。

 

スポンサーリンク

ado

 

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

WordPressで記事を作成する時に使うエディタは「ビジュアルエディタ」と「テキストエディタ」の2種類があります。

ここでいうエディタというのは、WordPressで記事を作成したり編集したりする仕組みのことです。

例えば、なむの自己紹介のページに2匹の飼いねこの紹介部分があります。

 icon-hand-o-up こんな感じのブログ記事です。

e1

この記事を書くために、管理画面で記事の投稿や編集を行いますよね。

 icon-hand-o-up 「ビジュアルエディタ」というのは、ビジュアルというくらいですので、パッと見て視覚的にわかりやすい実際のブログの表示画面に近い形で作成できるモードです。

2匹の飼いねこの紹介部分は下のように作成されています。
ブログに掲載されるイメージのまま記事を書くことができるモードということですね。

e2

このビジュアルモードと連動して、テキストモードというものが存在します。

それが「テキストエディタ」です。
ブラウザで見ることができるWEBページのほとんどは、HTMLで作られています。

  「テキストエディタ」というのは、そのページを構成するHTMLを編集することができるモードです。

「ビジュアルエディタ」と「テキストエディタ」は連動していますから、どちらかを修正したらもう一方にも反映されます。

2匹の飼いねこの紹介部分をテキストモードで見てみましょう。

こんな感じで記述されています。

e3

解読できませんw

本来であればHTMLを勉強してブログやサイトを構築しなくてはいけないのですが、今はWordPressのような便利なブログ作成システムがありますので、HTMLの知識がなくても自分でサイトが作れるようになりました(ありがとうWordPress)。

基本的にはビジュアルエディタでブログ記事を書いて、ビジュアルエディタでできないことがあれば必要に応じてテキストエディタを使う、というやり方で記事を作成していきます。

 

エディタの使い方

エディタを切り替えながら、新しく記事を書いてみましょう。

まずはビジュアルモード。

エディタには2種類あります。
ビジュアルエディタとテキストエディタです。

と本文に書いてみます。

e4

この記事をテキストモードに切り替えます。

文章が、<P>…</P>というHTMLタグで囲まれています。
<P>タグはParagraphの略で、<P>…</P>で囲まれた部分がひとつの段落であることを表します。

e5

ビジュアルモードに戻って、文字の装飾をしてみます。

「2種類」という文字のサイズを40pxに、「ビジュアルエディタ」を赤字に「テキストエディタ」を青字にしてみました。

e6

テキストモードに切り替えてみましょう。

「2種類」と「ビジュアルエディタ」と「テキストエディタ」の各文字の前後にHTMLタグが追加されています。

e7

<span>…</span>で囲んだ範囲はひとかたまりになります。

 icon-caret-right style="font-size: 40px;" とは、サイズが40pxですよ。という意味です。

ということは、以下のHTMLは

e8

「2種類」という文字のサイズを40pxに指定しますよ。

という意味になります。

  style="color: #ff0000;" とは、色が#ff0000ですよ。という意味です。

  style="color: #00ccff;" とは、色が#00ccffですよ。という意味です。

「ビジュアルエディタ」と「テキストエディタ」という文字の色をそれぞれ指定したカラーにしますよ。
という意味のHTMLタグがついています。

 

試しに、テキストモードで文字のサイズと色を変えてみましょう。

文字のサイズを40pxから80pxに変更、文字の色を#00ff00にしてみます。

e9

ビジュアルモードに切り替えてみましょう。

変更されています。

e10

このように「ビジュアルエディタ」と「テキストエディタ」は連動しています。

ブログの表記は以下のようになりました。

e11

使いやすいエディタを使って記事を書いていきましょう。

おつかれさまでした(*´ω`)

 

NEXT

*【記事を書く】テキストの装飾やリンクを作成するツールバーの使い方

 

-ワードプレスの使い方
-,