サイト制作

WordPressを使用してアフィリエイトサイトを運営する方法(3)Gutenbergエディタでの記事の書きかた

公開日:2021/01/28

あやぴ

兼業主婦アフィリエイター

あやぴ

こんにちは。兼業アフィリエイターのあやぴです。
第1回第2回の記事ではWordPressのインストール方法と初期設定について解説しました。

今回は、いよいよ記事の書きかたについて。
Gutenberg(グーテンベルク)エディタを使った記事の書きかたをご紹介していきます。

Gutenbergエディタは、WordPressではバージョン5.0以降に標準エディタとして取り入れられたブロックエディタ

ブロックエディタは、記事の見出しや段落、画像、表などを1つ1つ「ブロック」というパーツとして扱う、新しい編集画面です。ひとかたまりのブロックとして記述していくので、あとからブロックの入れ替えも簡単で、編集やレイアウトがしやすいのが特長です。

無料ブログの編集画面に慣れているかたは、少々戸惑うかもしれませんが、慣れてくるとレイアウトが簡単にできてとても便利なツールです。

今回は、以下5点の内容についてご説明します。

まずは、基本的な記事の書きかたをご説明します。

  • ※WordPress標準テーマの「Twenty Twenty」を使用して説明します。

新規投稿の追加

ダッシュボード左側のメニューから、「投稿」をクリックし、「新規追加」を選択します。

記事タイトルの入力

記事投稿の画面が表示されます。「タイトルを追加」と書かれている部分をクリックし、記事タイトルを入力します。


「投稿の練習」と入力してみました。

本文の入力

続いて、本文を入力します。

本文は、タイトル下の「文章を入力、または / でブロックを選択」と書かれている部分をクリックすると入力することができます。

文章を入力してみましょう。文字列を入力すると、段落ブロック(※1)として入力され、ブロックの上部にはツールバーが表示されます。

  • ※1 段落ブロックとは、いわゆる「記事の文章を書く部分」を指します。

本文は段落ブロックに入力をします。
段落ブロック内で改行するには、[Shift]キー+[Enter]キーを押します。[Enter]キーで改行すると、新たな段落ブロックが作成されます。

見出しブロックの追加

次に、見出しブロックを作成してみましょう。
見出しブロックは、文章中に小見出しをはさんでメリハリをつけることができます。

左上の「+」ボタンをクリックし、ブロックの一覧の中から「見出し」をクリックします。

見出しブロックが挿入されました。


続いて、見出しブロックに文字列を入力してみましょう。

見出しは「H2」要素として挿入されますが、見出しブロック上部のツールバーの「H2」ボタンをクリックすると、見出しレベルを変更することが出来ます。


「H2」の見出しの下にさらに小見出しを付けたい場合は「H3」を選択します。

「H2」「H3」とは、HTMLタグのひとつ、「h」タグのことを指します。

hタグは、ページの重要なテーマをユーザーや検索エンジンに伝えるための見出しタグ。
最も重要な見出しから順に「h1」「h2」「h3」…と階層分けされており、「h6」のレベルまで利用可能です。

段落ブロックの追加

さらに、見出しの下に本文を追加してみましょう。

見出しブロックの下をクリックするとカーソルが表示され、自動的に段落ブロックとなり文字が入力できます。 見出しブロックの下にある「+」か、左上の「+」ボタンをクリックし、段落ブロックを追加してから入力してもOKです。

2行ほど入力してみましょう。1行入力した後、[Shift]+[Enter]を押して改行し、2行目を入力します。


段落を改める場合は、[Enter]キーを押します。
段落ブロックが追加され、段落と段落の間は1行ほどのスペースが空きます。

ブロックの削除

作成したブロックを削除したい場合は、ブロック上部にあるツールバー右端の「詳細設定」ボタンをクリックし、「ブロックを削除」を選択します。

文字の装飾

次に、文字の装飾をしてみましょう。
段落に入力した文字は、部分的に太字にしたり、色を変えたりすることができます。

太字にしたい文字を選択してから段落ブロック上部の「B」(太字)をクリックすると太字になります。


段落ブロック上部のツールバーから、「詳細設定」ボタンをクリックし、「文字色」をクリックすると文字の色を変えられます。


選択した文字に色が付きました。

さらに、画面右上の「設定」ボタンをクリックすると、ブロックの詳細を設定する画面が出てきます。ブロック全体に背景色を付けるなど、ブロックに対して細かな設定をすることができます。

ハイパーリンクの挿入

文字列にハイパーリンクを挿入するには、リンクを設定したい文字列を選択してから、段落ブロック上部の「リンク」ボタンをクリックします。


リンク先の入力欄が出てくるので、リンク先のURLを入力し、[Enter]キーを押します。


リンクを設定できました。

次に、画像を挿入してみましょう。 編集画面左上か、ブロック右下の「+」ボタンをクリックし、「画像」ブロックを追加します。

「アップロード」ボタンをクリックし、パソコンから画像をアップロードします。


もしくは、「メディアライブラリ」ボタンをクリックし、すでにアップロードしてある画像の一覧から挿入したい画像を選択します。


画像ブロックを挿入できました。


設定画面から、「代替テキスト(alt属性)」を入力します。

  • ※SEOの観点と音声読み上げソフトにも対応させるために、何を表している画像なのかわかるよう代替テキスト(alt属性)を入力します。

そしていよいよ、アフィリエイトリンクの挿入です。

アフィリエイトリンクは、ASPの管理画面から取得したアフィリエイトタグを挿入しなければならないため、通常の段落ブロックではなくカスタムHTMLというブロックを使用します。 カスタムHTMLブロックは、HTMLタグを直接入力することができるブロックです。

カスタムHTMLブロックに、ASPの管理画面から取得したアフィリエイトタグを貼り付けます。

アフィリエイトバナー等を中央揃えにしたい場合は、

<div align=”center”></div>

などのタグを入れる必要があります。


ブロック上部のツールバーのプレビューボタンをクリックすると、アフィリエイトバナーやテキストリンクの表示を確認することができます。

カテゴリーの追加

記事が作成できたら、保存の前にカテゴリーとタグの設定をしましょう。

設定画面内の「文書」タブに「カテゴリー」の設定欄があります。「カテゴリー」欄が表示されていない場合は、「∨」をクリックして展開します。 初期設定では「未分類」というカテゴリーしかありませんので、カテゴリー設定画面であらかじめカテゴリーを追加しておきます。

上図のように、設定画面からも新規カテゴリーを追加できますが、ここでは「スラッグ」(URLの一部となる部分)が設定できませんので、カテゴリー設定画面からの追加をおすすめします。

  • ※カテゴリースラッグを設定しておくと、URLが階層化されてSEO観点からもメリットがあるとされています。

カテゴリー設定画面は、ダッシュボード左側メニューの「投稿」をクリック後に「カテゴリー」をクリックすると表示されます。

  • ※カテゴリー設定画面は新しいタブで開くか、あらかじめ編集内容を下書き保存しておきましょう。

カテゴリー設定画面で、カテゴリー名とスラッグ(半角英数字)を入力し、「新規カテゴリーを追加」ボタンをクリックします。


同様の手順で、あらかじめいくつかカテゴリーを追加しておきましょう。
カテゴリーは親カテゴリー、子カテゴリーを作成できますので必要に応じて設定してください。


カテゴリーを追加後、投稿編集画面に戻ると、設定画面に追加したカテゴリーが表示されるので、編集中の投稿に合うカテゴリーを選択します。 カテゴリーは複数選択できます。

タグの追加

投稿には「タグ」を追加することができます。「タグ」とは投稿のキーワードにあたるものです。 タグを設定すると同じタグに属した記事を一覧表示できるページが自動的に作成され、関連する記事を探しやすくなります。 設定画面の「タグ」欄を表示し、「新規タグを追加」欄にタグを入力します。

記事が書けたら、保存を行いましょう。
記事を保存する(公開)前にプレビューを表示して投稿内容を確認することが重要です。

投稿のプレビュー

編集画面右上の「プレビュー」ボタンをクリックします。 デスクトップ・タブレット・モバイルの中から、確認をしたいデバイスタイプを選択し、「新しいタブでプレビュー」ボタンをクリックします。

プレビューが表示されました。
表示を確認し、必要であれば編集画面に戻って修正を行います。

下書き保存

これまで下書き保存の方法については説明していませんでしたが、記事を書いている途中でもこまめに「下書き保存」をするようにしましょう。 下書き保存を行う際に、合わせて設定画面の「文書」タブ内の「パーマリンク」欄を展開し、「URLスラッグ」を半角英数字で入力します。

URLスラッグは投稿のURLになるので、投稿内容に関係する英単語などを入力しておくと、あとからURLを見たときに何の記事かわかるようになります。

スラッグを設定しておかないと、タイトルの日本語がそのままスラッグになってしまう場合があります。その場合URLに日本語が含まれてしまうため、あまり望ましくありません。

投稿の保存と公開

プレビューを行い、問題がなければ記事を公開します。

「公開」ボタンをクリックします。

「公開してもよいですか?」と表示されるので、「公開」ボタンをクリックします。

「記事のタイトル」を公開しました。 と表示されれば公開完了です! お疲れ様でした^^

投稿の編集

投稿済みの記事を編集する場合は、以下の手順で編集画面を開いてください。

  1. ダッシュボード左側のメニューから「投稿」をクリック
  2. 「投稿一覧」を選択
  3. 表示された記事の一覧の選択したい記事タイトルにポインターを置く
  4. 表示されたメニューにある「編集」をクリック
  5. 編集画面を表示

編集をおこなったら、記事を「更新」します。


以上、基本的な記事の投稿方法をご説明しました。これで、WordPressを使ってアフィリエイト記事が書けますね!

3回にわたってお伝えしてきた「WordPressを使用してアフィリエイトサイトを運営する方法」は今回で完結となります。少しでも参考になれば嬉しいです^^

どんどん記事を投稿してWordPressに慣れ、コンテンツを増やしていきましょう♪
最後まで読んでいただきましてありがとうございました。

SHARE
あやぴ

兼業主婦アフィリエイター

あやぴ

埼玉県でパソコン教室を運営する傍ら、レビューブログを運営する兼業主婦アフィリエイター。著書に『アフィリエイト本気で稼げる!プロ技セレクション』『あやぴが教える!アフィリエイト実践講座』(共に技術評論社)がある。

この著者の他の記事を読む

他の著者をもっと見る

ご注意ください

  • 本記事の内容は、2021/01/28更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
  • 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
  • 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。

カテゴリーから探す

タグから探す

アフィリエイトをはじめよう!
無料新規パートナー登録
広告出稿を希望のかたはこちら
無料資料請求はこちら