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

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

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

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

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

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

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

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

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

タイトルを入力してみる

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

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

改行の仕方

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

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

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

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

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

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

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

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

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

ツールバーを使ってみる

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

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

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

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

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

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

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

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

リンクを挿入する

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

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

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

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

文字の色を変える

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

記事を分割するMoreタグ

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

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

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