当サイトは広告が含まれています

【WordPressの使い方】記事の作り方と投稿方法を解説

WordPress 記事の作り方&投稿方法を解説

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

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

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

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

 

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

しかし読者が見やすく、分かりやすい記事を作るためには、

様々な装飾を施したり画像を入れたりする必要があります。

 

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

一方で記事の途中に画像を入れたり、重要な部分を太字やマーカーなどでアクセントをつけたりすると、

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

 

今回はWordPressを始めたばかりのあなたが、

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

 

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

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

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

スポンサーリンク

WordPressのエディター

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

「投稿」→「新規追加を追加」をクリック

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

WordPressのブロックエディター

これはWordPressに現在標準で搭載されているブロックエディター(Gutenberg)というエディターで、ここで記事を作ります。

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

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

Σ(゚Д゚)ナニコレ?

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

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

 

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

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

WordPressの旧エディター(クラシックエディター)

こちらは現在、旧エディター(クラシックエディター)と呼ばれているもので、

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

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

プー太郎
プー太郎

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

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

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

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

プー太郎
プー太郎

ブロックエディターで記事を書こう!としている方は、すみませんが他の人の記事を参考にして下さい。

スポンサーリンク

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

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

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

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

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

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

Gutenbergのチェックを外す

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

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

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

プラグインを検索するにはメニューの「プラグイン」→「新規プラグインを追加」を押して、右上の検索バーにプラグインの名前を入力します。

右上の検索バーにプラグインの名前を入力

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

プラグイン「Classic Editor(クラシックエディター)」

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

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

毎年同じことを言っているので、たぶんこの先も無くなることはないでしょう。

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

出典: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」

インストールしたら「有効化」を押します。これだけでツールバーがこのように変わります。

「Advanced Editor Tools」を入れた後のツールバー

自分が使いやすいようにツールバーをカスタマイズするには「プラグイン」→「インストール済みプラグイン」→「Advanced Editor Tools」の「設定」を押します。

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

そして、必要なボタンはドラッグで下から上のツールバーへ、いらないボタンは下へ移動してツールバーから削除します

「Advanced Editor Tools」の設定画面(必要なボタンは上へ、不要なボタンは下へドラッグ)

プー太郎
プー太郎

ツールバーには使うボタンだけを配置しよう。ボタンの順番もドラッグで変更可能だよ。

ほかに「Advanced Editor Tools」を使うメリットとしては、記事の中に表(テーブル)が作れるようになります。

「Advanced Editor Tools」を入れたら、表(テーブル)のボタンが増えた

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

スポンサーリンク

WordPress 記事の作り方

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

「投稿」→「新規追加を追加」をクリック

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

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

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

記事のプレビュー画面

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

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

WordPressメニューの「投稿一覧」

編集したい記事のタイトル付近にカーソルを合わせるとメニューが出てきます。

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

記事の編集は「ビジュアルエディター」で行う

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

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

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

WordPressの「大きい改行」と「小さい改行」

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

プー太郎
プー太郎

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

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

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

文字を太字にするには「B」ボタンを押す

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

フォントサイズの選択

文字の色を変えるには、背景に色がない「A」ボタンを押して色を選びます。

文字の色を変えるボタン

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

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

Cocoonの拡張スタイル(マーカー)

見出し

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

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

新聞の見出し

見出しを作るには、見出しにする行にカーソルを当てて(もしくはドラッグ)、

「段落」から使用する見出しを選択します。

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

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

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

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

Cocoonは見出しがそのまま目次になります。

リスト(箇条書き)

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

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

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

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

完成したリスト

ボックス(囲み枠)

ボックス※は「スタイル」の中から選択します。

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

Cocoonの拡張スタイルでボックスを作る

Cocoonのボックス

既存のボックスでなく、オリジナルのボックスを作りたいという方はこちらの記事を参考にして下さい。

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

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

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

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

そして、代替テキストに写真の説明を入力して「投稿に挿入」を押します。

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

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

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

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

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

なお、極端に大きい画像を入れると記事の表示スピードが遅くなって、SEO(検索エンジン最適化)によくありません

大きい画像は画像編集ソフトでリサイズしたり、プラグインなどを使って画像を圧縮しましょう。

プー太郎
プー太郎

無料ソフトの「PhotoScape X」は画像編集をやったことのない人でも簡単に使えると思うよ!(このソフトで画像のリサイズが可能です)

画像のファイルサイズを減らすプラグイン↓

プー太郎
プー太郎

画像の大きさ(幅)は最大でもコンテンツ幅と同じくらいあれば十分だよ!

画像の大きさを変える

WordPressにアップロードした画像は、アップロード後に表示する大きさを変えることができます

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

画像の「編集」ボタン

「カスタムサイズ」を選び、任意のサイズを入力して「更新」を押します。

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

表示する任意のサイズを入力

プー太郎
プー太郎

「幅」か「高さ」のどちらか一方を入力すると、もう片方は比率を維持して自動で入力されるよ。

画像を記事の中央に配置する

画像を記事の中央に配置するには、画像をクリックして「中央揃え」を押します。

画像を記事の中央に配置するには「中央揃え」をクリック

リンクを貼る

リンクを貼るには、貼る部分をドラッグしてから「リンクの挿入/編集」ボタンを押します。

リンクを貼りたい部分をドラッグして 「リンクの挿入/編集」を押す

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

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

また、記事の中へ直接URLを入力するとブログカードが表示されます

ブログカードを表示させる方法はこちらの記事をご覧ください。

広告を貼る

ブログで収益を得るには広告を貼る必要があります。

広告は主に「Googleアドセンス」やASPの広告があります。

Googleアドセンスはそれなりの審査があって、合格してからでないと広告を貼ることができません。

プー太郎
プー太郎

Googleアドセンスは最低でも10記事以上書いてから申請した方がいいよ。

しかしASPの広告は「A8.net」や「もしもアフィリエイト」であれば、すぐに貼れる広告もあります。

プー太郎
プー太郎

「A8」と「もしも」は大手のASPだけど、申請すればすぐに会員登録できるよ(ほかのASPはそれなりの審査あり)。

広告をすぐに貼らなくても、ASPにどんな広告があるのかを見ておくと記事作りのヒントになるかもしれません。

プー太郎
プー太郎

「この広告なら、こんな記事が書けるんじゃない?」みたいなね。

A8.netの公式ページ

もしもアフィリエイト公式ページ

スポンサーリンク

サイドバーの入力

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

カテゴリー

カテゴリーを設定してある場合は、該当するカテゴリーにチェックを入れます。

該当するカテゴリー にチェックを入れる

カテゴリーはこれから作る」という方はこちらの記事を参考にして下さい。

アイキャッチ画像

アイキャッチは記事の上の方に表示される大きな画像です。

アイキャッチ画像

こちらも極端に大きい画像を使うと表示が遅くなります。

私はコンテンツ幅といっしょの横幅800pxでアイキャッチを作っていますが、

高解像度ディスプレイで綺麗に表示させたい場合はやや大きめにアイキャッチを作ってもいいと思います。

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

アイキャッチ画像を設定

スポンサーリンク

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

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

プー太郎
プー太郎

パーマリンクは「ドメイン」と「スラッグ」でできているよ!

パーマリンクとドメインとスラッグ

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

パーマリンクにも記事のタイトルがそのまま入る

スラッグを日本語のままにしておくと、とても長いURLになってしまうので、半角英数字に変更しましょう。

これをやるにはパーマリンクの設定も必要です。

プー太郎
プー太郎

この設定は、WordPressを始めたらすぐに(記事を書く前に)やっておいた方がいいよ!

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

「設定」→「パーマリンク設定」をクリック

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

パーマリンク構造の設定

最後に「変更を保存」を押せば、パーマリンクの設定は終了です。

あとは記事の編集ページへ戻り、パーマリンクのスラッグ部分を英語かローマ字表記に修正して「OK」を押します。

スラッグを英語かローマ字に変える

スポンサーリンク

記事の投稿

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

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

問題がなければ「公開」を押します。

記事の「公開」ボタン

プー太郎
プー太郎

記事の完成おつかれさま。公開したあとでも記事は修正できるから、とりあえず公開してみよう!

スポンサーリンク

最後に

というわけで、今回はWordPressの基本的な使い方を解説しました。

いくつか記事を作っているうちに、あれこれやってみたい装飾も出てくると思います。

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

そちらもいつか必要があればご覧下さい。

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

コメント