【WordPress】旧エディターでの記事の作り方&投稿方法を解説

WordPress 記事の作り方&投稿方法 ブログ

ブログを始めたけど、WordPressワードプレスの使い方がよく分からないのよ・・・

「WordPressの使い方が分からない」と嘆く女性

今回はそんなブログを始めたばかりの人に、

WordPressで記事を作って投稿する方法を解説します。

 

ブログで文章を書くだけなら、特に難しいことはありません。

しかし読者が見やすく、分かりやすいブログを作るために、

ブログには様々な装飾を施す必要があります。

 

文章だけが延々と続くブログは読者が途中で読むのが嫌になって、離脱が起こりやすくなります。

一方で記事の途中に画像を入れたり、重要な部分を太字にして強調するといったアクセントをつけると、

最後まで読んでもらえる確率が高くなります。

 

今回はWordPressを初めたばかりの方が、

装飾した記事を作って投稿ができるように、そのお手伝いをさせていただきたいと思います。

 

なお、この記事で使用するWordPressのテーマは、当ブログおなじみの「Cocoonコクーン」です。

他のテーマでも記事の作り方は同じですが、「スタイル」の部分だけはテーマによって異なります

あらかじめご了承下さい。

それでは最後まで宜しくお願いいたします。

スポンサーリンク

WordPressのエディター

WordPressで新しい記事を作るには「投稿」→「新規追加」を押します。

「投稿」→「新規追加」を押す

するとこんな画面が出てきます。

WordPressのブロックエディタ

これはWordPressで現在使われているブロックエディター(Gutenberg)です。

WordPressをはじめて使う方には、見慣れない用語もたくさんあると思います。

私も、この画面を最初に見たときは、

Σ(゚Д゚)ナニコレ!?

状態で、どうやって使うのかさっぱり分かりませんでした。

というかブロックエディターの使い方は、ブログを始めて3年たった今でもよく分かってません。

 

私がブログを始めた2019年5月は、すでにブロックエディターが採用されていましたが、

2018年まではこちらのエディターが使われていました。

WordPress クラシックエディタ

こちらは現在、旧エディターと呼ばれているもので、

ブロックエディターが採用された今でも、多くの人がこのエディターを使ってます。

なんとなく、旧エディターの方が直感で使えそうな感じがしませんか?

プー太郎
プー太郎

WordやExcelに似ているから、それに慣れている人は旧エディターの方が使いやすそうに感じると思います。

私はブロックエディターをほとんど使ったことがないので、

「どちらのエディターの方が使いやすい」ということを申し上げることはできませんが、

ここからは私のように「旧エディターでWordPressをやってみよう!」と思った方への解説になります。

旧エディターへの切り替え方法

まず最初にブロックエディターを旧エディターへ切り替える方法を説明します。

Cocoonの設定で旧エディターに切り替える方法

WordPressのテーマ「Cocoon」を使っている方は、設定だけで旧エディターへの切り替えが可能です。

「Cocoon設定」の「エディター」タブを選択して“Gutenberg”のチェックを外し「変更をまとめて保存」を押します。

これだけで旧エディターに変わります。

「Cocoon設定」→「エディター」→Gutenbergのチェックを外す

プラグインを使って旧エディターに切り替える方法

切り替えのないテーマを使っている方は、旧エディターに変えるためのプラグインを入れましょう。

ここから旧エディターに切り替えるためのプラグインを2つほど紹介します。

プラグインを検索するには、ダッシュボードの「プラグイン」→「新規追加」を押して

右上の検索バーにプラグインの名前を入力して下さい。

1つ目は、「Classic Editor」(クラシックエディター)というプラグインです。

Classic Editor(クラシックエディター)

ブロックエディターを旧エディターに戻せる有名なプラグインで、

Classic Editorは「2022年までは確実に、それ以降も必要がなくなるまでは完全にサポートします」と表明しています。

Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます

出典:WordPress.org 日本語

そしてもう1つは「Disable Gutenberg」というプラグインです。

Disable Gutenberg

こちらのプラグインも「2022年以降も可能な限りサポートを続ける」と宣言しています。

(前略)So yeah, will do everything possible to keep Disable Gutenberg (and the Classic Editor) going well beyond 2022.
-2022年以降もDisable Gutenberg(およびClassic Editor)を継続させるために可能な限りのことを行います。-

出典:WordPress.org

なので現在のところは、どちらのプラグインを使用しても問題はないと思います。

試しに「Disable Gutenberg」をインストールしてみましたが、

Cocoonの設定でGutenbergのチェックを外したのと、全く同じ状態でした。

スポンサーリンク

旧エディターのツールバーをカスタマイズ

旧エディターのツールバーは、デフォルトでこんな感じです。

旧エディターのツールバー

表示してあるボタンが少なくなっていたら「切り替え」を押して下さい。

ツールバーの「切り替え」ボタン

このツールバーを自分が使いやすいようにカスタマイズしましょう。

カスタマイズするには「Advanced Editor Tools」というプラグインを入れます。

Advanced Editor Tools

プー太郎
プー太郎

以前は「TinyMCE Advanced」という名前のプラグインでした。

インストールして「有効化」を押したら「Advanced Editor Tools」の「設定」を押します。

「Advanced Editor Tools」の「設定」を押す

「設定」→「Advanced Editor Tools」でも設定画面を開くことができます。

別の「Advanced Editor Tools」設定画面の開き方

設定画面で自分が使いやすいようにツールバーをカスタマイズします。

「Advanced Editor Tools」の設定画面

「旧エディター」タブを選択

使うボタンをドラッグで上のツールバーへ、使わないボタンはツールバーから外します

最後に「変更を保存」を押します

プー太郎
プー太郎

ボタンの位置もドラッグで移動できるよ。自分が使いやすいように変更しよう。

「エディターメニュー」というのはこの部分です。メニューを使うようであればチェックを入れましょう(私は使ってません。)。

旧エディターのエディターメニュー

現在の私のツールバーはこんな感じです。なるべく少なめに、使用するボタンだけを入れてます。

旧エディターのツールバー

ほかに「Advanced Editor Tools」を使うメリットとして、

記事の中に表(テーブル)が作れるようになります。

ツールバーの中にある表(テーブル)のボタン

表の作り方は別記事にしてありますので、いずれ表を作る機会があれば参考にして下さい。

記事の新規追加と投稿画面の開き方

ではあらためて、記事の作り方です。

「投稿」→「新規追加」を押す

記事のタイトルと本文を入力するのはここです。

WordPressのタイトルと本文の入力欄

記事の作成途中で、どんなふうに表示されるかを確認するには「プレビュー」を押します。

記事のプレビュー画面

作成を中断するとき(プラウザを閉じるときなど)は「下書き保存」を押しましょう。

そして保存した記事をもう一度開くには、ダッシュボードの「投稿一覧」を押します。

ダッシュボードの「投稿一覧」をクリック

カーソルをタイトル付近に合わせるとメニューが出てきます。

カーソルをタイトル付近に合わせるとメニューが出てくる

タイトル、または「編集」を押すと記事の編集画面に戻ります。

タイトル、または「編集」を押す

もし記事が不要になったら「ゴミ箱へ移動」を押します。

「ゴミ箱へ移動」を押す

ゴミ箱に記事を捨てても、ゴミ箱の中にあるうちは「復元」を押すと元へ戻せます。

ゴミ箱の中にある記事を「復元」を押して元へ戻す

スポンサーリンク

ビジュアルエディターで記事を書く

旧エディターは「ビジュアルエディター」で記事の装飾が簡単に行えます。

細かい調整で「テキストエディター」を使うこともありますが、

基本的にビジュアルエディターでほとんどの編集ができます。

ビジュアルエディター

改行(大きい改行と小さい改行)

文章の改行はキーボードの[ENTER]を使います。

改行には、大きい改行[ENTER]小さい改行[SHIFT+ENTER]の2つがあります。

大きい改行と小さい改行

いずれ文章の間隔を「もっと広げたい」「狭くしたい」と思ったら調整する方法があります。

プー太郎
プー太郎

ブログを続けていると、色々と拘りが出てくるよ(笑)

文字の強調(太字・大きさ・色・アンダーライン)

文字を太字にするには、太字にしたい部分をドラッグして「B」ボタンを押します。

太字にする部分をドラッグして「B」ボタンを押す

文字の大きさを部分的に変えるには、同じくドラッグしてフォントサイズを選択します。

フォントサイズの選択

文字の色を変えるのは、背景に色がない「A」ボタンです。

文字の色を変えるボタン

マーカーでラインを引くには「スタイル」→「マーカー」から選択します。

※Cocoonの拡張スタイルです。

マーカーでラインを引いた文章

適当に文字の色や大きさを変えていると見にくくなるので、

重要度ごとに色や大きさを統一して使い分けるのがいいと思います(下は一例です)。

文字の大きさや色などを重要度により使い分ける
スポンサーリンク

見出し

「見出し」とは、本でいう「章」のようなものです。

これから記事にどんなことが書かれているのかを読者に一言で伝える「要約」みたいなものですね。

新聞の「見出し」

見出しにする部分の先頭にカーソルをあてて「段落」のリストから見出しを選択します。

「段落」のリストから「見出し」を選択

「段落」を「見出し2」にしてみました。

なお「見出し1」は絶対に使わないで下さい。

「見出し1」は記事のタイトル用なので、見出しには「見出し2」から使います。

見出しのルールはこちらの記事をご覧下さい。見出しの使い方をかんたんに解説してます。

リスト(箇条書き)

リストには番号なしリスト番号付きリストがあります。

番号なしリストと番号付きリスト

リスト化する部分をドラッグして使うリストを選択します。

リスト化する部分をドラッグして「黒丸」リストを選択

番号付きリスト

ボックス(囲み枠)

ボックスは「スタイル」より選択します。

※Cocoonの拡張スタイルです。

「スタイル」より好きなボックスを選択する

ただしCocoonは、リストをボックスで囲もうとするとバラバラになる現象が起こります。

ボックスで囲むとリストがバラバラになる現象

対処法はこちらの記事に書きました。

画像の挿入(メディアを追加)

画像の挿入は「メディアを追加」を押して画像をドラッグします。

画像を挿入する位置にカーソルを合わせて「メディアを追加」を押す

「メディアライブラリ」へ画像をドラッグ

画像をドラッグしたら代替テキストを入力して「投稿に挿入」を押します。

これで記事の中に画像が入ります。

画像の代替テキストを入力する

なぜ、代替テキストの入力が必要かというと、Googleは画像の識別ができないからです。

代替テキストを使って、Googleにどんな画像なのかを説明するわけです。

代替テキストを入力しないとSEO(検索エンジン最適化)に不利になるので、なるべく入力しましょう。

※単にアクセントして画像を挿入するのであれば、代替テキストは必要ありません。

画像の大きさを変える

画像の大きさを変えるには、画像をクリックして鉛筆マーク(編集)を押します。

画像をクリックして鉛筆マーク(編集)を押す

「カスタムサイズ」を選んで任意のサイズを入力します。

「カスタムサイズ」を選んで任意のサイズを入力

極端に大きな画像は表示に時間がかかるので、

大きい画像はあらかじめリサイズと圧縮を行いましょう。

▼画像のリサイズと圧縮方法

【WordPress】ブログの画像を圧縮する方法!JPEGとPNGの違いも比較

リンクを貼る

文字にリンクを貼るには、貼る部分をドラッグして右クリック→「リンク」を押します。

文章にリンクを貼る

「URL」の欄にリンク先のURLを入力して、リンクを別のタブで開いてもらうにはリンクターゲットの「新規ウィンドウ」を選択→「OK」を押します。

リンク先のURLを入力して「OK」を押す

また、記事の中へ直接URLを入力するとブログカードが表示されます(入力後、プレビューで確認してみて下さい)。

Cocoonのブログカード
※ブログカードは一部カスタマイズしてます。

▼ブログカードの設定方法

【Cocoon】初心者向け ブログカードを表示させる設定方法

商品リンクを貼る

ブログにAmazonや楽天などの商品リンクを貼るには「カエレバ」や「かんたんリンク」といったツールを使う方法があります。

【カエレバの使い方】Amazonや楽天の商品リンクをブログに貼ってみよう
【もしもアフィリエイト】かんたんリンクの作り方と貼り方

▼「カエレバ」で作った商品リンク(本物)

サイドバーの入力

ここからは記事を投稿する前に必要なサイドバーにある項目の入力方法を説明します。

「カテゴリー」や「タグ」などのサイドバーの項目

カテゴリー

カテゴリー別に記事を分類するためにカテゴリーを設定します。

カテゴリーが作成済みでしたら一覧から選択するか、もしくは「+新規カテゴリーを追加」を押して新しいカテゴリー名を入力しましょう。

カテゴリー一覧から選択するか、新しいカテゴリー名を入力する

日本語で新規カテゴリーを追加するとスラッグも日本語になっているので、

あとで英数字表記に変更してあげて下さい。

プー太郎
プー太郎

スラッグとはURLの一番最後の部分です。詳しくはカテゴリーの設定方法をご覧下さい。

タグ

タグには、その記事によく出てくるキーワードを入力します。

たとえばこの記事でよく出てきているキーワードは「WordPress」や「記事」です。

タグの入力

プー太郎
プー太郎

タグはあまり多くしすぎないように3~5個程度を目安に入力してね。

アイキャッチ画像

アイキャッチは記事の顔になる部分です。

アイキャッチ画像

私はコンテンツ幅(記事が表示される場所の幅)を770pxに設定して、アイキャッチ画像はいつも幅800pxで作ってます。

▼Cocoonのコンテンツ幅設定方法

【Cocoon】グローバルナビメニューやサイトの幅を調整・変更する

 

解像度のよいディスプレイで綺麗に表示させたい方は、もう少し大きい1,000pxくらいで作っておいてもいいと思います。

ただし、あまり大きいと表示に時間がかかることもあるので、ほどほどにしておきましょう。

設定方法は「アイキャッチ画像を設定」を押して、あとは画像の挿入と同じやり方です。

アイキャッチ画像を設定

パーマリンク(URL)の変更

記事を公開する前にパーマリンク(記事のURL)の変更もしておきましょう。

タイトルを入れると、パーマリンクにもタイトルがそのまま入ります。

タイトルを入れると、パーマリンクにもタイトルがそのまま入る

日本語のURLのまま公開すると、とても長いURLになってしまうので半角英数字に変更します。

パーマリンクの設定方法は以下の通りです。

WordPressの「設定」→「パーマリンク設定」をクリックします。

「パーマリンク設定」を押す

投稿名」を選択すると「カスタム構造」のスラッグ部分に「/%postname%/」と自動で入ります。

「投稿名」を選択して「カスタム構造」のスラッグ部分に「/%postname%/」が入った

あとは「変更を保存」を押して下さい。

記事の編集ページへ戻ったら、パーマリンクの「編集」を押して

英語かローマ字表記に直して「OK」を押します。

パーマリンクを日本語から英語にした

記事の投稿

投稿前にもう一度、記事の最終チェックをしましょう。

PCだけでなく、スマホでもどんなふうに表示されているか確認して、

問題がないようでしたら「公開」を押しましょう。

「公開」を押して記事を公開する

プー太郎
プー太郎

おつかれさま。

記事は後で修正もできるから、とりあえず公開してみよう!

最後に

お疲れ様でした。

今回はWordPressで記事を作るための基本的な機能について説明しました。

とりあえず今回説明した方法で記事をいくつか作ってみると、あれこれやってみたい装飾も出てくると思います。

当ブログではWordPressやCocoonの設定方法、カスタマイズのやり方について、いくつか解説した記事があります。

よろしければ、そちらもいつか、ご覧いただけると幸いです。

本日は最後まで読んでいただきありがとうございました。

コメント