図で分かるWordPress記事の書き方【真似するだけでOK】

 

 

こんな疑問にお答えしていきます。

 

本記事を見れば

となっています。

 

本記事の信頼性

※詳細なプロフィールはコチラ

 

WordPressブログを始めて、「記事を書こう！」と思っても「これどうやって使うの？」ってなりますよね。

 

私も初めてワードプレスを使った時は「どこで文章書けるの？」「スタイル？段落？どこで使うの？」と分からないことだらけでした。

 

そこで今回はWordPressの記事の書き方を、超初心者でも納得できるように、各項目の意味と共に図で分かりやすく解説していきます。

 

読み終えた時には、自分で好きなように凝った記事が作れるようになりますよ。

 

本記事での説明はAFFINGER5を使用しています。

 

図で説明していきますが、本記事で使用する記事の装飾などはAFFINGER5(ワードプレステーマ)のものです。

 

売上を上げるのに最優秀なテーマですので、ワードプレステーマをまだ入れていない方は、AFFINGER5を利用しましょう。

 

 

それでは早速、WordPress記事の書き方を見ていきます。

 

 

WordPressの記事を書くエリアの確認

 

まずはワードプレスへログインしていきましょう。

 

ログイン出来たら、ワードプレスの左側のメニューを見てみましょう。以下の二つがあると思います。

 

 

 

基本的に「記事」はこの二つを利用します。

 

目的や用途に応じて、どちらを使うかが決まってきますので、まずは両者の違いを見ていきます。

 

投稿と固定ページの違いについて

 

投稿と固定ページの違いですが、以下が両者のすみ分けになります。

 

 

この表だけでは分かりづらいので、解説していきます。

 

「投稿」で行うこと

「投稿」で行うことのメインはブログ更新です。

 

表には色々なことが書かれていますが、「投稿」＝「ブログ更新」と考えて問題ないです。

 

また備考にある「カテゴリ、タグに紐づく」ですが、投稿メニュー内にある「カテゴリー」や「タグ」は、投稿で作成した記事とリンクします。

 

この例としては、以下をご覧ください。

 

これはサイトTOPページですが、上記のメニューバーに「ブログ」「アフィリエイト」「SEO」とあります。これは私が設定したカテゴリで、メニューバーに表示されるように設定しています。

 

これらのカテゴリをクリックすることで、それぞれの該当記事が表示されます。

 

例）「ブログ」を押した場合

 

このように、ブログカテゴリの記事がリンクされています。

 

「タグ」も同様です。各記事の内容を端的に表すタグを記事作成ページで設定できます。そしてタグをクリックするとその記事とリンクします。

 

こういった紐づけができるのが、「投稿」での記事作成になります。

 

「固定ページ」で行うこと

固定ページでは、作成後にいじる必要のないページを作成します。

 

 

固定ページで作ったページはカテゴリやタグに紐づけがされません。

 

つまり完全独立のページとなります。もちろん投稿画面にも出てきません。

 

固定ページで作るページは、例えば「まずこれを読んで欲しい」というページや「商品の販売ページ」など、固定したままにしておくページで作るのがオススメです。

 

まだ何を書くか予定がない方は「お問合せ」と「プロフィールページ」を固定ページで作成しましょう。

 

▼筆者の固定ページ例

 

作成した固定ページは、このようにTOPページなどに配置します。

 

固定ページは作ったままだとどこにも表示されないので、TOPページなどに表示設定をすることで表示されます。

 

固定ページに関するより詳しい説明はワードプレス公式の「固定ページ」を読むと分かります。

 

続いて、投稿の使い方を見ていきます。

 

 

投稿の使い方【投稿の追加・編集方法＋カテゴリ・タグ設定】

 

続いては、投稿の使い方を説明していきます。

 

ここでの使い方は、以下3つのやり方の解説です。

 

 

それぞれ順番に解説していきます。

 

1.投稿の新規追加方法

 

まずは投稿を新規追加する方法を見ていきましょう。

 

やり方は2パターンあります。

 

パターン1：「投稿」→「新規追加」

 

パターン2：「投稿一覧」→「新規追加」

 

どちらでも大丈夫です。どちらでも新規記事作成ページに移りますよ。

 

記事編集を途中から再開する場合

記事執筆途中で終了して後日また再開する場合は、以下のやり方で再開できます。

 

 

これで、記事の途中から再開できます。

 

記事を削除する場合

記事を削除する場合は投稿一覧から該当記事の「ゴミ箱へ移動」をクリックすれば、記事の削除が完了します。

 

2.カテゴリーの設定方法

 

続いてはカテゴリーの設定方法です。

 

まずは左側メニュー「投稿」内にある「カテゴリー」をクリックしましょう。

 

このような画面になります。

 

カテゴリー設定では、上記の赤丸3か所を設定していきます。

 

 

③の親カテゴリーの補足説明ですが、例えば野球やサッカーのカテゴリーを設定する場合、親カテゴリーは「スポーツ」という事になります。スポーツでくくる必要がない場合(サッカーのみ、野球のみのサイトなど)は親カテゴリーはなくても良いです。

 

上記3つを記入したら、下部にある「新規カテゴリーを追加」をクリックしましょう。これでカテゴリーが出来上がります。

 

サンプルとして、実際にこれらを設定してみます。

 

 

スポーツの下にサッカーと野球カテゴリが付いているかと思います。

 

野球とサッカーカテゴリーの設定時に、親カテゴリーを「スポーツ」に設定することでこのような紐づけに出来ます。

 

これをサイトTOPページに設定することで

 

このようなカテゴリの階層を作ることができます。

 

 

これで、TOPページを見てみましょう。階層表示ができているかと思います。

 

カテゴリーの設定方法の説明は以上になります。

 

3.タグの設定方法

 

続いては、タグの設定方法に移ります。

 

ちなみにタグの設定は記事作成ページからもできるので、このパートは読み飛ばしても大丈夫です。

 

「今設定しておく！」という場合は、まずは左側メニュー「投稿」内にある「タグ」をクリックしましょう。

 

このような画面になります。

 

タグ設定では、上記の赤丸2か所を設定していきます。

 

 

 

2つを記入したら、下部にある「新規タグを追加」をクリックしましょう。これでタグの完成です。

 

これで下準備が完了したので、次からWordPressの投稿記事の書き方を紹介していきます。

 

 

WordPress投稿記事(ブログ)の書き方【全体概要】

 

 

それでは早速、WordPressの投稿記事の書き方を紹介していきます。

 

本記事では、ワードプレスの新エディターであるブロックエディター(もしくは「Gutenberg」(グーテンベルク)とも言う)でのやり方を説明していきます。

 

 

ブロックエディターの記事作成画面は、以下のようになっています。

 

WordPress記事作成画面はこの4パートから成り立ちます。

 

 

各パート毎に、項目の説明と何をすれば良いのかを解説していきます。

 

今回、各パート毎の説明用として、サンプル記事を一つ作成しました。

 

 

「こう書けば、こういう記事になります」というサンプル用です。このサンプルの組み立て方と併せて説明していきます。

 

 

 

ブログの書き方がOKになったら、早速ワードプレスで作っていきましょう！

 

 

①タイトルパートの作り方【画像説明】

 

まずはタイトルパートに関しての作り方説明です。

 

 

やり方は「タイトルを追加」と書かれた場所をクリックして、タイトルを記述していくだけです。

 

▼サンプルでの作り方

 

▼サンプル完成例 (実際のサイト表示例)

 

 

②本文パートの作り方【画像説明】

 

続いては、本文パートの作り方です。ココが最重要ですね。

 

文章の作り方ですが、ブロックを追加して作成していきます。

 

 

言葉だと伝わりづらいので、具体的に見ていきましょう。

 

例）以下の文章を作る場合

 

この文章を作る場合の手順

 

このような感じで、段落ごとにブロックを追加して文章を書いていきます。

 

これでもなかなかイメージが付きづらいかと思いますが大丈夫です。実際に図で確認しながら細かく説明していきます。

 

ブロックの追加方法

 

画面左上部もしくは右端にある「＋」マークからブロックを追加していきます。

 

ここをクリックすると以下のような選択肢が出てきます。

 

これらを選択して、文章を書いたり画像を追加したりしていきます。

 

この選択肢の中で、良く使われる項目の意味を以下にまとめました。

 

 

以下より、実際に作りながら細かく説明していきます。

 

 

段落ブロックの作り方

 

 

手順①：左上もしくは右端の「＋」をクリック

 

 

手順②：ブロックで「段落」を選択

 

 

手順③：文章を書き始める

 

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

 

 

文字を太字(強調)にする方法

 

 

手順①：文章を記述

 

 

手順②：太字にしたい部分を選択

 

 

手順③：文章上に表示されている項目の中で「B」をクリック

 

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

 

背景色を付ける方法

 

 

手順①：文章を記述する

 

 

手順②：右の設定項目から「ブロック」→「色設定」とクリック

 

 

手順③：背景色で好きな色を選択する

 

そうすると選択した色の背景色に変わります。

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

 

文字色も変えられます。

色設定で「文字色」を選択すれば、文字色も変更可能です。

 

 

見出しの作り方

 

 

手順①：「＋」から「見出し」を追加

 

 

手順②：見出しレベルの設定

 

 

 

手順③：文章を記述

 

これで見出しが出来上がります。

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

見出しデザインは変更可能です。

見出しのデザインは変更可能です。デザインはテーマによって異なるので、利用しているテーマのデザインから好みのものを選びましょう。

 

スペースの入れ方

 

段落を変えた時とは別の大きなスペースを文中に入れることができます。

 

 

手順①：スペースを入れたい箇所にカーソルを持っていき、「＋」をクリック

 

 

手順②：「スペーサー」をクリックする

 

 

手順③：スペースの幅を調節する

 

これで希望通りのサイズのスペースが文中に入りますよ。

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

 

画像の挿入方法

 

手順①：「＋」をクリックする

 

 

手順②：「画像」を選択

 

 

手順③：画像の追加方法指定して挿入

 

これで画像が挿入されます。

 

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

 

引用のやり方

 

 

手順①：「＋」から「引用」を追加

 

 

手順②：引用文を書く

 

これで完了です。

 

引用をする場合は、引用文を改変せず正確に記述する必要があります。また、引用元の記載も忘れないようにしましょう。

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

 

文字リンクの付け方

 

 

手順①：リンクしたい文章(文字)を選択

 

 

手順②：リンクボタンをクリック

 

 

手順③：URLを入力する

 

リンクを入れたら右上の「←」を押しましょう。これで完成です。

 

新しいタブで開くにもチェックを

新しいタブで開くとは、リンクを別タブで開くことを意味します。新しタブで開くことによって、記事の途中離脱を防ぐことができます。

 

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

 

会話吹き出しの入れ方

 

 

 

手順①：「＋」をクリックし、「クラシック」を選択

 

 

手順②：「タグ」→「会話吹き出し」と選択

 

手順③：会話内容を記述

 

 

事前に吹き出し設定が必要

会話吹き出しを使用する場合は、事前に吹き出しの設定が必要です。

 

 

設定が完了していれば、ボタン一つで吹き出しを呼び出すことができます。

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

 

オシャレなリストの作り方

 

 

手順①：「＋」をクリックし、「クラシック」を選択

 

 

手順②：「スタイル」→「リスト」→「ナンバリング四角＋ドット下線(リスト)」を選択

 

 

手順③：文章を記述

 

 

手順④：「Enter」を押して改行、文章を追加(必要な数だけ)

 

 

手順⑤：文章を選択し、番号付きリストをクリック

 

これでリストが完成します。

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

 

囲み枠の作り方

 

 

手順①：「＋」をクリックし、最下部「STINGER:マイボックス」を選択

 

右の「＋」をクリックした場合は、「全て表示」を押すと一覧が表示されます。

 

 

手順②：右端でボックスの設定を変える

 

ここでは見出しタイトルを変えたり、デフォルトのチェックデザインを別のものに変えたりできます。

 

他にも文字色や枠の太さ、色なども変更できるので、色々と試してみてください。

 

 

手順③：文章を記述

 

文章を記述したら完成です。

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

一言メモボックスも同様のやり方で出来ます

 

 

 

囲み枠＋リストの作り方

 

 

手順①：「＋」から「STINGER:見出し付きフリーボックス」を選択

 

 

手順②：設定をお好みで変更

 

 

手順③：ボックス内の「＋」をクリックし、「リスト」を選択

 

 

手順④：必要な分だけ文章を記述(Enter改行で自動的に黒丸が付与されます。)

 

これで枠内のリストが完成します。

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

 

ランキングの表示の仕方

 

 

手順①：「＋」をクリックし、「クラシック」を選択

 

 

手順②：「タグ」から「ランキング」を選択

 

 

手順③：文章および星評価の記述

 

これでランキングが完成します。

 

少々分かりづらいと思いますが、サンプルを見て頂ければ直感的に分かると思います。

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

 

ボタンの挿入方法

 

 

手順①：「＋」から「STINGER:カスタムボタン」をクリック

 

 

手順②：右端でボタンの設定を変える

 

 

 

これでボタンが完成です。クリックするとリンク先に飛べるようになっています。

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

 

表(テーブル)の作り方

 

 

手順①：「＋」から「テーブル」を選択

 

 

手順②：列や行数を設定して作成

 

 

手順③：右端で表の設定を変える

 

 

手順④：表の内容を書いていく

 

これで表(テーブル)が完成します。

 

▼サンプルでの作り方

 

 

▼サンプル完成例 (実際のサイト表示例)

 

以上になります。

 

 

以上の内容で、冒頭に紹介していたサンプル記事「格安SIMまとめ」が完成します。自分の記事に使えそうな部分は、ぜひ使ってみてください。

 

次に③の各種設定パートの説明に移っていきます。

 

 

③各種設定パートの説明【設定方法】

 

続いては、各種設定に移ります。

 

 

ここの設定は作った記事のURLやカテゴリ設定など、作成したブログ自体の設定になります。後からでも設定変更はできますので、気楽に見ていきましょう。

 

まずは各項目を確認します。

 

記事を公開する前に、これだけの設定項目があります。

 

これらの項目が表示されていない場合は、最上部が「ブロック」になっていると思いますので、「文書」の方をクリックしましょう。

 

以下より各項目の意味を説明していきます。

 

ステータスと公開状態・記事タイトルに関して

 

ここでは、記事のステータス変更及びタイトル(文字数)の確認ができます。

 

表示状態に関して

 

ここでは、記事の表示状態の設定を行うことができます。

 

通常の場合は「公開」になっていますが、記事非公開にしたり、パスワードを掛けた制限付きの記事に設定することもできます。

 

記事公開後に再度編集する場合や、有料記事として制限公開する場合などに使えます。

 

公開タイミングの設定も可能

 

公開「今すぐ」をクリックすると、公開タイミングの設定が可能です。

 

分単位での時間設定もできるので、特定のタイミングで記事を公開する場合は、こちらで設定しましょう。

 

その他の項目に関して

「ブログのトップに固定」では、そのままですがブログのトップに固定されます。

「レビュー待ち」に関しては、記事作成後の最終チェック待ちの記事として保存されます。企業のブログなどで使う機会が多いです。

 

記事タイトルに関して

タイトルを記入すれば、自動で文字数をカウントしてくれます。タイトルは32文字以内に納めるのが良いです。

 

 

パーマリンク・カテゴリー・タグに関して

 

続いて、パーマリンク・カテゴリー・タグについて確認していきます。

 

パーマリンクに関して

 

パーマリンクは作成した記事のURLの表示設定になります。

 

サンプルにあるように「sim」と設定すれば、この記事のURLは「http://~xyz/sim/」となります。

 

 

カテゴリーおよびタグに関して

 

ここでは、カテゴリーおよびタグの設定が可能です。

 

すでに設定済みの場合は選択するだけですが、ここで新たに設定する事も可能です。

 

カテゴリーの場合は「新規カテゴリーを追加」を、タグの場合は新規追加するタグを入力するだけです。

 

 

アイキャッチ設定に関して

 

続いてはアイキャッチ設定について見ていきます。

 

アイキャッチ画像とは？

 

タイトル上などに表示される画像の事です。

 

「アイキャッチ画像を設定」をクリックし、画像を挿入することができます。

 

アイキャッチ関連の設定に関して

 

写真クレジットにサイトURLを使用

 

任意のテキスト(枠内にテキスト書き込む)

 

設定に関わらずアイキャッチ挿入

この項目にチェックを入れることで、テーマ側の設定でアイキャッチ画像を表示しない設定になっていても、表示させることができます。

 

 

その他設定(AMP設定・カラム変更・index変更・コピー防止)

 

その他の設定に関しても見ていきます。

 

AMP設定

 

「AMPに対応する」にチェックを入れることで、モバイルページの高速化が期待できますが、表示崩れ(表示したい内容が表示されないなど)が発生する場合があります。

 

ですので基本的にはAMP設定に対応しなくても問題ないです。

 

カラム変更に関して

ここでは表示カラム(記事の表示幅)を変更することができます。

 

各カラムのサンプルは以下をご確認ください。

 

初期設定(レイアウトをリセットする)

 

1カラムに変更する

 

LP化する

 

index変更に関して

ここは通常状態で「index, follow」となっています。

 

この意味に関して説明すると長くなってしまうのですが、最初はこのままで大丈夫です。

 

indexコピー防止に関して

通常時では記事のコピー(テキストコピー)ができない仕様になっています。

 

この項目「設定に関わらずテキスト選択可」にチェックを入れることで、記事のコピー(テキストコピー)ができるようになります。

 

 

④記事情報設定パートの説明【設定方法】

 

最後は記事情報の設定パートです。

 

ここが完了すればついに記事公開となります。ここも難しいことはないので、サクサク見ていきましょう！

 

このパートで設定するのは以下の3項目だけです。

 

他にも設定項目がありますが、今は気にしないで全然大丈夫です。

 

上記の3つだけ押さえておきましょう。

 

titleタグの設定

 

ここで設定するタイトルは、検索結果に表示されるタイトルとなります。

 

 

記事のタイトルと検索結果に表示される記事のタイトルを分けたいときに、ここにタイトルを記入します。

 

どちらも同じタイトルで良いという場合は、何も記入しなければそのまま記事タイトルが反映されます。

 

 

メタキーワードの設定

 

 

つまり「このページで重要なキーワードは○○だよ」と検索エンジンに伝える役割がこのメタキーワードです。

 

設定をしておくことで、設定キーワードのGoogleからの評価が多少上がると言われています。(ほぼ関係ないとする説もあります。)

 

なので、あまり期待はせずにとりあえず設定をしておきましょう！

 

 

 

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

 

最後はメタディスクリプションの設定です。

 

メタディスクリプションとは、以下の部分の文章のことを指します。

 

この部分は記事の要約的な役割を持っています。

 

この部分でユーザーは記事を読むかどうかを判断することが多いので、実は結構重要です。

 

メタディスクリプションの書き方のコツは以下になります。

 

冒頭で紹介していた「格安SIMまとめ」記事のメタディスクリプションを参考例に解説しますね。

 

格安SIMまとめのメタディスクリプション

 

 

 

こんな感じです。

 

4つの要素を入れながらうまく120文字程度に収めれば、メタディスクリプションの完成です。

 

以上4つのパートの内容が完成したら、ワードプレス右上の「公開」を押して記事を公開しましょう！

 

 

まとめ

 

以上がWordPress記事の書き方になります。

 

見慣れないワードや設定項目が多いので最初は大変に感じますが、1~2記事書けばあっという間に慣れてしまいますよ。

 

今回は、超初心者の方でも分かりやすいように意識して記事を作成したのですが、分かりづらい点があればお気軽にお問合せください。

 

今回は以上になります。