WordPressクラシックエディターの使い方

この記事では、WordPressの投稿・記事編集に利用する、クラシックエディターの操作方法について説明しています。

クラシックエディターとブロックエディターの事前知識はこちらの動画から

ブロックエディターの操作説明はこちら

WordPressで記事を投稿

記事を書くには「投稿画面」へ移動

ワードプレスの管理画面にログインすると、下の画像のように「ダッシュボード」の画面になりますので、赤枠内の「投稿」にマウスを乗せて表示された「新規追加」をクリックし「投稿ページ(記事投稿)」に移動します。

WordPressクラシックエディターの使い方1

タイトルを書く

投稿ページに移動すると、下の画像のような画面が表示されるので、赤枠内にタイトルを書いていきます。

WordPressクラシックエディターの使い方2

グーグル検索したときに全表示させるのは35文字内におさえる必要がありますので、チェックしておきましょう。

見出し(h2~h4)を作る

タイトルの下にある白い枠内に本文を記載していきます。

WordPressクラシックエディターの使い方3

見出しを作るときは、まず見出しとなる文字を用意します。

WordPressクラシックエディターの使い方4

用意した文字をマウスでドラッグして選択します。

WordPressクラシックエディターの使い方5

文章入力欄の上に用意されている、文字装飾用のツールバーから「段落」と表示された部分をクリックすると、見出しを選択することができます。

WordPressクラシックエディターの使い方6

見出しの種類選択メニューが表示されるので、使用するものを選択します。

WordPressクラシックエディターの使い方7
  1. 【見出し1】・・・タイトル用(本文中には使用しません)
  2. 【見出し2】・・・中見出し(いわゆる見出し)に使用
  3. 【見出し3~6】・・・小見出しに使用

「見出し1」は記事タイトルのみに使用する決まりがあるので、本文入力時に使用してはいけません。

記事タイトルは自動的に「見出し1」が設定されるので何もする必要はありません。

その為、記事の執筆は「見出し2」以降の見出しをつけてください。

見出しを作成すると下の画像のような感じで、大きく表示されます。

WordPressクラシックエディターの使い方8

手順としては、先に見出しをいくつか用意して、その後に見出しの内容となる文章を入力していきます。

WordPressクラシックエディターの使い方9

見出しが再度必要になったら同様の手順で作成します。

本文作成のポイント

先に見出しを用意します。

WordPressクラシックエディターの使い方10

見出しを用意したら、それに合うように文章を入力していきます。

WordPressクラシックエディターの使い方11

記事に画像を入れる

記事内に画像を貼り付けていきましょう。画像を挿入する場合は、挿入したい場所にカーソルを表示しておきます。

WordPressクラシックエディターの使い方12

次に、画面左上の「メディアを追加」をクリックします。

WordPressクラシックエディターの使い方13

すると、メディアの追加画面が表示されるので、「ファイルを選択」をクリックします。

WordPressクラシックエディターの使い方14

すると、パソコン内部の画像が選択できるようになるので、必要な画像をクリックして選択し、そのまま、「開く」ボタンをクリックします。

WordPressクラシックエディターの使い方15

すると、選択した画像がメディア一覧に追加されます。この段階ではまだ記事に挿入はしていません。

WordPressの画像保管庫に収納されるイメージです。

WordPressクラシックエディターの使い方16

メディア一覧の画面では、画像に代替テキストを追加することができます。

代替テキストは該当する画像にチェックが入った状態で、画面右の「代替テキスト」欄に入力します。

WordPressクラシックエディターの使い方17

「代替テキスト」は画像がうまく表示されなかったときに代わりにコメントが表示されるものです。
検索結果の順位に有利に働くものになるので、「見出しと同じ文章」「画像の意味がわかる文章」を簡単に書き入れましょう。

記事内に画像を挿入するには、該当する画像にチェックが入った状態で、「投稿に挿入」をクリックします。

WordPressクラシックエディターの使い方18

すると、記事本文のカーソルがあった場所に画像が挿入されます。

WordPressクラシックエディターの使い方19

挿入された画像を直接クリックすると、画像編集用のツールバーが表示されます。

WordPressクラシックエディターの使い方20

ツールバーにある左寄せなどを行うことで、画像を任意の方向に寄せることができます。

下の画像では、左寄せにした際の状態で、画像が左に、文章が右に回りこむように配置されます。

WordPressクラシックエディターの使い方21

あくまでも、記事編集画面のイメージなので、実際のWEBページ上の表示とは多少異なる場合があります。

その為、実際の状態を見るには、記事編集画面の右上にある「プレビュー」をクリックします。

WordPressクラシックエディターの使い方22

すると、新しいタブで実際のWEBページでの表示を見ることができるので、確認して編集画面に戻ってください。

下の画像が、実際のWEBページでの表示で、記事編集画面と表示できる幅などが違うことから、多少の誤差が発生しています。

WordPressクラシックエディターの使い方23

プレビューページが完成後のイメージになるので、配置などはプレビューから確認しましょう。

再度編集する際はタブを記事編集画面に切り替えてください。

中央揃えだと、画像の横に文章は表示されず、下のようになります。

WordPressクラシックエディターの使い方24

さらに、右寄せの場合は、画像が右によって、文章が左に回りこむ形になります。

WordPressクラシックエディターの使い方25

カテゴリー選定

タイトル → 見出し → 記事 → 画像挿入の順に書いたら、記事の「カテゴリー」を決めます。

画面右側にあるカテゴリー一覧の中から、記事の内容に合うもの1つにチェックを入れてください。

WordPressクラシックエディターの使い方26

「カテゴリー」はあらかじめクライアントが複数用意しているはずなのでチェックを入れればOKです。

アイキャッチ画像を決める

アイキャッチ画像とは、ブログの記事冒頭や記事一覧ページに配置されているサムネイル画像です。

WordPressクラシックエディターの使い方27

設定するには、投稿画面の右下をスクロールした箇所にある「アイキャッチ画像を設定」をクリックします。

WordPressクラシックエディターの使い方28

すると、WordPress内の画像保管庫である、メディアライブラリが表示されるので、画面上の「ファイルをアップロード」に切り替えます。

WordPressクラシックエディターの使い方29

画像挿入時と同様に、画像アップロード画面が表示されるので、「ファイルを選択」をクリックします。

WordPressクラシックエディターの使い方30

アイキャッチにしたい画像を選択して、「開く」をクリックします。

WordPressクラシックエディターの使い方31

すると、選択した画像が、メディアライブラリに追加されます。

WordPressクラシックエディターの使い方32

画像挿入時と同じように、代替テキストを入力したら、画面右下の「アイキャッチ画像を設定」をクリックします。

WordPressクラシックエディターの使い方33

アイキャッチ画像が設定されると、記事編集画面右下に設定した画像が表示されます。

WordPressクラシックエディターの使い方34

プレビューで記事をチェックする

記事ができたらプレビューでチェックしてみましょう。

記事編集画面右上の「プレビュー」をクリックします。公開はクライアントが行うので押さないように注意しましょう。

WordPressクラシックエディターの使い方35

プレビューすると、新しいタブで実際のWEBページ上の表示を確認することができます。

WordPressクラシックエディターの使い方36

手直しが必要であれば「投稿を編集」からすぐに編集画面に戻れます。

WordPressクラシックエディターの使い方37

下書き保存する

記事ができたら編集画面の右上にある「下書きとして保存」をクリックします。

「公開」をクリックするとWEB上に記事が公開されてしまうので注意してください!

WordPressクラシックエディターの使い方38

記事の公開

記事を編集し、プレビューなどで最終確認までできたら記事を公開しましょう。

公開した段階で、その記事は全世界で閲覧可能となります。

しっかりと中身の確認を行ってから公開しましょう。

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

コメントを残す

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

CAPTCHA


フォームから

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

問い合わせする
LINEから

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

友達追加する