ブログの始め方

WordPressのエディタの使い方!ビジュアルエディタの装飾ボタンを解説

前回はWordPressのブログの書き方について、
記事投稿までの流れを解説しました。

その中でも少し触れましたが、
ビジュアルエディタを使いこなせば
見出しや文字装飾も簡単に行うことができます。

ひたすら真っ黒の画面というのも
退屈で読み進めにくいものですので、
特にトレンドブログ実践者の方は
文字装飾や画像を挿入を入れながら読者の離脱を防ぎましょう。

ここではビジュアルエディタを中心に
2種類のエディタの使い方を解説していきますので、
初心者の方はぜひ参考にしてみて下さいね!

blog,画像
【初心者必見】WordPressのブログの書き方!記事投稿の基本の流れを解説今回はWordPressでのブログの書き方についてのお話です。 プラグインや初期設定を済ませたら、いよいよブログの作成です。 ...

WordPressのエディタの使い方!

WordPressの記事の投稿画面では、
2種類のエディタが使用できます。

  1. テキストエディタ:HTMLタグなどコードを使って編集
  2. ビジュアルエディタ:装飾したデザインが表示された画面で編集

テキストエディタ

こちらがテキストエディタの編集画面です。

テキスト,写真

テキストエディタは、
本来のHTMLタグが全て表示されているモードです。

文字装飾やオブジェクトの挿入は全てコードの入力で行います。

Twitterやインスタの埋め込みや、
普段使用しているGoogle AdSense以外のリンクを貼る時などは
こちらのテキストエディタでしか挿入ができません。

SNS投稿や広告の埋め込みは
テキストエディタに切り替えてコードを貼り付けていくだけなので、
特別詳しい知識が必要なわけではありません。

ビジュアルエディタ

こちらがビジュアルエディタの編集画面です。

ビジュアルエディタ,写真

初心者向けなのは、こちらのビジュアルエディタです。

テキストエディタに比べて、
実際に投稿されたときのイメージが見えるので分かりやすいですね。

自分でタグを挿入しなくてもボタン一つで
装飾や見出しの設定ができるので、
初心者でも簡単に使いこなせます。

画像も全てプレビューしたまま記事を作成することができます。

基本的には、視覚的に記事が作成していけるので
ビジュアルエディタを使用していくことをオススメします。

ただ、SNSの埋め込みなど
テキストエディタでないと出来ない作業もありますので、
必要に応じて切り替えながら使っていきましょう。

ビジュアルエディタの装飾ボタンを解説

それでは、ブログを書くときにメインで使っていく
ビジュアルエディタの使い方を解説させていただきます。

記事の投稿は、ダッシュボードから
投稿>新規追加をクリックで投稿画面に移動できます。

投稿,写真

本文入力欄の右上にエディタ選択タブがありますので、
これをクリックしてエディタを切り替えてくださいね。

エディタ,写真これ以降は、
TinyMCE Advancedがインストールしていることを
前提でお話しさせていただきますので、
以下の記事を参考にインストールと設定を済ませておきましょう。

装飾,画像
WordPressの文字装飾プラグインTinyMCE Advancedの設定方法や使い方を解説WordPressで記事を作成するときには、 「いかに作業を効率化するのか」ということはとても大切です。 限られた時間の中で1記...

見出し

見出しというのは、
記事の中で何について書いてあるのかを示す部分です。

見出しとは

WordPressでは、
見出し1〜見出し6(h1〜h6)という6つの見出しが存在します。

当サイトのテンプレート「JIN」だとこんな感じ。

JINの見出しの種類の画像

賢威だとこんな感じです。

見出し,写真

これらを効果的に使うことで、分かりやすく読みやすい記事を作れます。

ブログの見出し1はブログのタイトルのことです。

ですので、見出し1については
1記事につき一つしか使わないルールとなっています。

大見出しの見出し2から先は、
記事の構成により小見出しの
見出し3、見出し4…と増やしていきましょう。

この見出しの使い方は、
本の目次と同じと考えていただければ分かりやすいと思います。

目次,写真

本のタイトル:見出し1
章(大項目):見出し2
小項目:見出し3

こんな感じで大きい見出しが設定され、
その中でさらに細かい項目が小見出しとして設定されていますよね。

図にするとこんな感じです。

見出し,写真

見出しは2→3→4…と必ず順番を守って使っていきましょう。

見出し5→2→4…のような使い方はNGです。

記事を書くときの流れとしては、

タイトルが決まったら「見出し2」となる大見出しを3つ程度決める

→見出し2の中で話題を分けて「見出し3」を作る

→見出し3の中でも話題がたくさんあれば「見出し4」を…

→その見出しに応じた内容を書いていく

私は基本的に見出し2と3を使用するようにしていますが、
今回の記事などボリュームが増えた時は見出し4まで使用しています。

見出しの設定

見出しの挿入方法は、
見出しにしたい文をドラッグしてから
「段落」と書いてあるボタンから見出しの種類を選択できます。

見出し,写真

太字

文字装飾のなかでも最も重要なのが「太字(強調)」です。

太字にすることで、文中の大事な部分が強調されます。

太字,写真

太字の方法は、強調したい部分を選択して「B」ボタンをクリック。

太字,写真

注意点としては、太字を使いまくらないこと

いろんな単語や文章を強調しまくっていては、
大事なことが目立たなくなってしまいますよね。

一つの段落で最大2つ程度がベストと考えましょう。

ただ、この数も決まりではないので臨機応変に使ってください。

文字サイズ

強調したい時や重要な文章など、
文字サイズを一部だけ変更することも可能です。

文字サイズ,写真

文字サイズの変更は、変更したい箇所を選択したら
プルダウンから希望のサイズを選んでください。

文字サイズ,写真

ただ、私はあまり文字サイズの変更は行なっていません。

たまにならいいと思いますが、
しょっちゅう文字サイズが変わるのはちょっとうるさく感じるかな…と個人的に考えています。

文字色・背景色

強調したい時には、
太字だけでなく文字色背景色を変えるという方法もあります。

文字色,写真

文字色も背景色も変更方法はほぼ同じですが、それぞれ解説していきます。

文字色の設定

変更箇所を選択し、
Aボタンをクリックして好きな色を選択しましょう。

文字色,写真

もしこの中に希望の色がない場合は
「カスタム」をクリックすることでさらに細かい色の指定ができます。

カスタム,写真

好きな色の箇所にカーソルを合わす、
もしくは16進数のカラーコードを入力して「OK」をクリックしましょう。

文字色,カスタム,写真

背景色の設定

変更箇所を選択し、
Aボタンをクリックして好きな色を選択しましょう。

背景色,写真

細かいカラーの設定は文字色と同じ方法です^^

引用

他サイトやSNSから文章や画像などを引用するときに、
そのまま文章を掲載するのではなく「引用」を使って
出典(元URL)を使用して掲載する方法があります。

引用の方法は、引用文を選択して「引用」のボタンをクリック。

引用,写真

下の画像では「引用元:URL」の部分は文字サイズを変更して、
引用元のリンクを挿入しました。

文字にURLをリンクとして挿入する方法は、
この後に出てくる「リンク」で解説していきます。

引用,写真

リンクの挿入

リンクの挿入とは、記事の本文に
外部サイトや自分のサイトの他の記事に対するリンクを設定する方法です。

Juriのサイトはこちら→zerokara

こんな感じで、
「zerokara」というただの文字列に
クリックするとURLにジャンプできるリンクをつけることができます。

リンクの挿入

リンクの挿入の方法は、設置したい部分を選択して
リンクマークをクリックしてください。

リンク,写真

するとURL入力欄が現れますので、
リンク先のURLを入力し「適用」ボタンをクリックで完了です。

リンク,写真

リンクの修正・編集

URLを修正したい場合は、
該当箇所にカーソルを合わせて「Edit|button」をクリックすると編集ができます。

リンク,写真

ちなみに、URL設定の右側のボタンの
「リンク設定」をクリックすると、

リンク,写真

自分のサイト内の記事が探せるので、
すぐにURLが見つかります。

リンク,写真

「リンクを新しいタブで開く」という設定も
こちらから決めることができます。

リンクの削除

リンクを削除する場合は、
該当箇所にカーソルを合わせて「リンクの削除」をクリックすると
リンク設定が削除され普通の文字列に戻ります。

リンク,写真

リスト

リスト機能は、複数の項目を箇条書きにしたい時に便利です。

リストには以下のような「番号なしリスト」と、

番号なしリスト
番号なしリスト
番号なしリスト

以下のような「番号付きリスト」があります。

  1. 番号付きリスト
  2. 番号付きリスト
  3. 番号付きリスト

箇条書きにしているものが整理されて見やすくなっていますよね。

設定方法は簡単なので活用していただければと思います。

番号なしリストの設定

番号なしリストの設定方法は、
リストにしたい部分を選択して
プルダウンから好きなデザインを選んでいきます。

先頭のマークは自動的につきますので、自分で入力する必要はありません。

番号なしリスト,写真

番号付きリストの設定

番号付きリストの設定方法も、番号なしリストと同様です。

リストにしたい部分を選択して
プルダウンから好きなデザインを選んでいきます。

番号は自動的につきますので、自分で入力する必要はありません。

番号なしリスト,写真

表の挿入

データをまとめて紹介するときなどは、
表を使うと見えやすくなります。

ボタンから簡単に設定ができますので、マスターしておきましょう。

表の挿入

まずは表のアイコンをクリックし
「テーブルを挿入」にカーソルをあてます。

すると表が視覚化されたところから行と列の数値を選択できます。

表の挿入,写真

ここでは10×10が最大値です。

あとで行と列を追加、削除、セルの結合をすることも可能です。

追加や削除

行や列を追加するときは、
表のアイコンをクリックから設定ができます。

該当箇所にカーソルを合わせて表のアイコンをクリックすると、
このような画面が表示されます。

「列」の項目を見てみると
こんな感じで列の追加や削除が選択できます。

列の追加,写真

このプロパティでは、

  1. 列や行の挿入や削除
  2. 表の削除
  3. セルの結合
  4. セルの背景色や枠線の設定

などなど細部まで設定ができます。

今の解説の方法を使って作成した表はこんな感じです。

表,写真

色々試しながらマスターしていきましょう。

携帯用に幅を調整

設置した表がPCではうまく表示されても、
携帯の表示だと画面から表がはみ出してしまうということがあります。

途中で切れてしまって全てが表示されないのは問題なので、
それを防ぐための設定をしましょう。

表を設置してセルの中に文字を全て打ち込んだら、
表のアイコンから「表のプロパティ」をクリックしてください。

表のプロパティ,写真

細かい設定画面が開きますので、
ここで幅の数値を空欄にしておきましょう。

表のプロパティ,写真

これで携帯からでも綺麗に表示されるようになります。

WordPressのエディタの使い方まとめ

WordPressのエディタの使い方についての解説させていただきました。

ビジュアルエディタはボタン一つで
色々な設定ができるのでとても便利です。

使いこなして快適に記事作成をしていきましょう。

ですが、気をつけたいのが
最初から装飾や表にこだわりすぎて時間をかけ過ぎること(笑)

まずは基本の使い方だけ覚えてどんどん記事を書いていきましょう!

文字の装飾などにこだわるのはそのあとでも大丈夫です。

最後まで読んでいただき、ありがとうございました!

Juri
Juri
私は現在、PC1台でシゴトをしながら湘南ライフを送っています。

海が近くにある大好きな街で、好きな時に起きて、好きなだけ働いて、好きな人とだけ過ごす...こんな自由な生活をしています。

今でこそストレスフリーな生活を送っている私ですが、つい最近までは普通の銀行員で家と職場を往復するだけの平凡な毎日を過ごしていました。

やりたいことはもちろん、これといって得意なことも、夢中で打ち込めるものもありませんでした。

では、私はどうやってここまでたどり着いたのか...興味がある方はよかったら私のプロフィールをご覧ください。

こちらからどうぞ▶︎▶︎JuriのPROFILE