WordPress投稿機能:ビジュアルエディタの使い方

WordPress投稿機能ビジュアルエディタの使い方01
Pocket

WordPressの投稿機能には「ビジュアルエディタ」という機能があり、これを使えばHTMLが分からなくてもコンテンツを作ることができます。今回は、そんなビジュアルエディタの基本的な使い方について解説していきます。

 

解説に入る前に、一つ注意点があります。WordPressのビジュアルエディタは便利な機能ですが、デフォルトの状態では機能に制限があります。そんなビジュアルエディタをより便利に使うには、プラグインのTinyMCE Advancedをインストールすることが必須です。

 

今回の解説は、TinyMCE Advancedを入れた状態のビジュアルエディタについて解説していきます。このコンテツを読む前に、必ずTinyMCE Advancedを設定しておきましょう。

 

TinyMCE Advancedの設定方法と使い方については、「TinyMCE Advanced:設定方法と使い方」を参照してください。画像付きで解説しているので、簡単に素早く設定できます。

 

1.WordPressビジュアルエディタの使い方

ビジュアルエディタの使い方を説明していきますが、全ての機能を説明するのは大変です。そこで今回は、「ビジュアルエディタの基本的な使い方」と「おすすめのビジュアルエディタ機能の使い方」に絞って説明していきます。

 

1-1.ビジュアルエディタの基本的な使い方

ビジュアルエディタの基本的な使い方を3つ説明します。

  • ビジュアルエディタとHTMLの切り替え方法
  • 設定したエディタのアイコンをすべて表示する方法
  • 正しい改行の仕方

 

1-1-1.ビジュアルエディタとHTMLエディタの切り替え方法

WordPressの投稿機能には、ビジュアルエディタとHTMLエディタの2つの機能があります。切り替えは、右上のタブで行います。ビジュアルエディタで投稿する場合は、「ビジュアル」タブをクリックしてください。

WordPress投稿機能ビジュアルエディタの使い方03

 

1-1-2.設定したエディタのアイコンをすべて表示する方法

TinyMCE Advancedの設定直後は、一列目までしか表示されていません。下図の赤枠で囲った「ツールバー切り替え」ボタンをクリックすると二列目も表示されるようになります。

WordPress投稿機能ビジュアルエディタの使い方02

 

1-1-3.正しい改行の仕方

ビジュアルエディタでの「改行」には2種類の改行があります。

  • 「enter」による改行
  • 「shift+enter」による改行

の二つです。

 

「enter」による改行は、行間を広く開けて改行します。一方、「shift+enter」での改行は行間が狭い状態で改行されます。言葉で説明しても、分かりづらいと思うので下図で確認してみてください。

WordPress投稿機能ビジュアルエディタの使い方04

 

1-2.おすすめのビジュアルエディタ機能の使い方

ビジュアルエディタは直観的に使えるように工夫されており、機能に関するアイコンもワードやエクセルのアイコンと似た感じで作られいます。見ただけ「どんな機能なのか」なんとなく分かるようになっているので、全ての機能を解説する必要は無いと思います。今回は、「一応、説明しておいた方がいい機能」についてのみ解説していきます。

 

1-2-1.リストタグの設定

リストタグは、箇条書きで表示したいときに使うタグです。リストタグを使ことで、ユーザーに簡潔に内容が伝わります。当サイトでもよく使うタグの一つです。情報量の多いコンテンツの中で、「コンテンツの要約」や「重要な内容」を簡潔に伝えることで、ユーザーの興味を引くことができます。

 

使い方は、箇条書きで表示したい文章をドラッグで指定し、リストタグのアイコンをクリックします。リストタグのアイコンは、「●(丸)」と「1、2、3・・・(数字)」が選べます。

WordPress投稿機能ビジュアルエディタの使い方05

 

1-2-2.引用タグの設定

引用タグは、自分のコンテンツに他の文献(サイト、書物)からの引用を掲載するときに使います。引用タグを使う際は、引用元のへのリンクを付けることが大切です。引用元へのリンクを怠ると、引用部分が複製コンテンツとみなされてSEOに悪影響を及ぼすことがあります。リンクが貼ってあることで、Googleがリンク元をクロールした際に、「本当に引用してきんただな」と確認できます。

 

引用タグの使い方は、引用した部分をドラッグで指定し、引用タグのアイコンをクリックします。

WordPress投稿機能ビジュアルエディタの使い方06

 

引用タグを挿入すると下図のように表示されます。

WordPress投稿機能ビジュアルエディタの使い方07

 

1-2-3.リンクタグの設定

リンクタグの挿入は、エクセルでもよく使う機能です。その為、なのでなんとなく分かっている人も多いと思いますが、一応説明していきます。

 

リンクタグの使い方は、リンクを張りたい部分をドラッグで選択し、リンク挿入ボタンをクリックします。

WordPress投稿機能ビジュアルエディタの使い方08

 

URLの設定画面が表示されるので、右側の「リンク設定」をクリックしてください。

WordPress投稿機能ビジュアルエディタの使い方09

 

すると、「リンクの挿入/編集」が表示されます。ここでURLを入力し、「リンクを新しいタブで開く」にチェックを入れ「リンク追加」をクリックします。「リンクを新しいタブで開く」にチェックを入れると、リンク先のページを別ウインドウで開くことができます。

WordPress投稿機能ビジュアルエディタの使い方10

 

更に詳しいリンクタグの設定方法については、「リンクタグの設定:リンクタグの正しい使い方とSEO効果を高める方法」で解説していますので、ぜひ参考にしてみてください。

 

1-2-4.テーブルタグの設定方法

テーブルタグもよく使うタグです。実際、当サイトでも頻繁に使っています。注意事項の表示や、データを表でまとめる際に大変便利です。

 

使い方は、テーブルを挿入したい場所に、カーソルを移動し、「テーブル」のアイコンをクリックします。

WordPress投稿機能ビジュアルエディタの使い方11

 

下図のような表示が現れるので、「テーブルを挿入」から挿入したい数のテーブルを指定してクリックします。下図では、3行(横)×2列(縦)で指定しています。

WordPress投稿機能ビジュアルエディタの使い方12

 

クリックすると下図のような小さいテーブルが表示されます。セルの中に文字を入ることでセルは大きくなります。また、テーブルの右側上下どちらかの「□(四角)」をドラッグ&ドロップしても調整できます。

WordPress投稿機能ビジュアルエディタの使い方13

 

この方法以外にも、調整したいテーブルを指定して、テーブルのアイコンをクリックすると「表全体の設定」や「行、列の追加」、「行、列の設定」が可能になります。ここでは、詳細は解説しませんので、実際に使って試してみてください。

WordPress投稿機能ビジュアルエディタの使い方14

 

1-2-5.画像の回りに余白を設定

文章中に画像を挿入すると、デフォルトでは下図(今回は、画像を左寄せで挿入)のように余白が設定されます。この画像回りの余白の幅を調整して、コンテンツを見やすくすることができます。

WordPress投稿機能ビジュアルエディタの使い方15

 

設定方法は、余白を調整したい画像をクリックして選択します。次に「画像の挿入/編集」のアイコンをクリックします。

WordPress投稿機能ビジュアルエディタの使い方16

 

すると、「画像の挿入/編集」がポップアップで表示されます。「詳細」のタブをクリックすると「上下余白」と「左右余白」の項目があるのでピクセル数を入力してください。あとは、「OK」ボタンをクリックすれば余白の設定完了です。

WordPress投稿機能ビジュアルエディタの使い方17

 

下図の余白は、上下、左右の余白を40にした場合の表示です。

WordPress投稿機能ビジュアルエディタの使い方18

 

まとめ

今回は、内容を絞って解説しました。ビジュアルエディタは使いながら理解していく機能なので、まずは実践してみましょう。使っていくうちに色々な機能を覚えていくと思います。

 

それから、始めにも説明しましたが、必ず最初にTinyMCE Advancedをインストールして下さい。TinyMCE Advancedの設定と使い方については、「TinyMCE Advanced:設定方法と使い方」で詳しく解説しています。

 

 

 

Pocket

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Lazy Load の設定方法01

Lazy Load :設定方法と使い方

スタートのイメージ画像

アフィリエイトの始め方を3つのステップで解説

お金のイメージ画像

アフィリエイトで稼ぐ人の5つの特徴

アフィリエイトにおすすめのブログを正しく選ぶ方法

SEOに強いタイトルタグの書き方のイメージ画像01

集客を3倍に増やす!SEOに強いタイトルタグの書き方

サーバーにWordPressを簡単にインストールする方法のイメージ画像01

サーバーにWordPressを簡単にインストールする方法