8 【WordPress投稿】クラシックエディター・ブロックエディター

ワードプレスのインストールと初期設定が済んだら、いよいよ記事の投稿ですよね!

しかし、ワードプレスの記事の投稿方法は慣れていないと少しややこしいところがあります。

この記事では、投稿についての簡単な説明をしていきます。

WordPressクラシックエディター・ブロックエディター1

はじめに

ワードプレスで記事を書くというのは、投稿をするということに当たります。

WordPressクラシックエディター・ブロックエディター2

その為、ワードプレスの管理画面では「投稿」という機能を使っていくことになります。

WordPressクラシックエディター・ブロックエディター3

実際に記事が公開されるまでの流れとしては、「投稿」機能から「新規追加」で新しい空白の記事を出して、そこに内容を書いたら「公開」することで、その投稿記事が全世界に発信されます。

WordPressクラシックエディター・ブロックエディター4

無料ブログなどを使ったことがある方はそれなりに、何となくで記事を書くことができてしまうかもしれませんが、あまり慣れていない方だと難しく感じてしまうかもしれません。

WordPressクラシックエディター・ブロックエディター5

しかし、基本的な使い方さえ知ってしまえば、実はそんなに難しくないということがわかりますので、重要な部分を先に知っておきましょう。

記事が表示される仕組み

WordPressクラシックエディター・ブロックエディター6

記事だけでなくサイト全てにおいて言えることですが、文字や画像など、あらゆるものをWEBサイト上で表現しているのはHTMLとCSSです。

WordPressクラシックエディター・ブロックエディター7

もちろん細かく言うと他にも様々な仕組みで出来上がっていることも

多々ありますが、まずはこれだけ知っておきましょう。

HTMLとCSSです。

この言葉で逃げたくなる気持ちが出るかもしれませんが、話は簡単ですから一度聞いてみてください。

画面上に1段落の「あいうえお」と言う文字を表示する場合はこのように入力する必要があります。

<p>あいうえお</p>
※他にも方法はありますが一般的な例です

Pと言うのは段落という意味があり、これで挟み込むと、間の文字が1段落で画面上に表示できます。

WordPressクラシックエディター・ブロックエディター8

※あくまでも一例です。

これをpタグなどと呼んだりします。

WordPressクラシックエディター・ブロックエディター9

また、他にも様々なタグが存在していて、見出し用のタグや、リスト用のタグなど、用途に合わせて使っていきます。

これがHTMLです。

WordPressクラシックエディター・ブロックエディター10

そして、このように装飾すると

WordPressクラシックエディター・ブロックエディター11

P{color:#f00;}

先ほどのpで囲まれた部分である「あいうえお」が赤くなります。

これがCSSです。

WordPressクラシックエディター・ブロックエディター12

元々はこんなことをひたすら入力していってサイトや記事を作成していました。

WordPressクラシックエディター・ブロックエディター13

しかし、お分かりの通り、書き方に様々なルールがあり、しっかりと覚えていかないとスムーズに記事を書いたりすることができません。

そこで活躍するのが記事編集を手助けする「エディター」というものです。

WordPressクラシックエディター・ブロックエディター14

エディターを使えば、例えば先ほどの「あいうえお」というものは、pタグなどを無視して、ただ言葉を書けばOKだったり、赤くする場合も、文字を選択して赤ボタンを押すだけなど、簡単に行うことができるようになります。

これは、仕組みが全く変わったのではなく、エディターが先ほどのコードを勝手に挿入してくれているわけです。

エディターも完璧ではありませんので、「さらに細かい装飾を行いたい」と言う場合は、

先ほどのようにワンタッチではいかないということもあります。

その時は、HTMLやCSSを自分でカスタマイズすることによって実現します。

WordPressクラシックエディター・ブロックエディター15

その為、時にはHTMLやCSSの知識が必要になる場合があります。

初心者の方はまずは、エディターで可能な範囲で作ってみましょう。

エディターについて

記事を書くためには記事編集画面を利用します。

ワードプレスに限らずですが、その編集画面や編集するためのツールを「エディター」と呼んでいるので覚えておきましょう。

WordPressクラシックエディター・ブロックエディター16

ワードプレスには大きくわけて2種類のエディターが存在します。

「クラシックエディター」「ブロックエディター」です。

WordPressクラシックエディター・ブロックエディター17

なぜ2種類あるのか?

WordPressクラシックエディター・ブロックエディター18

あまり詳しくない方は要点だけでも知っておいた方が良いです。

細かい話をしていくと長くなるので簡単に説明します。

少し前まではクラシックエディターのみでしたが、WordPressの運営側が公式に新しいエディターであるブロックエディターを発表し、「こちらに移行していく」という話になりました。

しかし、クラシックエディターに慣れたWordPressの利用者たちが実際にブロックエディターを使ってみると、慣れていないということから「使いづらい」とかなりの批判が出てしまい、WordPress運営側は、「完全以降ではなく使いやすい方を」という話に落ち着いてしまいました。

かなり省略しましたが、簡単な話の流れはこんな感じです。

その為、現在ワードプレスでは、ブロックエディターが標準搭載でクラシックエディターを利用したい場合は「プラグイン」で対応するという形になっています。

WordPressクラシックエディター・ブロックエディター19

世の中には、ワードプレスの困りごと解決記事などがたくさんありますが、投稿画面に違いがあるのもこのせいです。

初心者の方は、まず2種類あることをしっかり認識しておきましょう。

また、どちらのエディターで困ってもすぐに焦らないこと。

焦らなければ、実はそんなに難しい話ではなかったということが多々あります。

クラシックエディターとブロックエディター

それでは、2種類のエディターはどんな違いで、どっちを使えば良いのか?

結論から言うと、使いやすい方です。

その為、まずは簡単に違いを見ていきましょう。

クラシックエディター

クラシックエディターは、このような見た目になっています。

無料ブログなどでもよく利用される典型的な記事作成画面です。

シンプル設計で、ポイントは「できることが全体像として見える」という点です。

WordPressクラシックエディター・ブロックエディター20

どの部分で何をするかがだいたい見えているので、初めてでもある程度探しがなら使えます。

簡単な文字と装飾を行うと次のようになります。

まずは、文字を入力。

WordPressクラシックエディター・ブロックエディター21

その文字をマウスなどで選択して、画面上部のボタンから色を選ぶと、このようになります。

このクラシックエディターには、モードの選択機能があります。

いわゆる表示状態のことで、現在見ているのは「ビジュアルエディター」です。

WordPressクラシックエディター・ブロックエディター22

ビジュアルエディターは、実際にWEBサイト上に表示される見た目で、編集していくことができるモードです。

WordPressクラシックエディター・ブロックエディター23

もう一方の「テキストエディター」に切り替えてみましょう。

すると、先ほど入力や装飾したものが、HTMLコードとして表示されます。

WordPressクラシックエディター・ブロックエディター24

本来は、このテキストエディターのような形式で、コードを入力していくことでサイトを作成していましたが、現在はビジュアルエディターのように知識が無くても直感的にサイト作成ができるようになっていることが多いです。

WordPressクラシックエディター・ブロックエディター25

しかし裏では、このようにしっかりとコードが打たれていると言うことだけ理解しておきましょう。

WordPressクラシックエディター・ブロックエディター26

また、先ほどのビジュアルエディターは便利ではありますが、凝ったデザインの装飾などのボタンはありません。

そういう場合は、テキストエディタにコードを直接入力することで実現が可能となります。

WordPressクラシックエディター・ブロックエディター27

このクラシックエディターはビジュアルとテキストを簡単に行ったり来たりできるのも使いやすいと言われるポイントの一つになっています。

簡単に言うと表と裏の世界というイメージです。

記事を書いたら画面右上の「公開」ボタンから記事を投稿することができます。

WordPressクラシックエディター・ブロックエディター28

公開すると、その投稿を全世界の人が閲覧可能な状態となります。

WordPressクラシックエディター・ブロックエディター29

ブロックエディター

次は、ブロックエディターを見ていきましょう。

ブロックエディターは正式にはグーテンベルクという名称があります。

WordPressクラシックエディター・ブロックエディター30

エディターの困りごとで検索した際に「グーテンベルク」という言葉が出てきたらブロックエディターを指します。

ブロックエディターの見た目はこのようになっています。

何となくすっきりしているように見えます。

クラシックエディターとの違いは、編集ツールや各種機能が、隠されていて、必要に応じて自分で探していくというスタイルです。

クラシックエディターと同じように、簡単に文字を入れてみましょう。

まずは、「あいうえお」と入力。

WordPressクラシックエディター・ブロックエディター31

すると、文字の上にツールバーが表示されます。

WordPressクラシックエディター・ブロックエディター32

文字を選択して、色を指定していきます。

このように変化しました。

クラシックエディターの時のように、実際のコードを表示することもできます。

方法は、画面右上の、3つの点のマークのメニューボタンから「コードエディター」を選択します。

このように、見た目でパッとわからない点がクラシックエディター利用者を悩ませているようです。

WordPressクラシックエディター・ブロックエディター33

しかし、難しいことはしていませんから、簡単ですよね。

次に、画像を挿入してみましょう。

WordPressクラシックエディター・ブロックエディター34

ブロックエディターの最大の特徴は、その名前の通り、ブロック単位で編集することにあります。

WordPressクラシックエディター・ブロックエディター35

ブロックというのはそんなに難しく考えず、ただの一塊と考えましょう。

WordPressクラシックエディター・ブロックエディター36

例えば、「あいうえおの塊の次は画像を挿入しよう」、と思ったら、「あいうえお」は1つの塊として終わりで、次に「画像の塊を作る」というイメージです。

WordPressクラシックエディター・ブロックエディター37

方法も簡単で、Enterキーで改行すると、次の行が現れます。

WordPressクラシックエディター・ブロックエディター38

この段階で新たな塊ができたことになります。

さらに表示されている「+」のマークからその塊を何に使うかを指定するだけです。

WordPressクラシックエディター・ブロックエディター39

今回はEnterキーで新しく生まれた塊を画像にしてみましょう。

「+」のマークから画像をクリックすると、塊が画像用に変わります。

WordPressクラシックエディター・ブロックエディター40

後は、パソコンなどからアップロードするか、すでにワードプレスに入っている画像を使うか指定していくだけです。

WordPressクラシックエディター・ブロックエディター41

このようにブロックという塊単位で構成していくのが、ブロックエディターの最大の特徴となります。

WordPressクラシックエディター・ブロックエディター42

隠れている要素や機能を探していくのがいまどきッぽいスタイルで、慣れれば実は使いやすいのですが、あまり使ったことが無い場合は最初に必要な機能を探していって見つける必要があるということが面倒なので、クラシックエディター利用者が敬遠するようになった気がします。

WordPressクラシックエディター・ブロックエディター43

私自身も最初はブロックエディターを避けていました。

しかし、ちゃんと使ってみるととても使いやすいです。

現在は、必要に応じて使い分けたりしています。

カスタマイズが多く発生するサイトではクラシックエディターを利用したり、記事を増やしていくのがメインのサイトはブロックエディターを使ったりなど、どちらでも使えます。

WordPressクラシックエディター・ブロックエディター44

カスタマイズなどのご相談を頂く場合も、ご依頼される方がどちらのエディターを利用しているかはわかりません。

WordPressクラシックエディター・ブロックエディター45

また、クラウドソーシングなどで記事の執筆のお仕事がありますが、ある程度両方触っておけば、どちらのエディターで指定されても困りません。

WordPressクラシックエディター・ブロックエディター46

それぞれの利用方法

次にそれぞれのエディターを利用する方法を見ていきましょう。

最新のワードプレスをインストールした場合は、標準搭載でブロックエディターになります。

WordPressクラシックエディター・ブロックエディター47

もし、クラシックエディターを使いたい場合は、プラグインを追加します。

WordPressクラシックエディター・ブロックエディター48

クラシックエディターはかなりの利用者がいるため、プラグインの追加画面に移動するといきなり表示されます。

万が一表示されない場合は、プラグインの新規追加画面、右上の検索窓から「Classic Editor」で検索しましょう。

WordPressクラシックエディター・ブロックエディター49

ワードプレスの無料テーマ、「Cocoon」を利用している場合は、プラグインを追加する必要がなく、ブロックエディターとクラシックエディターを標準で

WordPressクラシックエディター・ブロックエディター50

切り替えることができます。

方法は、ワードプレス管理画面の左メニューから「Coconn設定」をクリックして、「エディタータブ」に切り替えると、どちらを使うか選択することができます。

まとめ

お疲れ様でした。

WordPressクラシックエディター・ブロックエディター51

ワードプレスでは、記事の投稿するための編集画面であるエディターが2種類存在するということがわかったと思います。

どちらも慣れてしまえば難しくはありませんので、用途に合わせてどちらでも使えるようにしていくと良いです。

それぞれの詳細な使い方は、WEBサイト以下のページで説明しているのでご覧ください。

また、記事を誰かに書いてもらうなど、クライアントになる場合は、この辺の使い方を作業する方に説明する必要が出てきます。

そのためのマニュアルも販売していますので、ご興味のある方はぜひご利用ください。

WordPressクラシックエディター・ブロックエディター53

マニュアルはPDFファイルになっているので、そのまま作業者に渡せば、初心者の方でもワードプレスで簡単に記事が作成できるようになっています。

WordPressクラシックエディター・ブロックエディター54

マニュアルについての詳細も概要欄から確認することができます

【あきらめないがモットー】ベビー用品・子供おもちゃ企業マネージャー→パソコン教室の教室長→フリーランス/35歳既婚で娘二人は4歳と2歳/WEBサイト・アプリ・SNS全般についてご指導・代行/スキルはHTML・CSS・JavaScript・Jquery・php 企業様からの執筆依頼なども行っています。 WordPressのカスタマイズ・HP作成・各種ご指導やお困りごとはこちらから

コメントを残す

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

CAPTCHA


フォームから

当サイト選択肢に沿ってご依頼

問い合わせする
LINEから

お友達追加で手軽にトーク相談

友達追加する