スライドショー

初心者向け WordPressエディターの使い方とおすすめプラグイン

こんにちは! ライターのナナミです。WordPressで記事を投稿する、この画面ありますよね。

editor1

この画面、シンプルに見えて、色々と機能が詰まった画面なんです。

そうは言われてもどう使うのかわからない…
なんか思ったような見栄えの投稿にできない…

そんな方でも、この記事を読めば大丈夫!WordPressの投稿画面、エディタの使い方を解説していきます。この記事は下記の流れで進めていきます。

  • 【基礎】エディタとは何か
  • 【基礎】ビジュアルエディタについて
  • 【基礎】テキストエディタについて
  • 【発展】プラグインでカスタマイズしよう

エディタの使い方を理解すれば、記事の投稿が楽々できちゃいます。ばっちり覚えちゃいましょう!

エディタとは?

下記の画像の、赤い枠で囲われているのがエディタです。

editor2

記事の本文を入力する箇所ですね。上の部分にボタンやタブが付いていて、なんか色々できそうな感じがしますね。まさにその通りで、記事を書く上での文字の強弱や文字揃え、画像の配置などの機能が付いている入力機能なんです。

使いこなせれば、コードがわからなくてもいい感じに投稿できちゃう優れものです。この記事はこのエディタの、文字入力の部分をメインに解説していきます。画像の配置については、下記の記事などの解説をご覧ください。

https://www.adminweb.jp/wordpress/editor/index9.html

WordPress標準のエディタには、ビジュアルエディタテキストエディタという2つの種類があります。それぞれについては、このあと解説していきますね。

入力そのまま表示:ビジュアルエディタ

エディタの右上にある「ビジュアル」というタブを選んだ状態がビジュアルエディタです。

editor3

この状態だと、入力された内容や見栄え、文字の位置などは入力された見た目に合わせて画面に表示されます。

editor4

ビジュアルの状態をある程度そのまま表示するので、ビジュアルエディタというわけです。

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

ビジュアルエディタは、特に何も考えずべしべし書いちゃって大丈夫です。改行もそのまま反映してくれます。見出しや強弱を設定する場合は、見栄えを変えたいテキストをドラッグなどで選択して、上のボタンをぽちっと押すだけです。

editor5

各ボタンの機能は、下記の表で確認してみてください。

画像名前説明
editor_table1テキストの種類段落や見出しなど、テキストの種類を指定することができます。
editor_table2強調文字を太くします
editor_table3斜体文字を斜めにします
editor_table4番号なしリストテキストの頭に点が付いたリストを作成します
editor_table5番号付きリストテキストの頭に数字が付いたリストを作成します
editor_table6引用引用文であることが明確になるよう、文字の色を少し薄くして斜体にします
editor_table7文字揃え文字の揃えを左、中央、右のどれにするかを選べます
editor_table8リンクリンクを設定することができます
editor_table9「続きを読む」タグ記事の一覧で表示する文と、文章全体を区切ります
editor_table10
ツールバー切り替えさらに細かい設定用のツールバーを開きます

ツールバー切り替えで表示される詳細設定については、詳細な解説は省きます。各ボタンをマウスオーバーすると説明が出るので、それを参照してみてください。

ビジュアルエディタはどんな人におすすめ?

コードを書く必要がないので、HTMLやCSSなど、コードに対する知識は持っていないという人におすすめです。感覚でがしがし書けちゃうので、お手軽なのも魅力ですね!

HTMLで書く:テキストエディタ

ビジュアルエディタに対して、HTMLと同じようにコードを使って書くモードがテキストエディタです。右上のタブの「テキスト」が選ばれている状態ですね。

editor6

ビジュアルエディタのように、入力そのままの表示にはなりません。その分、HTMLとCSSを使って、細かい見た目の設定などを行なうことができます。「HTMLとCSSって何…?」という人は、ぜひ下記の記事を読んでみてください。

HTMLとCSSの関係とは?基本的な書き方を4つのステップで理解しよう
更新日 : 2019年7月11日

テキストエディタの使い方

基本的に、HTMLと同じようにコードと文章を書いていけばOKです。

editor7

上のボタンは、デフォルトで設定されているコード自動挿入ボタンです。適用したい文字をドラッグで選択して、ボタンをポチッと押すと、自動的にタグを挿入してくれます。

editor9

テキストエディタはどんな人におすすめ?

HTML、CSSの知識があり、細かく見栄えを設定したい人におすすめです。ちょっと手間はかかりますが、ビジュアルエディタよりも自由なレイアウトができますよ!

プラグインでカスタマイズ

デフォルトの機能も充実していますが、これじゃあ物足りない…という方もいるかもしれませんね。そんな時はWordPress最大の強み、プラグインの出番です!

プラグインを使えば、エディタを使いやすくカスタマイズすることができます。どんなプラグインがあるのか、いくつか例を出してみましょう。

ビジュアルエディタ用:TinyMCE Advanced

editor_plug-in1

デフォルトのビジュアルエディタではできない、文字サイズの調整や背景色の設定など、様々な機能を追加してくれるプラグインです。かなり色々なボタンが追加されるので、見栄えの自由度がぐっと上がりますね!

テキストエディタ用:HTML Editor Syntax Highlighter

editor_plug-in2

テキストエディタの画面を、コードが見やすいように色付けしたりして表示してくれます。普段のコーディングのように扱えるようになるので、HTMLやCSSを書くのも捗りそうですね。

まとめ

いかがでしたか?エディタの種類とそれぞれの特性がわかれば、あとは自分に合った方法で書くだけ!もっと機能を追加したいと思ったら、プラグインを使えばOKです。ぜひ、WordPressで素敵な記事をたくさん書いてくださいね。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説