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

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

こんにちは、ikuzo(いくぞう)です。

 

WordPressワードプレスをインストールしたけど、使い方がよく分からない…

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

今回はそんな初心者の方にWordPressで記事を作って投稿する方法を解説します。

 

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

しかし読者が見やすい、分かりやすいと思ってもらえるようなブログを作るために、

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

 

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

逆に記事の途中に画像を入れたり、重要な部分を太字にして強調してみたり、

記事が見やすくなる工夫をすると、最後まで読んでもらえる確率が高くなります。

 

今回はWordPressを初めて使う方が、

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

 

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

他のテーマでも記事の作り方は同じですが、

「スタイル」の部分はテーマによって異なりますので、あらかじめご了承下さい。

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

▼これからサーバーを借りてWordPressを始めようとしている方はこちら

【図解】WordPress×Cocoonでブログを始めよう!
スポンサーリンク

WordPressのエディター

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

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

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

WordPressのブロックエディタ

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

WordPressの初心者の方には、見慣れない用語もたくさんあるのではないでしょうか。

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

Σ(゚Д゚)なんじゃ、こりゃ!?

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

(ブロックエディターの使い方は、実は今も分かりません。)

 

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

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

WordPress クラシックエディタ

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

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

なんとなく、こちらの方が直感で使えそうな感じがしませんか?

プー太郎
プー太郎

WordやExcelに似ているから、それに慣れている人は

こっちの方が使いやすそうに感じると思います。

私は、ブロックエディターは見た目で抵抗があったので使ったことがありません。

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

これから紹介する旧エディターのプラグイン2つだけでインストール数は550万回を超えています。

それだけ旧エディターで慣れている人や、私のようにブロックエディターに抵抗を感じた人が多いということではないでしょうか。

 

ということでここからは誠に勝手ながら、

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

プー太郎
プー太郎

誠に勝手ですみません。

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

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

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

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

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

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

切り替えのないテーマを使っている方は、プラグインを入れる必要があります。

これから旧エディター用のプラグインを2つ紹介します。

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

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

 

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

プラグイン「Classic Editor」

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

サポートが約束されているのは2021年の末までで、2022年以降は今のところ未定です。

プー太郎
プー太郎

「Classic Editor」を使い続ける人がいっぱいいれば、

2022年以降もサポートは続くかもしれません。

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

プラグインの「Disable Gutenberg」

こちらは2022年以降もサポートを続けると宣言しているので、

これからプラグインを入れる方には、こちらの「Disable Gutenberg」がおすすめです。

プー太郎
プー太郎

「Classic Editor」と比べて、評価も負けてないしね。

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

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

「Disable 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」を入れるメリットとして、

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

表(テーブル)のボタン

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

【Cocoon】表(テーブル)の作り方と幅を変えるカスタマイズ

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

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

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

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

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

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

記事のプレビュー画面

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

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

「投稿一覧」を押す

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

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

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

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

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

「ゴミ箱へ移動」を押す

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

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

スポンサーリンク

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

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

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

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

ビジュアルエディター

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

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

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

大きい改行と小さい改行

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

【Cocoon】初心者向け 文と文の間(行間)と段落の間隔を調整する
プー太郎
プー太郎

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

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

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

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

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

フォントサイズの選択

文字の色を変えるのはA」ボタンです。

文字の色を変えるボタン

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

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

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

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

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

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

見出し

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

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

新聞の「見出し」

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

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

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

このとき「見出し1」は絶対に使わないで下さい。

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

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

【WordPress】見出しの付け方とルールをかんたんに解説

リスト(箇条書き)

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

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

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

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

番号付きリスト

ボックス(囲み枠)

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

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

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

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

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

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

【Cocoon】リストをボックスで囲む方法(バラバラになる対処法)

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

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

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

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

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

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

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

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

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

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

画像の大きさを変える

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

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

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

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

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

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

▼画像の圧縮方法

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

リンクを貼る

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

文章にリンクを貼る

リンク先の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の設定方法、カスタマイズのやり方について、いくつか解説した記事があります。

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

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

コメント