ワードプレス（Wordpress）ブログの書き方、投稿方法を解説【新エディター対応】

ワードプレスで記事を書きたい人

WordPressブログで記事の書き方が知りたい。おしゃれな装飾や吹き出しなども使って、かっこいいブログに仕上げる方法を教えて！

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

本記事の内容

【入門編】ワードプレスブログの記事の書き方
【基本編】ワードプレスブログの装飾の使い方
【応用編】HTMLやショートコードの使い方
【まとめ】ワードプレスブログの投稿の仕方

本記事の信頼性

この記事を書いている僕は、現在ブログ歴9ヶ月です。
今年の1月にブログを始めて、今では月50万円を稼げるようになりました。

ワードプレスは2019年に新エディター（投稿画面）の「グーテンベルク」がリリースされ、記事の書き方も大きく変わりました。

今回は、新エディターでのブログの書き方を、画像つきで分かりやすく解説していきます。

注意点：当ブログはSangoという有料テーマを導入済み

当ブログは有料テーマのSangoを導入しています。

WordPressのエディター画面に機能が追加されていたり、フォントや見出しのデザインなどがあなたのみている画面と違うはずです。

有料テーマを導入すると、フォントや見出しのデザインを変更できたり、ショートコードで吹き出しが使えたりしますよ。

WordPressブログのデザインテーマについては、【失敗しない】ワードプレス（WordPress）ブログ用のおすすめテーマ5選にて詳しく解説しています。

ワードプレスブログで記事を書く〜投稿するまでの全体像

まずはじめに、ワードプレスブログでの、記事の作り方から投稿方法までの全体像を、ご紹介します。

記事執筆から投稿までの流れ

①記事の新規作成
②タイトル・本文・アイキャッチ画像
③文章の装飾
④記事の投稿

記事を投稿するまでのプロセスは、大きく分けると上の4つに分かれます。

今回は、入門編としてブログの書き方（①〜②）をご紹介した後に、基本編としてブログの装飾方法（③）をご紹介します。

最後に記事の投稿方法（④）を簡単に解説していきます。

【入門編】ワードプレスブログの記事の書き方

入門編では以下の8つの項目を、順番にご紹介していきます。

入門編でご紹介する８つの項目

記事の新規作成
タイトルをつける
見出しをつける
本文を書く
画像を挿入する
カテゴリーを決める
タグをつける
アイキャッチ画像を入れる

①：記事の新規作成

新規記事の作成方法は、サイドバーの「投稿」→「新規追加」をクリックするだけでOKです。

もしくはヘッダーにある、「＋新規」→「投稿」をクリックでも新規作成できます。

②：タイトルをつける

タイトルは、上記の「タイトルを追加」と書いてある部分に書き込みます。

SEO的な観点から、タイトルの長さは32文字前後がおすすめです。

③：本文を書く

タイトルを入力するボックスの下は、本文を書き込むエディターです。

noteというサービスのように、１行ずつがブロックになっています。

ブロックの左の「＋」を押すと、段落・画像・スペースなどを追加できる仕組みです。

本文はボックス内に文字を入力してけばOKです。

④：見出しをつける

本でいう目次にあたる、見出しは、文章構造を分かりやすくするのに役立ちます。

ボックスに文字を入力した後に、マウスのカーソルを入力した文字あたりで動かすと、ボックス上部にツールバーのようなものが出てきます。

一番左の▼をクリックすると、「変換」→「見出し」を選択できるので、クリックします。

見出しは、H2→H3→H4という風に構造化されていきます。（H2が大きな見出し）

⑤：画像を挿入する

本文に画像を挿入する方法は、ブロック横もしくは下の「＋」をクリックして、「一般ブロック」→「画像」をクリックします。

画像挿入の方法は３つある

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

上記の3つから、画像挿入の方法を選択することになります。

ワードプレス内に画像を保存しておける「メディアライブラリ」を選択するのがおすすめです。

「メディアライブラリ」をクリックした後に、挿入したい画像をドラッグ&ドロップすると、画像が保存されるので、あとは画像を選択すると挿入が完了です。

⑥：カテゴリーを決める

ブログカテゴリーを考えている人は、右サイドバーから「カテゴリー」をクリックして、自分の好きなカテゴリーをクリックまたは「新規カテゴリーを追加」からカテゴリー追加しましょう。

カテゴリー設定については、バズ部さんのWordPressのカテゴリーの設定方法から編集まで徹底解説にて詳しく解説されています。

⑦：タグをつける

タグは、カテゴリーがちがう記事を横断的に、まとめておくことができます。

使っても使わなくてもどちらでもOKです。

タグ設定については、Samurai BlogさんのWordPressのタグを設定して記事を探しやすくするポイントで詳しく解説されています。

⑧：アイキャッチ画像を入れる

最後に、アイキャッチ画像を入れて完了です。

右サイドバーの「アイキャッチ画像」→「アイキャッチ画像を設定」で、メディアライブラリから選択しましょう。（新規画像を使いたい場合は、ドラッグ&ドロップでOK！）

【基本編】ワードプレスブログの装飾の使い方

続いて、ブログ記事をおしゃれにする、装飾の使い方をご紹介していきます。

今回は、当ブログでよく使用している「5つの装飾」に特化して解説していきます。

ワードプレスブログの５つの装飾

太字・斜字・下線をひく
文字色・背景色を変える
文字の大きさを変える
行間スペースを整える
リスト化する

①：太字・斜字・リンク

こちらの3つは、全てボックス上部のツールバーでできます。

こんな感じですね。

・太字
・斜字
・リンク

シンプルな装飾ですが、ブログ記事に強弱を与えてくれます。

②：文字色・背景色を変える

文字色・背景色を変更するには、以下の３ステップです。

文字色・背景色を変えるステップ３つ

色を変更したい文章を選択
右サイドバーの色設定をクリック
「背景色」「文字色」を調整

上記のような感じですね。

「カスタムカラー」をクリックすると、好きな色に調節できますよ。

③：文字の大きさを変える

文字の大きさを変えるには、以下の３ステップです。

文字の大きさを変えるステップ３つ

文字サイズ変更したい文章を選択
右サイドバーの「テキスト設定」をクリック
文字サイズを「小〜特大」から選択

基本的には標準サイズを使用して、目立たせたい部分は「大」、注意書きなどは「小」で書くと見やすいですよ。

ちなみに、文字サイズ横の数値を変更すると、大きさを調整できます。

④：行間スペースを整える

ブログ記事は適度なスペースを挿入することで、読みやすくなります。

当ブログでも、文章のかたまりごとにスペース追加することで、文章全体の詰まりを解消しています。

スペースを追加するには、ブロック横の「＋」から「レイアウト要素」→「スペーサー」をクリックするとスペースが追加されます。

スペーサーの青い点をクリックしながら上下に動かすことで、スペーサーの上下幅を調整できます。

⑤：リスト化する

こんな感じで
リスト化すると
見やすくなります

上記のようにリスト化する方法は、リスト化したい複数ブロックを選択して、ツールバーの「▼」→「リスト」をクリックするとリスト化できます。

黒丸のリスト

番号付きのリスト

があるので、お好きな方を選択して使ってください。

【応用編】HTMLやショートコードの使い方

応用編では、カエレバ・ヨメレバという商品紹介リンクの挿入方法、有料テーマを購入した方はショートコードの挿入方法をご紹介します。

カエレバ・ヨメレバで商品紹介

カエレバとは、ブログ上で、特に量販品を紹介するためのブログパーツです。アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます
出典：カエレバ公式

ヨメレバとは、「ヨメレバ」ブログパーツは、ブログ上で書籍を紹介するためのブログパーツです。アマゾン、楽天ブックスなどの複数のブックショップへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます
出典：ヨメレバ公式

簡単にいうと、商品紹介のアフィリエイトをまとめて紹介できるサービスですね。

例えば、おすすめ本をこんな感じで表示できたります。

セールスライティング・ハンドブック

posted with ヨメレバ

ロバート・W．ブライ/鬼塚俊宏翔泳社 2011年03月

Amazon

Kindle

カエレバ・ヨメレバともに、ユーザーデーター（サイト名、アフィリエイトID）を入力すると使えるようになります。

カエレバ・ヨメレバのなかで好きな商品を探して、商品ページからブログへ貼り付けるためのhtmlを発行できます。

サイトへの挿入方法は、ブロック横の「＋」→「フォーマット」→「カスタムhtml」をクリックして、カエレバ・ヨメレバのリンクを挿入するとOKです。

カエレバ・ヨメレバの使い方は、カエレバ・ヨメレバ・トマレバの使い方からカスタマイズまで完全解説！にて詳しく解説されています。

ショートコードでデザインUP

WordPressブログの有料テーマをご購入された方は、ショートコードで簡単におしゃれデザインを実現できたり、便利な機能が使えます。

例えば、当ブログで導入しているSango（サンゴ）では、吹き出しやレビュー機能が、ショートコードで簡単に使えます。

Tsuzuki

こんな感じで吹き出しを使えますよ〜。

[timeline]
[tl label='STEP.1' title='タイトル1'] こんな感じで [/tl]
[tl label='STEP.2' title='タイトル2'] タイムライン機能も [/tl]
[tl label='STEP.3' title='タイトル3'] 使えたりするので [/tl]
[tl label='STEP.4' title='タイトル4'] とても便利です [/tl]
[tl label='STEP.5' title='タイトル5'] ＼( 'ω')／ [/tl]
[/timeline]

[rate title="この本の評価"][value 3.5]読みやすさ[/value][value 4]面白さ[/value] [value 5]デザインの美しさ[/value][value 2]値段[/value][value 1.5]コレクション性[/value][value 4.5 end]総合評価[/value][/rate]

↑のような感じですね。