ブログの書き方

ブログ初心者向け!WordPress記事の書き方と編集・投稿方法を解説!

ブログ初心者向け!WordPress記事の書き方と編集・投稿方法を解説!

この記事で解決できる悩み

本記事の信頼性

当ブログでは「お金・時間・場所に自由を」をコンセプトに、ブログの始め方やノウハウを発信します。僕のプロフィールはこちら

ブログを開設して、いざ記事を書こうと思っても、WordPressの操作方法がわからず悩んでいる方も多いでしょう。

そこで、今回はWordPressにおけるブログ記事の書き方〜投稿方法について、50枚をこえる図解でわかりやすく解説します。

本記事をくり返し読んで練習すれば、WordPressでスムーズに記事を書けるようになりますよ!

注意点

本ブログでは、有料WordPressテーマ「AFFINGER」を導入しています。

WordPressのエディターに機能が追加されていたり、画面表示が異なる可能性があるため、注意してください。

有料テーマを導入すると、おしゃれなトップページを作れたり、記事装飾の自由度が高くなるため、まだ導入していない方はぜひ検討しましょう。

おすすめのWordPressテーマは『ブログ初心者向け!おすすめ無料&有料WordPressテーマ11選!』で紹介しているため、興味のある方は参考にどうぞ。

うーご

それでは本題に入ります。

WordPressブログ記事の基本情報

WordPressブログ記事の基本情報

最初に、WordPressブログにおける「記事」について、基本的な情報を紹介します。

うーご

すでにご存知の方は、読み飛ばしてOKです!

①投稿ページと固定ページの違い

WordPressブログでは、「投稿ページ」「固定ページ」の2つを利用します。

違いは下記のとおりです。

投稿ページと固定ページの違い

  • 投稿ページ:記事コンテンツ向けページ
  • 固定ページ:単体で独立しているページ

投稿ページ・固定ページの実例は、下記のイメージですね。

投稿ページの例(ブログ記事)

投稿一覧表示
タグ・カテゴリー設定
カスタマイズ×
用途ブログ記事

固定ページの例(お問い合わせ)

投稿一覧表示×
タグ・カテゴリー設定×
カスタマイズ
用途トップページ
お問い合わせ
サイト規約
会社紹介
事業紹介
採用ページ

「ブログ記事を書く」とは、基本的には投稿ページを作ることを表すため、本記事では投稿ページの作り方を解説します!

②クラシックエディタとブロックエディタの違い

エディタとは、記事を書いたり、装飾したりする「まな板」のようなもの。

現在、WordPressには「クラシックエディタ」「ブロックエディタ(Gutenberg・グーテンベルク)」の2つのエディタが存在します。

投稿ページと固定ページの違い

  • クラシックエディタ:旧エディタ
  • ブロックエディタ:新エディタ(2018年12月〜)

クラシックエディタ

ブロックエディタ

①記事の編集画面を開く方法1

ブロックエディタは、WordPressのバージョン 5.0からデフォルトで採用されており、より視覚的に、手軽に操作できるようになったエディタです。

そのため、新しくブログを始めた方は、ブロックエディタで記事の書き方を学んでおきましょう。

※クラシックエディタは将来的にサポートが終了する可能性があります。現在は、プラグインClassic Editorを導入すれば利用可能。

本記事では、ブロックエディタを利用していることを前提に、話を進めます。

③記事を書く前に準備すべきこと

ブログ記事を書く前の準備として、「キーワード選定」「記事構成作成」を実施しましょう。

項目概要関連記事
キーワード選定ターゲットキーワードを選ぶ
キーワードを検索する人に向けて記事を書く
【初心者向け】SEOキーワード選定のやり方5ステップ【探すコツ】
記事構成作成ブログ記事の設計図【初心者向け】ブログ記事の文章構成案の作り方【テンプレートあり】

上記をクリアすることで、ライティング作業を効率化できるうえ、質の高い記事を書けますよ。

うーご

本記事を読んだあと、ぜひ関連記事からやり方をチェックしてくださいね!

【初心者向け】WordPressブログ記事の書き方〜投稿方法5ステップ

【初心者向け】WordPressブログ記事の書き方〜投稿方法5ステップ

ここからは、WordPressブログ記事の書き方〜投稿方法について、下記の5ステップで解説します。

記事作成〜投稿までの流れ

上記をクリックすれば、読みたい項目へジャンプできます。

実際に作業する流れに沿って解説するので、ぜひ実践してみてくださいね。

【STEP1】WordPressブログ記事の編集画面の開き方

【STEP1】WordPressブログ記事の編集画面の開き方

それでは、さっそくWordPressでブログ記事を書いてみましょう。

まずは、記事を作成する「投稿画面」を開きます。

①記事の編集画面を開く

WordPressの管理画面左にあるサイドバーから「投稿」→「新規追加」の順で進みます。

①記事の編集画面を開く方法2

下記画面が表示されたらOKです。

①記事の編集画面を開く方法1

※使用WordPressテーマによって、表示画面がやや異なる可能性があります。

次章から、本格的にブログ記事を書いていきましょう!

【STEP2】WordPressブログ記事の書き方

【STEP2】WordPressブログ記事の書き方

ブログ記事の書き方について、下記の8項目を順番に解説します。

WordPressブログ記事の書き方

  • 記事タイトルを付ける
  • 記事の本文を書く
  • 記事に見出しを入れる
  • 箇条書きを設定する
  • 記事に画像を挿入する
  • 引用の設定をする
  • 内部リンクの設定をする
  • ツイートを挿入する

1つずつ紹介しますね。

②記事タイトルを付ける

記事タイトルは、画面上部の「タイトルを追加」と書かれた部分に入力します。

②記事タイトルを付ける

読者から「記事を読みたい!」と思ってもらえるよう、魅力的なタイトル付をすることが大切です。

記事タイトルの付け方について、詳しくは『【具体例あり】読者の目を引くブログ記事タイトルの付け方11選!』で解説しています。

③記事の本文を書く

記事本文は、タイトル下のブロックから執筆できます。

③記事の本文を書く1

基本的なテキスト入力方法は、下記のとおりです。

テキストの入力方法

  • 文字入力:通常のPC入力方法
  • 改行(1行):Enterキー
  • 改行(反行):Shiftキー+Enter

後述する箇条書き・画像・引用などは、「+」を押すことで追加できます。

たとえば、ブロック右側にある「+」をクリックすると、よく使用するブロックが、

③記事の本文を書く2

画面左上にある「+」をクリックすると、すべてのブロック一覧が表示されます。

③記事の本文を書く3

上記を駆使して、ブログ記事を作り上げるイメージですね。

うーご

ここからは、よく使用するブロックの使い方を詳しく解説します!

④記事に見出しを入れる

見出しとは、ブログ記事における「目次」のようなもの。読者やGoogleに記事構成をわかりやすく伝えるために設定します。

ボックスに文字を入力すると、ツールバーが表示されるため、1番左をクリックしてください。

④記事に見出しを入れる1

すると、変換の一覧が表示されるため、「見出し」を選択します。

④記事に見出しを入れる2

デフォルトではH2タグが設定されているので、ツールバーから好みのHタグを選択しましょう。

④記事に見出しを入れる3

ブログ記事では、基本的にH2〜H4の順で階層構造を作ります。

見出しを作るコツについて、詳しくは『初心者向け!SEOに強いブログ記事の見出し(h1/h2/h3)の作り方!』を参考にどうぞ。

⑤箇条書きを設定する

複数の語句を並べるときは、箇条書きにするのがおすすめです。文章だらけの記事は読みにくいので、メリハリを付けましょう。

箇条書きを設定したいブロックを選択したら、下記の流れで「リスト」を選択してください。

⑤箇条書きを設定する1

箇条書きの「・」が表示されるので、自由にテキストを入力することが可能です。

ちなみに、WordPressには「黒丸のリスト」「番号付きリスト」があるので、利用シーンに合わせて選んでください。

⑤箇条書きを設定する2

WordPressテーマによってはリストのデザインを変更できるので、おしゃれなテーマを導入することで、より記事がわかりやすくなりますよ。

⑤記事に画像を挿入する

記事内に画像を挿入することで、読者にとって読みやすい記事になります。

やり方は簡単です。下記のように「メディア」の欄にある「画像」を選択してください。

⑤記事に画像を挿入する1

画像の挿入方法は3つあるので、好みの方法を選びます。

画像の挿入方法3つ

  • アップロード
  • メディアライブラリ
  • URLから挿入

画像の配置も変更できるので、特に理由がなければ「中央揃え」にしておきましょう。

⑤記事に画像を挿入する2

ちなみに、記事内に画像設定をするときは、Altタグを設定しましょう。Altタグとは、Googleロボットに画像内容を伝えるもの。

メディアライブラリの「代替テキスト」に画像の内容を書くことで、SEO的に評価されやすい設定ができます。

Altタグを設定方法

「どこで記事内に挿入する画像を探すの?」と悩んでいる方は、『【無料】ブログにおすすめフリー素材&画像サイト13選【商用利用OK】』を参考にしてみてください。

⑦引用の設定をする

他サイトに掲載されている文章・画像を転載するときは、引用タグを使用しましょう。

まずは、下記画面から「引用」を選択します。

⑦引用の設定をする1

引用のブロックが表示されるので、引用文・引用元を記載してください。

⑦引用の設定をする2

WordPressテーマによってデザインは異なりますが、基本的な使用方法は同じですよ。

⑧内部リンクの設定をする

WordPress記事に内部リンクを挿入するときは、挿入したいテキストを選択して、ツールバーから下記の矢印部分をクリックします。

⑧内部リンクの設定をする1

そして、挿入したいリンク先のURLを貼り付けましょう。

「新しいタブで開く」をONにすると、読者がリンク先に移動したときに、別のタブでページが開かれます。

⑧内部リンクの設定をする2

読者がページを離脱するのを防ぐ効果があるため、基本的にはONにしておくのがおすすめです。

また、設定したリンクを解除したいときは、テキストをクリックして、下記の矢印部分を押してください。

⑧内部リンクの設定をする3

内部リンクは読者の回遊を促す効果があるので、関連性のある記事は積極的に貼りましょう。

⑨ツイートを挿入する

特に、商品・サービスのレビュー記事では、Twitterからツイートを転用するケースが多いです。

まずは、Webサイトから転用したいツイートを開きます。

そして、「・」が3つ並んだようなボタンから設定を開き、設定から「Embed Tweet」を選択してください。

⑨ツイートを挿入する1

ページが移動したら、下記の「Copy Code」をクリックします。

⑨ツイートを挿入する2

下記表示が出たら、WordPressに戻りましょう。

⑨ツイートを挿入する3

下記のように「カスタムHTML」を開きます。

⑨ツイートを挿入する4

「HTMLを入力…」と書かれたブロックが表示されるので、先ほどコピーしたコードを貼り付けてください。

⑨ツイートを挿入する5

プレビュー画面を見て、ツイートが埋め込まれていたらOKです。

⑨ツイートを挿入する6

以上、WordPressブログ記事の書き方でした。

紹介した方法を活かして、ぜひ質の高いコンテンツを作成してくださいね!

【STEP3】WordPressブログ記事の装飾方法

【STEP3】WordPressブログ記事の装飾方法

続いて、WordPressでブログ記事を装飾する方法を解説します。

おしゃれで読みやすい記事が作れるので、ぜひ使いこなしてくださいね。

WordPressブログ記事の装飾方法

  • 太字・斜字にする
  • 文字色・背景色を変える
  • 文字サイズを変更する
  • 行間スペースを調整する

番外編として、当ブログで使用しているWordPressテーマ「AFFINGER」の記事装飾も紹介します。

⑩太字・斜字にする

文章にメリハリを付けたいときは、太字・斜字を使いましょう。

下記のイメージですね。

⑩太字・斜字にする1

設定方法は、適用したいテキストを選択してツールバーをクリックするだけ。

⑩太字・斜字にする2

当ブログでも多用している記事装飾でして、使い勝手がよくておすすめですよ。

⑪文字色・背景色を変える

文字色・背景色は、特に強調したいテキストに適用するのがおすすめです。

下記のイメージですね。

⑪文字色・背景色を変える1

設定方法は、右サイドバーの「色」から、「テキスト」「背景」のいずれかをクリックするだけ。

サンプルカラーが15色用意されているので、気に入ったカラーがあればクリックすれば色が変わります。

⑪文字色・背景色を変える2

カラーコードで細かく設定することもできるので、好みの色がなくても安心ですね。

原色大辞典では、色サンプルとカラーコードを同時に探せるので、色選びに悩んでいる方は活用しましょう。

⑫文字サイズを変更する

文字サイズを変更することで、文章に強弱をつけられます。

設定方法は、右サイドバーの「サイズ」で好みのサイズを選ぶだけ。

⑫文字サイズを変更する

当ブログでは、目立たせたい部分を「大」にしたり、注意書きを「小」にすることが多いですね。

⑬行間スペースを調整する

ぎっしり文章が書かれた記事って、読む気を失いますよね。

なので、文章ごとに行間を空けて、記事を読みやすくしましょう。

行間を空けたい文章間の「+」を押してから「スペーサー」を選択してください。

⑬行間スペースを調整する1

スペーサーブロックが表示されるので、右サイドバーから高さ(行間)を調整しましょう。

⑬行間スペースを調整する2

ちなみに、当ブログでは行間を20pxで統一しています。

【番外編】AFFINGERの記事装飾

最後に、番外編として、当ブログで使用しているWordPressテーマ「AFFINGER」の装飾を紹介します。

AFFINGERには、これまでに紹介した他にも、たくさんの記事装飾が用意されています。

【番外編】AFFINGERの記事装飾1

僕の場合、下記のようなボックスデザインやボタン、会話吹き出しなどはよく使用しますね。

【番外編】AFFINGERの記事装飾2

他にも、箇条書きのデザインが豊富だったり、文字マーカーが引けたりとブログをおしゃれにする機能が豊富なので、興味のある方は『【2年使った】AFFINGER6を豪華特典付きレビュー!評判・購入方法も解説』をご覧ください。

あわせて読みたい
【2年使った】AFFINGER6を豪華特典付きレビュー!評判・購入方法も解説
【3年使った】AFFINGER6を徹底レビュー!豪華特典付き購入方法も解説
【STEP4】WordPressブログ記事の投稿前の設定方法

記事を書いたら、投稿前に下記の設定をしましょう。

WordPressブログ記事の投稿前の設定方法

  • パーマリンクを設定する
  • カテゴリーを設定する
  • タグを付ける
  • アイキャッチ画像を設定する
  • メタディスクリプションを書く

なお、投稿前のWordPress設定時は、右サイドバーの「投稿」を選択してください。

投稿前のWordPress設定

それでは、1つずつやり方を解説します。

⑭パーマリンクを設定する

パーマリンクとは、記事URLのこと。下記のようにURL後半部分を設定します。

スラッグとは

右サイドバーに「URLスラッグ」の項目があるので、好みのスラッグを入力しましょう。

⑭パーマリンクを設定する

ちなみに、URLスラッグの付け方ルールはありませんが、当ブログでは記事内容を簡潔にあらわす半角英数字を推奨しています。

なぜなら、読者がパーマリンクを見たときに、関係のないキーワードが含まれていると違和感を感じるからですね。

うーご

同じパーマリンクは1つしか作れないので、重複しないよう注意してください!

⑮カテゴリーを設定する

ブログカテゴリーを設定することで、読者やGoogleがブログの構造を理解しやすくなります。SEOにも強い影響を与えるため、必ず設定しましょう。

設定方法は、右サイドバーの「カテゴリー」の項目から任意のカテゴリーを選択するだけ。未設定の場合は「新規カテゴリーを追加」から追加できます。

⑮カテゴリーを設定する

カテゴリーの分け方について、詳しくは『【簡単】ブログカテゴリーの分け方は?決め方のコツや注意点を解説!』で解説しています。

⑯タグを付ける

タグとは、ブログ記事ごとに設定する「付箋」のようなもの。

右サイドバーの「タグ」に任意の単語を入力することで、設定できます。

⑯タグを付ける

うまく設定できれば読者が回遊しやすいブログを作れますが、逆にわかりにくい構造になってしまうケースもあるため、注意が必要です。

うーご

直接的なSEO効果はないため、設定しなくてもOKです!

ちなみに、当ブログではタグを設定していません。

タグの付け方について、詳しくは『【SEO】WordPressブログのタグの付け方【カテゴリーとの違い】』で解説しています。

⑰アイキャッチ画像を設定する

アイキャッチ画像を設定するときは、右サイドバーの「アイキャッチ画像を設定」をクリックします。

⑰アイキャッチ画像を設定する

メディアライブラリが開かれるので、好みの画像を選択すれば完了です。(新規画像を使用する場合は、ドラッグ&ドロップで読み込みましょう!)

アイキャッチ画像には、ブログ内を回遊するよう読者に促す効果があるため、『ブログのアイキャッチ画像の作り方!最適なサイズやデザインのコツ!』を参考にしっかり作成してください。

⑱メタディスクリプションを書く

メタディスクリプションとは、ページ内容の説明文のこと。下記のように、Googleの検索結果に表示されます。

メタディスクリプションとは

SEO順位に直接的な影響はありませんが、魅力的なメタディスクリプションには記事タイトルのクリック率(CTR)を向上させる効果があるため、非常に重要な要素です。

ちなみに、WordPressでメタディスクリプションを設定する方法は、おもに3つあります。

WordPressのメタディスクリプションの設定方法

  • HTMLで直接指定する
  • WordPressプラグインで設定する
  • WordPressテーマ機能で設定する

①のやり方は、コーディング知識が求められるため、今回は割愛します。

②のやり方では、All In One SEO PackというWordPressプラグインの機能を活用します。導入することで、下記のようにメタディスクリプションを設定可能です。

メタディスクリプションの書き方(All in One SEO Pack)

ただし、All In One SEO Packは重すぎるため、サイトスピードが低下するデメリットが…

そのため、当ブログでは③「WordPressテーマ機能で設定する」を推奨しています。

テーマによって設定方法は異なりますが、当ブログで使用している「AFFINGER」では、導入するだけでメタディスクリプションを設定できますよ。

メタディスクリプションの書き方(AFFINGER)

メタディスクリプションの設定方法について、詳しくは『メタディスクリプションとは?SEOに強い書き方や文字数を解説!』を参考にどうぞ。

【STEP5】WordPressブログ記事の投稿方法

【STEP5】WordPressブログ記事の投稿方法

以上でWordPress記事を投稿する用意ができたので、最後に投稿方法をいくつか紹介します。

WordPressブログ記事の投稿前の設定方法

  • プレビューでチェックする
  • 記事を公開する
  • 予約投稿のやり方
  • パスワード付き投稿のやり方
  • 公開記事の編集方法

それぞれ解説します。

⑲プレビューでチェックする

記事を公開するまえに、プレビューから内容チェックしましょう。

⑲プレビューでチェックする1

下記のように投稿後画面が表示されるので、誤字脱字はないか、文章に違和感がないか、などを確認してください。

⑲プレビューでチェックする2

おすすめは全文を音読することです。声に出すことで、黙読ではわかりにくい違和感でも簡単に気づけますよ!

うーご

記事クオリティが段違いになります!

⑳記事を公開する

最終チェックまで完了したら、いよいよ記事を公開しましょう!

画面右上の「公開」をクリックします。

⑳記事を公開する1

「公開してよいですか?」と確認されるので、「公開」を押せば投稿完了です。

⑳記事を公開する2
うーご

投稿したら、Google Search Consoleで「インデックス登録をリクエスト」するのがおすすめ!

Googleからページを読み込まれやすくなり、検索結果に反映されるのが早くなりますよ。

㉑予約投稿のやり方

投稿日時を予約したい場合は、右サイドバーの「今すぐ」をクリックして、日時を指定します。

㉑予約投稿のやり方

「公開」へ進めば、予約投稿は完了です。

うーご

20時〜22時ころはブログを見てくれる人が多いですよ!

㉒パスワード付き投稿のやり方

あまり活躍する機会はありませんが、WordPressでは投稿記事にパスワードを付けられます。

設定方法は簡単です。右サイドバーの表示状態にある「公開」をクリックして、「パスワード保護」を選択&パスワードを入力するだけ。

㉒パスワード付き投稿のやり方

たとえば、当ブログではAFFINGER購入者特典にパスワードを設定していますね。

㉓公開記事の編集方法

公開済みの記事は、下記のように下書き状態に戻したり、更新することができます。

㉓公開記事の編集方法

記事をリライトしたときなどに使用するので、ぜひ覚えておいてくださいね。

ちなみに、リライト方法ついて、詳しくは『SEOに効果的なブログリライトのやり方は?注意点やタイミングも解説』で解説しています。

うーご

以上、WordPressブログ記事の書き方〜投稿方法でした!

WordPressブログの記事編集で便利なショートカットキー

WordPressブログの記事編集のショートカットキー

WordPressには、投稿画面で使用できるショートカットキーが存在します。

覚えておくとライティング作業が効率化できるので、ぜひ活用してくださいね。

※特に便利なショートカットキーは赤字にしておきました!

エディタ操作

動作WindowsMac OS
下書き・変更の保存Ctrl+SCommand+S
直前の変更を取り消すCtrl+ZCommand+Z
前回の取り消しをやり直すCtrl+Shift+ZCommand+Shift+Z
サイドバーの表示・非表示Ctrl+Shift+,Command+Shift+,
ブロックリストビューを開くShift+Alt+OControl+Option+O
HTMLエディタ切り替えCtrl+Shift+Alt+MCommand+Shift+option+M
全画面モードを切り替えCtrl+Shift+Alt+FCommand+Shift+option+F

ブロック操作

動作WindowsMac OS
ブロックの複数選択Shift+左クリックShift+左クリック
選択ブロックを複製するCtrl+Shift+DCommand+Shift+D
選択ブロックを削除するShift+Alt+ZControl+Option+Z
上に新しいブロックを挿入Ctrl+Alt+TCommand+option+T
下に新しいブロックを挿入Ctrl+Alt+YCommand+option+Y
ブロックを上に移動するCtrl+Shift+Alt+TCommand+Shift+option+T
ブロックを下に移動するCtrl+Shift+Alt+YCommand+Shift+option+Y
ブロックタイプ選択//

入力操作

動作WindowsMac OS
全選択Ctrl+ACommand+A
コピーCtrl+CCommand+C
ペーストCtrl+VCommand+V
ペースト(書式なし)Ctrl+Shift+VCommand+option+V
太字にするCtrl+BCommand+B
斜体にするCtrl+ICommand+I
下線をつけるCtrl+UCommand+U
取り消し線をつけるShift+Alt+DShift+option+D
等倍フォントにするShift+Alt+XShift+option+X
リンクを作成するCtrl+KCommand+K
リンクを解除するCtrl+Shift+KCommand+Shift+K
見出しを作るh2://+半角スペース
h3:///+半角スペース
h4:////+半角スペース
h5://///+半角スペース
h6://////+半角スペース
h2://+半角スペース
h3:///+半角スペース
h4:////+半角スペース
h5://///+半角スペース
h6://////+半角スペース

WordやGoogleドキュメントと同じショートカットも多いので、簡単に覚えられそうですね。

うーご

まずは、赤字部分だけマスターしましょう!

まとめ:WordPressの投稿方法をマスターしたら記事を書こう!

まとめ:WordPressの投稿方法をマスターしたら記事を書こう!

本記事では、WordPressブログ記事の書き方〜投稿方法について、詳しく解説しました。

ブロガーにとって、WordPressは長い間つきあうパートナーのような存在です。

なので、ぜひ本記事をくり返し読んで、体が使い方を覚えるまで練習してくださいね。

また、当ブログではブログ記事を書く手順やコツについても詳しく解説しています。

『【初心者向け】ブログ記事の書き方5つの手順・12のコツ【マニュアル】』を読めば、ブロガーとしての基本的なスキルは身につくので、セットで読んで質の高い記事を書きましょう!

あわせて読みたい
【初心者向け】ブログ記事の書き方5つの手順・12のコツ【マニュアル】
【初心者向け】ブログ記事の書き方5つの手順・12のコツ【マニュアル】

今回は以上です。

\最速で「稼げるブログ」を始めよう!/

ブログの始め方マニュアルに戻る

※クリックするとブログの始め方の記事に移動できます。

-ブログの書き方