サポートに戻る コンテンツとメディア ページと投稿 クラシックエディターを利用する

クラシックエディターを利用する

このガイドではクラシックエディターの使い方を説明します。デフォルトの WordPress エディターまたはブロックエディターを使用している場合は、こちらのガイドをご覧ください。

⚠️

クラシックエディターがまだ利用できる期間でも、使用はおすすめしません。ブロックエディターを使用することで、現代のインターネットユーザーが期待するメディアリッチでモバイル対応型の独自のウェブサイトを作成できます。ブロックエディターへの移行については、こちらのガイドをご覧ください。

クラシックエディターへのアクセス方法

この説明では WP 管理画面インターフェースを例として使用しています。このインターフェースを表示するには、右上にある「表示」タブをクリックして「クラシック表示」を選択します。

編集したいページの上にカーソルを合わせ、下にメニューが表示されたら、クラシックエディターを選択します。

ページのリストとクラシックエディターのリンクの画像

プラグイン対応のプランをご利用の場合は、「プラグイン」→「インストールされたプラグイン」でクラシックエディターを有効化してクラシックエディターにアクセスできます。

クラシックエディターについて

クラシックエディターを使用すると、ワープロのようにビューでコンテンツを容易に作成、編集、フォーマットできます。

💡

投稿またはページの HTML ビューの表示をやめるには、エディター領域の右上隅にある「ビジュアル」タブを選択します (以下を参照)。

「ビジュアル」タブがハイライト表示されたクラシックエディターのスクリーンショット。
「ビジュアル」タブを開いていることを確認してください

📌

クラシックエディターのコンテンツのスタイルは、選択したテーマの CSS (色、間隔、幅などの HTML スタイリングを提供するコードの種類) によって決まります。エディターに表示されるコンテンツは、ライブサイトのものと正確に一致しない場合があります。「プレビュー」ボタンを使用して、ライブサイトに表示される投稿やページを確認してください。

クラシックエディターボタンの説明

クラシックエディターには2行の編集ボタンがあります。マウスオーバーすると、各ボタンの機能を確認できます。アイコンとその目的を説明する小さなツールチップが表示されます。

編集ボタンの1行目

クラシックエディターを初めて開いたときには、次のようにアイコンが1行で表示されます。

クラシックエディターのツールバーの1行目のアイコンの画像
1行目の編集ボタン – 以下の各オプションの説明をご覧ください
  1. メディアを追加
  2. スタイル – テーマで定義されたさまざまな書式設定スタイル
  3. 太字
  4. イタリック
  5. 番号なしリスト (箇条書き) :
    • 項目1
    • 項目2
  6. 順序付きリスト
    1. 項目1
    2. 項目2
  7. 引用 (引用テキストのスタイル方法。テーマによってスタイルは異なります)
  8. 左揃え
  9. 中央揃え
  10. 右揃え
  11. リンクを挿入 / 編集 / 削除
  12. 「続きを読む」タグを挿入
  13. ツールバー切り替え (編集アイコンの2番目の行を有効にします)
  14. お問合せフォームを追加
編集ボタンの2行目

アイコンの2番目の行を表示するには、最初の行の右側にある「ツールバー切り替え」アイコン (上記の13番目のボタン) を選択します。選択すると、次のような2行目のツールバーが開きます。

クラシックエディターの2行目のツールバーアイコンの画像
2行目の編集ボタン – 以下の各オプションの説明をご覧ください
  1. 打ち消し
  2. 横ライン
  3. 文字色を選択 – 文字色を変更
  4. テキストとしてペースト
  5. 書式設定をクリア
  6. 特殊文字を挿入
  7. インデントを戻す – テキストを左に移動
  8. インデント – テキストを右に移動
  9. 元に戻す – 最後のアクションを元に戻す
  10. やり直し – 最後のアクションをやり直す
  11. ヘルプ – キーボードショートカットを表示する

配置

対応するアイコンを使用して、テキストと画像の両方を配置できます。


左揃え
左揃え


右揃え
右揃え

中央

中央揃え
中央揃え

スタイル

スタイルのドロップダウンメニューを使用すると、選択したテキストの書式設定を変更できます。テーマに組み込まれているさまざまな見出しやその他の事前定義されたスタイルを変更できます。

その他のスタイルを変更するには、カスタム CSS (および CSS の適切な知識) が必要です。

Classic Editor のテキストスタイル
Classic Editor のテキストスタイル

文字色

文字色を変更するには、最初にテキストのセクションをハイライト表示する必要があります。

文字色ボタンの横にある下矢印をクリックすると、色選択ツールが表示されます。色選択ツールが開いている間、矢印は上向きになっています。上矢印をクリックすると、色を選択せずに選択ツールを閉じることができます。

色選択オプションの画像

色を選択すると、選択したテキストにその色が適用され、その色が色ボタンのデフォルト色になります。

文字色ボタンをクリックすると、最後に設定されたデフォルト色が適用されます。

デフォルトの色選択ボタンの画像

テキストを貼り付け

他の場所からテキストをコピーして貼り付けると、想定したとおりに表示されない場合があります。これは他のプログラム (メールやワープロなど) から貼り付けることで不要な書式までコピーしてしまう場合があるためです。

「テキストとしてペースト」ボタンを使用すると、特別なクリーンアップ処理が実行され、特別な書式設定とテキストの書式設定を変更する可能性のある HTML タグが削除されます。

「プレーンテキストオフ」モードの場合、ツールバーは次のようになります。周囲にボックスが表示されません。

「テキストとしてペースト」ボタンがオフの場合の画像

「プレーンテキストオン」モードの場合、ツールバーは次のようになります。アイコンの周りにボックスが表示され、ボタンに黒色の影が付きます。

「テキストとしてペースト」ボタンがオンの場合の画像

書式設定をクリア

「書式設定をクリア」ボタン

「書式設定をクリア」ボタンを使用すると、ハイライト表示されているテキストの部分からすべての書式設定 (太字、斜体、色など) が削除されます。最初にテキストを選択します。

書式が設定されているテキストの画像

ボタンをクリックすると、すべての書式設定が削除されます。

「書式設定をクリア」ボタンをクリックした後のテキストの画像。

特殊文字

投稿やページに特殊文字を挿入できます。文字を挿入する場所にカーソルを置き、カスタム文字の挿入ボタンをクリックします。次のようなポップアップウィンドウが表示されます。

特殊文字の画像

任意の文字をクリックすると、カーソルの位置にその文字が挿入されます。

インデントを戻す / インデント

「インデント」ボタンはテキストを1レベルずつ移動し、「インデントを戻す」ボタンは1レベル戻します。

インデントを戻す例
インデントの例

スペース挿入

Enter (Return) キーを押すと、入力中の段落が終わり、新しい段落が始まります。新しい段落を作成せずに新しい行を開始する場合は、Shift キーを押しながら Enter キーを押します。

キーボードショートカット

クラシックエディターには、キーボードショートカットやホットキーがいくつか組み込まれています。

使用可能な全ショートカットのリストを表示するには、「ツールバー切り替え」をクリックして2番目の行のアイコンを表示し、2番目の行の最後にある「キーボードショートカット」(クエスチョンマーク) アイコンをクリックします。

ウィンドウがポップアップ表示され、エディターで使用可能なキーボードショートカットのリストが表示されます。

キーボードショートカットの画像

デフォルトのショートカットを使用するには、Mac では Command + キー、Windows では Ctrl + キーを押します。

キー操作キー操作
cコピーx切り取り
v貼り付けaすべて選択
z元に戻すyやり直す
b太字iイタリック
u下線kリンクの挿入 / 編集

その他のショートカットは、Mac では Ctrl + Option + キー、Windows では Ctrl + Alt + キーを押します。

キー操作キー操作
1見出し12見出し2
3見出し34見出し4
5見出し56見出し6
l左寄せc中央揃え
r右寄せj両端揃え
d打ち消しq引用
u箇条書きリストo番号付きリスト
aリンクの挿入 / 編集sリンクを削除
m画像の挿入 / 編集t「続きを読む」タグを挿入
hキーボードショートカットxコード
pPage Break タグを挿入

Copied to clipboard!