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

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での画像挿入とアイキャッチの設定

affinger
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. poko 投稿作成者

    >ようこ様

    返信ありがとうございます。私も結構細かいミスを連発するタイプですので気にしないで下さい(笑)。また質問があればいつでもコメント下さい。

  2. ようこ

    こんにちは。
    返信が遅れてしまい申し訳ありません。
    アドバイスどうも有難うございます。

    今日やっと時間ができたので見てみたら反映されていました!
    というか、まったく気づかなかったのですが、記事本文の画面ではなくカテゴリーの画面を見て、反映されていないと思いこんでいました(テスト用に短い文章しか書いていなかったので、カテゴリ画面のそれが記事の画面だと思っていました)。

    カテゴリの画面では文字の装飾が反映されないのですね?
    記事の画面に飛ぶと、しっかりと反映されており、嬉しいやら自分のアホさ加減にがっかりするやら。。(笑)

    こんなことでお時間取らせてしまい本当にすみません。
    いつも親切にご対応頂き感謝しております。

  3. poko 投稿作成者

    >ようこ様

    いつもコメントありがとうございます。WordPress手強いですね(笑)文字の装飾が反映されていないという事なのですが、これはまた別のブラウザでも反映されていないという事でしょうか?考えられる原因としては以前と同じようにキャッシュの問題かCSSの記述ミス、プラグイン等が考えられますが、もしどうしても反映されないようならブログのURLを教えて頂けたらもしかすると原因が分かるかも知れません。もし良かったら一度URLを教えて頂けたら助かります。

    それとどのようなCSSが反映されていないのか具体的な場所を指摘してもらえると確認ができると思いますし、URLはコメント公開時には削除しますのでもしよければ教えて下さい。

  4. ようこ

    こんにちは。
    以前別件でお世話になったようこです。

    今回は記事を作成中、文字の装飾が全く反映されなくなってしまいました。
    書いた文章自体は更新されるのですが、装飾だけが反映されません。

    Add quick tagの編集をした後だったので関係があるかと思い
    停止してみましたが状況は変わりません。

    アドバイス頂けないでしょうか。宜しくお願い致します。

  5. poko 投稿作成者

    >たろー様

    わざわざ返信ありがとうございます。問題も解決したようでよかったです。今後ともどうぞよろしくお願い致します。

  6. たろー

    ご丁寧に返信ありがとうございました。
    どうやら原因はおっしゃる通り『パーマリンクの設定の変更』だったようで、少し設定を変更しなおしたら無事解決しました。
    WordPressについての詳しい設定が載っていて大変助かっています。

  7. poko 投稿作成者

    >たろー様

    コメントありがとうございます。「お探しのコンテンツを見つけられませんでした」という場合はURLが違うという事なので原因として思いつくのは次の3点かと思います。

    • パーマリンクの設定を変更した
    • 「.htaccess」の記述ミス
    • プラグインやテーマの更新の影響

    詳しい原因は環境によっても違いますが、私の思いつくのは上記3つかなと思います。思い当たる部分があればチェックしてみるといいかも知れません。

  8. たろー

    試しにmoreタグを使って投稿してみたところ、『続きを読む』をクリックすると『お探しのコンテンツを見つけられませんでした。検索をお試しください。』と新しいページに表示されて、『続きを読む』以降の記事が表示されません。

    同様に最近の記事のところから以前に投稿した記事をクリックすると、『お探しのコンテンツを見つけられませんでした。検索をお試しください。』と表示されたページに切り替わります。
    上記二つの問題の原因はなんだと思われますか?