ビジュアルエディタの使い方と記事投稿方法

WordPressで実際に記事を書く事に慣れていないと、えっ!何で?と思う部分が多いと思います。今回は記事投稿の仕方、ビジュアルエディタの基本的な使い方を紹介して行きます。その前に軽く前回までのおさらいをしときましょう。

  • WordPressでは連続改行が反映されない。それっぽくするのは可能
  • 「投稿」と「固定ページ」がある。
  • 「ビジュアルエディタ」と「HTML(テキスト)エディタ」がある。

ここまで理解OKですか?分からない場合は以前の記事をもう一度読んでおいて下さいね。

スポンサーリンク

ビジュアルエディタで色々やってみる

まずはWordPressの管理画面から「投稿」⇒「新規追加」を選択して投稿画面を開いてみましょう。

ビジュアルエディタ-1

投稿画面の右のほうに「ビジュアル」「テキスト」と切り替えるタブがありますので、「ビジュアル」を選択してみて下さい。

ビジュアルエディタ-2

ビジュアルエディタに切り替わりますのでまずはツールバーを全部表示してみましょう。赤で囲った部分のマークをクリックしてみて下さい。

ビジュアルエディタ-3

するとツールバーが2段になったと思います。このツールバーはプラグインで拡張する事ができます。専用のプラグインを使うと例えば表を挿入したり、絵文字を使う等ができるようになります。

ビジュアルエディタ-4

タイトルを入力してみる

次にタイトルを入力してみましょう。パーマリンク設定で「%postname%」を含むURLに設定している方の場合はこの記事タイトルでスラッグ(URL)を編集できます(記事タイトルを入力した後に表示されます。)

ビジュアルエディタ-5

パーマリンク設定で「%postname%」を含むURLに設定している方の場合はこのようにパーマリンク(URL)が表示されますので、ここで編集をクリックして編集できます。この画像の場合だと、URLの「テスト記事」という部分を変更する事ができます。パーマリンク設定で「%postname%」を含まない設定にしている方は関係ないので飛ばして下さい。

改行の仕方

では実際に記事を少し書いてみて下さい。普通は文章の区切りで「Enter」をクリックして改行しますが、ビジュアルエディタの場合は「Enter」をクリックすると1行飛ばして広く隙間が開いてしまします。

ビジュアルエディタ-6

普通に1行改行するには「Shift」を押しながら「Enter」をクリックします。するときちんと1行改行されます。

ビジュアルエディタ-7

これは「ビジュアルエディタ」だけの操作方法です。「テキストエディタ」では普通に「Enter」を押すと1行の改行になります。

なぜこのようになっているのかちょっと説明しておきますと、ビジュアルエディタでの「Enter」は改行ではなくて、段落の区切りという設定になっているからです。つまり普通の改行は「Shift」+「Enter」で、段落の区切りが「Enter」という事になります。

そのため、段落の区切りという事で1行飛ばした改行になるわけです。これは慣れまで少し時間がかかると思います。

広めの間隔をあけたい場合

今度は文章を書いて2回連続で「Enter」を押してみるとこのように広く間が開きます。

ビジュアルエディタ-8

これで広めに文章を区切る事ができます。これは連続改行ではないの?と思うかも知れませんが、テキストエディタに切り替えてでこの文章を見るとこのようになってます。

ビジュアルエディタ-9

なにやら変な文字が書かれてますよね。これは半角のスペースを入れてから改行しているという事です。連続改行が反映されないので、半角のスペースを入れてさらに改行してスペースをあけている訳です。

ツールバーを使ってみる

それでは文字を太字にしたり、文字の色を部分的に変えたり、リンクの挿入をやってみたいと思います。ツールバーの一番左に「B」というのがあります。これで太字(strongタグ)になります。太字にしたい部分を選択してからクリックします。

ビジュアルエディタ-10

次の「I」というのが斜体、ABCというのが打ち消し線です。これも先ほどと同じように範囲を選択してクリックする事で使えます。

ビジュアルエディタ-11

次にあるのが箇条書きのタグです。範囲を指定してクリックします。

ビジュアルエディタ-12

するとこのような表示になります。

ビジュアルエディタ-13

箇条書きの書く項目に●が付きました。この●を数字にしたのが次のタグです。

ビジュアルエディタ-14

次におたまじゃくしが2匹いますね。

ビジュアルエディタ-15

これは引用タグですので、どこかから引用した文章などは範囲を指定してこの「おたまじゃくし」をクリックします。この引用した部分はカスタマイズで文字のフォントを変えたり、背景色を変える事ができます。

その次の3つは説明不要とは思いますが、「左寄せ」「中央寄せ」「右寄せ」ができますが、私は使った事がありません。

ビジュアルエディタ-16

リンクを挿入する

リンクを挿入する場合は範囲を指定してリンクを挿入する事ができます。範囲を指定し、鎖のようなマークをクリックします。

ビジュアルエディタ-17

するとこのような画面になります。

ビジュアルエディタ-18

リンクのURLを入力するか自分のサイト内であれば「既存のコンテンツにリンク」をクリックして自分の記事を検索してリンクすることもできます。

また、「リンク先を別のタブで開くか」の選択もできます。タイトルというのを入力した場合にはリンク部分にカーソルが乗った時にタイトルが表示されるようになってます。

文字の色を変える

これも範囲を指定しておき、この「A」というボタンから色を指定できます。

ビジュアルエディタ-23

記事を分割するMoreタグ

記事一覧が表示されるページで有効なのが「記事の抜粋」というやつです。記事を序盤だけ表示して「続きを読む」と設定する事ができます。この文章を途中で切るに使うのが「Moreタグ」です。文章を切りたい部分にこのタグを挿入します。

ビジュアルエディタ-21

このように区切られた訳です。私のこのブログも「続きを読む」を設定してますが、実はこの「Moreタグ」は全く使ってません。すべてカスタマイズで任意の文字数で抜粋するようにしてます。

そのカスタマイズも今後説明していきますね。それではちょっと長くなったので次回は画像を挿入する方法を別記事で紹介します。
WordPressでの画像挿入とアイキャッチの設定

最終更新日:2017/12/27

ビジュアルエディタの使い方と記事投稿方法”に14件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. こあら

    たしかにブラウザのキャッシュを消したところ、きちんと引用符が反映されていました。
    丸一日悩んでいたのでとても助かりました。ありがとうございました。

  2. しげぞう 投稿作成者

    こあら様

    コメントありがとうございます。多分装飾は反映されていると思います。引用符も付いてグレーのボックスに囲まれているので多分大丈夫と思いますが、こあら様のブラウザでキャッシュ(以前のデータ)が残っていて反映されていないだけかもしれません。

    なので、一度別のブラウザやデバイスで確認してもらえますか?スマホとかタブレットでもいいですし、別のブラウザからでも良いです。それで反映されているなら問題ありません。キャッシュ系のプラグインなど使っているのであれば一度プラグインのキャッシュをクリアしてみるのも良いかもしれません。