WordPressでホームページを作る手順（Lightning ver.7対応）

WordPressでホームページを作成する手順を紹介します。WordPress初心者の方でも迷わないようにすべての手順について画面を掲載しています。

短時間でホームページのたたき台を作っていきます。本格的な学習に進む前にコツをつかみたい方におすすめです。作成するサイトのイメージは次のようになります。

作成するホームページのイメージビジネスサイトを構築できるテーマとして人気のLightningを使ってホームページのデザインを仕上げていきます。

記事の前半で作成手順を説明し、後半は参考資料としてWordPressの編集画面（ブロックエディタ）の使い方などをまとめてあります。

まずは短時間でこのレベルのホームページまでを構築して一段落してからゆっくりカスタマイズのイメージをふくらませたりブログ記事などを書く体制を整えていきましょう。

検証に使った環境は次のとおりです。

• WordPressバージョン：WordPress 5.3.2
• テーマ：Lightning 7.6.3

ホームページ作成に必要な準備

ここではWordPressのインストールまで完了している前提で話を進めます。まだインストールしていない方や、よくわからないときは以下のページも参考にしてください。いずれのレンタルサーバーも無料で使える試用期間があります。

エックスサーバーでWordPressをインストールする方法
さくらインターネットでWordPressをインストールする方法

管理画面とサイトの確認

• ダッシュボード --- ホームページ作成に使う管理画面のことです。
• サイト --- 実際に作成するホームページのことです。

1. 管理画面（ダッシュボード）の確認
   WordPressの管理画面（ダッシュボード）を開いてください。レンタルサーバーでWordPressをインストールした場合は一般的に「管理画面URL」や「管理者ページURL」などのメニューから開けるようになっています。

   

   ダッシュボードのURLは「サイトアドレス＋wp-admin」（例：http://example.com/wp-admin）です。このURLに直接アクセスしてダッシュボードを開くこともできます。
2. サイトの表示
   ダッシュボード左上のサイト名にマウスオーバー（カーソルを重ねる）したときに表示される「サイトを表示」をクリックして、サイトを表示しましょう。

   

3. テスト用の記事の確認
   インストール直後はサイトのトップページに「Hello world!」と表示されているはずです。これはテスト表示用のブログ記事です。

   

4. ダッシュボードに戻る
   もう一度サイト名にマウスオーバーして表示される「ダッシュボード」をクリックするとダッシュボードに戻ることができます。

   

デザインの切り替え

1. 使用中のテーマの確認
   現在使用中のテーマを確認するため「外観」-「テーマ」メニューを開きます。

   

   左上にサムネイルが表示されているテーマが現在使用中のテーマです。ここではTwenty Twentyというテーマが使用中になっています。

   

2. テーマの新規追加
   別のテーマ（デザインテンプレート）に切り替えるため、「新規追加」をクリックします。

   

3. テーマの検索
   画面右側の「テーマを検索」からテーマを検索します。

   

4. Lightningの検索
   ここではテーマにLightningを使いたいので「Lightning」（またはlightning）と入力すると、検索結果にLightningが表示されます。

   

5. テーマのインストール
   見つかったテーマ「Lightning」にマウスオーバーして「インストール」をクリックします。

   

6. テーマの有効化
   インストールが完了したら「有効化」をクリックします。これでサイトのテーマがLightningに切り替わります。

   

   すでにLightningがインストール済みの場合は「テーマのインストールに失敗しました。」と表示されます。その場合、「外観」-「テーマ」メニュー(1)を開いてインストール済みのLightningのサムネイルにマウスオーバーして「有効化」(2)をクリックします。

   

7. 使用中のテーマの確認
   テーマを有効化した後、「外観」-「テーマ」を開くとテーマがLightning(1)に切り替わったことがわかります。

   

   同時に、テーマと一緒にプラグインをインストールするようにメッセージ(2)が表示されます。無視しても問題ありませんが、練習も兼ねてプラグインをインストールしてみましょう。

   プラグインとは拡張機能のことです。WordPressで使えるメニューを増やして作業を効率化してくれる機能です。
8. 推奨プラグインのインストール
   上記の(2)「プラグインのインストールを開始」をクリックすると、必須プラグインのインストール画面が開くので「インストール」をクリックします。

   

9. プラグインの有効化
   インストールが完了したら必須プラグインのインストール画面に戻ります。

   

   「有効化」をクリックします。これでVK All in One Expansion Unitプラグインが使用可能になります。

   

10. 切り替えたテーマの確認
    これで新しいテーマ「Lightning」への切り替えが完了しました。画面左上のサイト名にマウスオーバーすると表示される「サイトを表示」をクリックして雰囲気を確認しましょう。

    

    どうでしょうか。まだ初期状態ですが、なんとなくホームページができそうなイメージがわきませんか？

    

ブログ記事（投稿）の作成

• 投稿 --- ブログ記事
• 固定ページ --- ブログ記事ではない普通のページ（例：会社概要、サービス紹介）

1. ブログ記事をメンテナンスする「投稿」メニュー
   ブログ記事を管理するメニューが「投稿」メニューです。新たなブログ記事を作成するにはダッシュボードに戻って「投稿」‐「新規追加」メニューをクリックします。

   

   「投稿」をクリックして表示されるサブメニューから「新規追加」をクリックしても大丈夫です。
2. 記事のタイトル・本文を入力
   開いた画面（投稿の編集画面）でブログ記事のタイトル(1)と本文(2)を入力します。

   

   タイトル(1)と本文(2)を入力したイメージは次のようになります。

   

3. 画像の追加
   本文は文章だけでなく画像や箇条書きなど複数のパーツ（ブロック）を組み合わせて構成することができます。試しに本文の下に画像を追加してみましょう。それには、画面上部のアイコン（ブロックの追加）をクリックします。

   

   「よく使うもの」の下にある「画像」をクリックします。

   

   「よく使うもの」に「画像」が見当たらない場合はブロック選択リストを下にスクロールして「一般ブロック」から「画像」を選択してください。

   

4. 画像ファイルの選択
   画像ブロックが追加されるので「アップロード」をクリックして使用中のPCから適当な画像を選択しましょう。

   

   この画面に画像をドラッグアンドドロップすることもできます。
5. 画像のアップロード
   PCから画像ファイルを選択（ダブルクリックまたは「開く」をクリック）すると、その画像がアップロードされます。

   

   アップロードが完了すると、タイトルや文章の下に画像が表示されます。

   

6. 画像の設定
   画像ブロックの右側にあるサイドバーから画像のサイズなどを設定できます。

   

   設定項目の中で比較的重要なのは「ALTテキスト」（代替テキスト）（上記画像の下線部分）です。本来の機能は、何らかの事情で画像が表示されないときに代わりに表示される文字を入力しておく（例：先日のセミナーの様子）項目ですが、SEO対策として必須入力です。今は「画像の簡単な説明を入力する」くらいの理解で大丈夫です。

   ブロックの順番を入れ替えるには、ブロック左上のハンドルをドラッグするか上下アイコンをクリックします。

   

   ブロックの削除、複製などはブロックのツールバー右端の「詳細設定」（）から設定できます。

   

7. 投稿一覧と一緒に表示される「アイキャッチ画像」
   投稿を作成する際、もう1つ重要な画像があります。「アイキャッチ画像」です。投稿が一覧される際に一緒に表示される小さい画像で次のようなイメージです。

   

   アイキャッチ画像を登録するにはサイドバー上部の「文書」をクリックし、下部の「アイキャッチ画像」をクリックしてメニューを開きます。

   

8. アイキャッチ画像の設定
   「アイキャッチ画像を設定」をクリックして開いた画面から、「ファイルをアップロード」(1)をクリックして新たな画像をアップロードするか、「メディアライブラリ」(2)をクリックしてアップロード済みの画像(3)を選択します。

   

   どの画像をアイキャッチ画像に設定するかは自由です。投稿内で使っていない画像を選択しても問題ありません。

   画面右下の「アイキャッチ画像を設定」をクリックすると設定完了です。

   

   アイキャッチ画像を設定すると投稿の編集画面にサムネイルが表示されます。

   

9. 投稿の公開
   投稿のタイトル・本文・アイキャッチ画像が設定できたら、ひとまず、画面右上の「公開する」ボタンをクリックして投稿を公開してみましょう。

   

   確認メッセージが表示され、「公開」をクリックすると投稿が公開されます。

   

   いきなり公開したくないときは「公開する」ボタンの左にある「下書きとして保存」ボタンをクリックしましょう。投稿は保存されますが公開はされません。
10. 投稿の確認
    投稿を公開できたら、「投稿を表示」をクリックして投稿を確認しましょう。

    

    画面に投稿が表示されます。

    

11. 投稿一覧の確認
    画面上部の「HOME」をクリックしてトップページを見てみましょう。

    

    トップページの下にある投稿一覧（ブログ）を見ると、アイキャッチ画像と共に投稿のタイトルや本文の抜粋が表示されているはずです。

    

    まだ1件書いただけなので雰囲気が出ませんが、何件も投稿を作成していくと新しい順に投稿が一覧表示されることがわかります。

    

これで投稿ができました。あとは文章を考えたり画像を作成してコツコツと記事を書いていきましょう。

カテゴリーの作成

1. カテゴリーを作成する「投稿」‐「カテゴリー」メニュー
   カテゴリーを作成するため、ダッシュボードに戻って「投稿」‐「カテゴリー」メニューを開きましょう。

   

2. 既存カテゴリーの編集
   開いた「カテゴリー」メニューには、すでに「未分類」というカテゴリーが作成されています。この「未分類」をクリックしてカテゴリー名を変更しましょう。「未分類」にマウスオーバーして表示される「編集」をクリックしても大丈夫です。

   

3. 「未分類」カテゴリーの変更
   カテゴリーの名前(1)とスラッグ(2)が共に「未分類」になっているので任意の名前に変更しましょう。名前(1)は日本語（例：最新情報）、スラッグ(2)はアルファベット（例：news）で入力します。英単語でなくても大丈夫です。名前は画面に表示され、スラッグはURLの一部（例：http://example.com/category/news）になります。

   

   カテゴリーはブログ記事のジャンルのことです。たとえば、お知らせ、イベント情報、キャンペーン情報、新商品情報、おすすめ商品などです。
4. カテゴリーの更新
   カテゴリー名とスラッグを入力したら、画面下の「更新」ボタンをクリックします。「未分類」カテゴリーの名前とスラッグが変更されます。

   

5. カテゴリーリンクの色分け
   カテゴリー編集メニューについて他の項目（「親」「説明」）の用途は今は考えなくても大丈夫ですが、カテゴリーリンクを色分けしたければ「色」で設定しておくと良いかもしれません。

   

6. 新たなカテゴリーの追加
   もう一度「投稿」‐「カテゴリー」メニューを開いて「新規カテゴリーを追加」から新たなカテゴリーを追加してみましょう。名前(1)は日本語で、スラッグ(2)は英数字で入力します。

   

   2つ以上の単語でスラッグを入力する場合はハイフンで区切ります。たとえば、「event-info」や「customer-voice」などです。
7. 追加されたカテゴリーの確認
   入力できたら、画面を下にスクロールして「新規カテゴリーを追加」ボタンをクリックすると新たなカテゴリーが追加されます。

   

   カンの良い方は「最新情報」カテゴリーにチェックボックスがないことに気づいたかもしれません。これは、最初から存在するカテゴリーは削除できないことを示しています。
8. カテゴリーを指定したブログ記事の作成
   カテゴリーを選んでブログ記事を書く練習をしてみましょう。それには、「投稿」‐「新規追加」メニューを開いて投稿のタイトル・本文・アイキャッチ画像などを設定し、「文書」タブを開いて画面下から任意のカテゴリーをチェックします。

   

   あとは通常通り「公開する」ボタン（および「公開」ボタン）をクリックすれば完成です。

9. 投稿のカテゴリーの確認
   「投稿を表示」などをクリックして、公開した投稿を表示してみましょう。選択したカテゴリーのリンクが表示されるはずです。クリックすると、そのカテゴリーの記事を一覧表示できる仕組みです。

   

   カテゴリーリンクが表示されるかどうかはテーマ（デザインテンプレート）によります。これはLightningの例です。

普通のページ（固定ページ）の作成

WordPressで作成する「普通のページ」は「固定ページ」とよばれます。「固定ページ」‐「新規追加」メニューから作成します。

ここでは次のようなページを作成していきます。必要に応じて作業してみてください。

• サービス紹介ページ（サービスや商品の一覧）
• サービス詳細ページの作成（個別サービスの紹介）
• ご利用案内ページの作成（ご利用の流れ・よくある質問）
• お客様の声ページの作成
• 会社概要ページの作成（会社情報・地図）

固定ページ作成画面の使い方は基本的に投稿と同じです。タイトルを入力して本文を組み立てていく仕組みです。以下、それぞれのページの作成手順を説明します。

サービス紹介ページの作成

サービス紹介（または商品紹介）ページは会社で提供するサービスや商品を一覧で見せるページです。

このページを作成するため、「固定ページ」‐「新規追加」メニューを開いてタイトル（例：「サービス紹介」「商品一覧」）を入力します。

ブロックエディタを使って本文を組み立てていきます。ここでは、2つのサービスサービス1、サービス2（例：WordPress講座、Excel講座）の概要を紹介するという想定です。

サービス1の作成

1. 見出しブロックの追加
   サービスの見出しを作成するため、「ブロックの追加」をクリックして「一般ブロック」メニューから「見出し」を追加し、サービス名や商品名を入力(1)して中央寄せ(2)にします。

   

   見出しの種類(上記の3)はH2（見出し2）からH4（見出し4）まで選べますが、この記事で使う見出しは原則としてH2を選ぶようにしてください。理由は長くなるので省略しますが、見出しは文字の大きさで選ぶものではないのでご注意ください。

   以降、見出しの中央寄せは任意です。
2. メディアと文章ブロックの追加
   サービスのイメージ画像と説明を横並びで見せるため、「ブロックの追加」をクリックして「レイアウト要素」メニューから「メディアと文章」を追加します。

   

   左側のセクションには「アップロード」をクリックして画像をアップロードするか、「メディアライブラリ」をクリックしてアップロード済みの画像を選択します。

   

   画像と横並びにする右側の文章の上位置を合わせるため、「縦位置を上に」を選択します。

   

   幅が狭い端末では横並びが解除されるように、サイドバーで「モバイルでは縦に並べる」を選択します。

   

   上記のメニューはWordPressのバージョンによっては「モバイルで重ねる」などのように文言が違う場合があります。
3. 段落ブロックの追加
   メディアと文章ブロックの右側にサービスの概要を組み立てます。まずは、サービスの概要を示す段落を作成しますが、既に段落ブロックが追加されているので、サービスの説明文を入力(1)します。その際、文字サイズが「大」に設定されているので違和感があればサイドバーの「文字サイズ」で「標準」(2)などに変更しましょう。

   

   段落ブロックが存在しない場合は「ブロックの追加」をクリックして「一般ブロック」メニューから「段落」を追加します。
4. リストブロックの追加
   サービスの特徴を箇条書きするため、段落の下に「ブロックの追加」をクリックして「一般ブロック」メニューから「リスト」（箇条書き）を追加します。
   上記の文章を入力後、Enterキーを押すと新たなブロックを追加できるようになります。

   

   意図しない場所にブロックが追加されてしまった場合はドラッグアンドドロップして段落の下に移動しましょう。

   サービスの特徴を箇条書きします。リストブロックでは項目の入力後にEnterキーを押すと新たな箇条書き項目ができる仕組みです。

   

5. ボタンブロックの追加
   サービス紹介ページから個々のサービス詳細ページにリンクするため、リストの下に「ブロックの追加」をクリックして「レイアウト要素」メニューから「ボタン」を追加します。

   

   ボタンの文字を入力(1)して、サイドバーから背景色(2)や文字色(3)を選択します。

   

   ボタンのリンク先URL(上記の4)はサービス1の詳細ページ（まだ作っていない）のURLなので後で入力しても大丈夫です。詳細ページの作成後、忘れずに設定してください。設定するURLが決まっている（例：WordPress講座 → http://example.co.jp/wordpress）なら、ここで入力しても大丈夫です。

   ブロックツールバーからボタンを中央寄せ、右寄せにもできます。好みに合わせて設定してください。

   

6. サービス1のプレビュー
   これでサービス1は完成です。画面右上の「プレビュー」をクリックして確認しましょう。

   

サービス2の作成

サービス1のレイアウトが固まれば、同じようにサービス2、3、4…について作成すれば大丈夫です。ゼロから同じ作業をしても構いませんが、次のようにブロックをコピーした方が効率的です。

1. 見出しブロック・メディアと文章ブロックの選択
   複製したいブロック（見出し・メディアと文章）の全体をマウスでうまく選択します。

   

   複数ブロックをうまく選択できない場合は見出しブロックとメディアと文章ブロックを別々に複製してください。手間は増えますが結果は同じです。
2. 選択したブロックの複製
   ブロックツールバー右端の詳細設定から「複製」をクリックします。

   

   ブロックが複製されます。

   

3. 追加されたブロックの編集
   あとは、複製されたブロックをサービス2の内容に変更すれば大丈夫です。

   

確認とページのURLの設定

1. 作成したサービス紹介ページの確認
   サービス紹介ページはこれで完成です。画面右上の「プレビュー」をクリックして確認しましょう。

   

2. ページのURLの修正
   問題なければ編集画面に戻ってタイトルをクリックしてページのURL（パーマリンク）(1)を確認します。日本語になっている場合は英数字に修正した方が無難です。その場合、「編集」(2)をクリックして修正します。

   

   パーマリンクを英数字（例：service）に修正(1)し、「保存」(2)をクリックすると設定完了です。

   

画面右上の「公開する」（続いて「公開」）をクリックするとページが公開されます。

これでサービス紹介ページは完成です。続いて、サービス詳細ページを作成します。

サービス詳細ページの作成

サービス詳細ページは個々のサービス（または商品）の詳細情報を掲載するページです。サービス紹介ページやトップページのPRブロックなどからリンクされます。1ページ1サービス構成になり、予約ページや問い合わせページにリンクすることで、成約に結びつけます。

サービス詳細ページを作成するため、「固定ページ」‐「新規追加」メニューを開いてタイトル（貴社が提供する「WordPress講座」「無料相談サービス」などのサービス名や商品名）を入力します。

ブロックエディタを使って本文（サービスの特徴・サービスの詳細）を組み立てていきます。

サービスの特徴

1. 見出しブロックの追加
   「サービスの特徴」という見出しを作成するため、 「ブロックの追加」をクリックして「一般ブロック」メニューから「見出し」を追加し、「サービスの特徴」と入力(1)します。「WordPress講座の特徴」などでも構いません。テキストは中央寄せ(2)にします。

   

2. 段落ブロックの追加
   サービスの特徴を入力するため、「ブロックの追加」をクリックして「一般ブロック」メニューから「段落」を追加して文章を入力します。

   

サービスの詳細

1. 見出しブロックの追加
   「サービスの詳細」という見出しを作成するため、上記の段落の下に「ブロックの追加」をクリックして「一般ブロック」メニューから「見出し」を追加し、「サービスの詳細」と入力して中央寄せ(2)にします。

   

2. 表ブロックの追加
   サービスの詳細情報を表形式で作成するため、 「ブロックの追加」をクリックして「フォーマット」メニューから「表」を追加します。

   

   表の行数と列数を選択(1)して「表を作成」(2)をクリックします。行数・列数は後で変更できるので適当でも大丈夫です。ここでは、2列・5行にしました。

   

   データ入力用に空の表が追加されます。

   

   サービスの詳細情報を入力しましょう。

   

   行や列を追加・削除したい場合は、ブロックツールバーを使います。

   

   プレビューすると表のデザインに違和感があることもあります。その場合、ひとまずサイドバーやブロックツールバーを使って試行錯誤してみてください。

   ここでは、サイドバーで「列を同じ幅に揃える」に設定(1)し、1列目を右寄せに設定(2)しました。（1列目の任意のセルをクリックしてツールバーから「カラムを右寄せ」をクリック）

   

   これでコンパクトな表に見えるかもしれません。

   

   その他、「なぜ枠線が付かないのか」など表のデザインに疑問があるかもしれませんが、メニューでできないことは後回しにした方が無難です。

3. ボタンブロックの追加
   ユーザーを予約ページや問い合わせページに誘導するボタンを作成するため、「ブロックの追加」をクリックして「レイアウト要素」メニューから「ボタン」を追加し、ボタンの文字を入力(1)して、サイドバーから背景色(2)や文字色(3)を選択します。

   

   ボタンのリンク先URL(上記の4)は予約ページや問い合わせページのURLなので後で入力しても大丈夫です。ここでは「http://example.co.jp/contact」と入力しました。後で作成する問い合わせページのURLを同じにすれば大丈夫です。

確認とページのURLの設定

1. 作成したサービス詳細ページの確認
   これでサービス詳細ページは完成です。画面右上の「プレビュー」をクリックして確認しましょう。

   

2. ページのURLの修正
   編集画面に戻ってタイトルをクリックするとページのURL（パーマリンク）(1)を確認できます。日本語になっている場合は英数字に修正した方が無難です。その場合、「編集」(2)をクリックして修正します。

   

   パーマリンクを英数字（例：wordpress）に修正(1)し、「保存」(2)をクリックすると設定完了です。

   

画面右上の「公開する」（続いて「公開」）をクリックするとページが公開され、作業完了です。

ここまでサービス1の詳細ページの作り方を説明しました。同じように他のサービス（サービス2、3、4…）の詳細ページも作成してください。

作成したページをたたき台としてコピーしたい場合はDuplicate Postプラグインが便利です。使い方は簡単で、「プラグイン」‐「新規追加」メニューからインストール、有効化した後、固定ページの一覧を開いて、コピーしたいページの「複製」または「新規下書き」をクリックするだけです。これでページがコピー（下書きの状態）されます。

「複製」はページをコピー、「新規下書き」はコピーして編集画面を開きます。

あとはコピーしたページを開いて内容を変更していけば大丈夫です。

これでサービス詳細ページは完成です。続いて、ご利用案内ページを作成します。

ご利用案内ページの作成

ご利用案内ページはサービスを利用する流れを説明したり、よくある質問を掲載するページです。

このページを作成するため、「固定ページ」‐「新規追加」メニューを開いてタイトル（ご利用案内）を入力します。

ブロックエディタを使って本文（ご利用の流れ・よくある質問）を組み立てていきます。

ご利用の流れ

「ご利用の流れ」はサービスを利用するまでの流れ（例：「ステップ1：予約 → ステップ2：予約完了 → ステップ3：料金支払」など）を図解するように見せるパーツです。

1. 見出しブロックの追加
   「ご利用の流れ」という見出しを作成するため、「ブロックの追加」をクリックして「一般ブロック」メニューから「見出し」を追加して「ご利用の流れ」と入力(1)し、中央寄せ(2)にします。

   

2. 段落ブロックの追加
   ご利用の流れのひとこと説明を入力するため、「ブロックの追加」をクリックして「一般ブロック」メニューから「段落」を追加して文章を入力します。

   

3. フローブロックの追加
   ご利用の流れを視覚的に見せるため、「ブロックの追加」をクリックして「VK Blocks」メニューから「フロー」を追加し、タイトル(1)、説明(2)を入力して画像(3)を選択します。

   

   下向きの矢印(上記の4)は次に続くブロックということを示しています。

   同じように2番目、3番目…のフローブロックを追加してご利用の流れを作成していきます。

   

   最後のフローブロックは次に続く矢印は必要ないので忘れずに「矢印を表示しない」を選択しましょう。

   

よくある質問

1. 見出しブロックの追加
   「よくある質問」という見出しを作成するため、「ブロックの追加」をクリックして「一般ブロック」メニューから「見出し」を追加し、「よくある質問」と入力して中央寄せ(2)にします。

   

2. 質問と解答ブロックの追加
   よくある質問を追加するため、「ブロックの追加」をクリックして「VK Blocks」メニューから「質問と解答」を追加し、質問(1)と解答(2)を入力します。

   

   同じように2番目、3番目…の質問と解答ブロックを追加してよくある質問を作成していきます。

   

確認とページのURLの設定

1. 作成したご利用案内ページの確認
   これでご利用案内ページは完成です。画面右上の「プレビュー」をクリックして確認しましょう。

   

2. ページのURLの修正
   編集画面に戻ってタイトルをクリックするとページのURL（パーマリンク）(1)を確認できます。日本語になっている場合は英数字に修正した方が無難です。その場合、「編集」(2)をクリックして修正します。

   

   パーマリンクを英数字（例：guide）に修正(1)し、「保存」(2)をクリックすると設定完了です。

   

画面右上の「公開する」（続いて「公開」）をクリックするとページが公開されます。

これでご利用案内ページは完成です。続いて、お客様の声ページを作成します。

お客様の声ページの作成

お客様の声ページは、これまでサービスを利用していただいた方からの感想などを掲載するページです。

このページを作成するため、「固定ページ」‐「新規追加」メニューを開いてタイトル（お客様の声）を入力します。

ブロックエディタを使って本文を組み立てていきます。ここでは、2つのサービス（WordPress講座、Excel講座）ごとにお客様の声をまとめます。

サービス1のお客様の声

1. 段落ブロックの追加
   お客様の声のひとこと説明を入力するため、「ブロックの追加」をクリックして「一般ブロック」メニューから「段落」を追加して「お客様の声を紹介します。」などと入力します。

   

2. 見出しブロックの追加
   サービス名の見出しを作成するため、上記の段落の下に「ブロックの追加」をクリックして「一般ブロック」メニューから「見出し」を追加し、サービス1の名前（例：WordPress講座）を入力(1)してテキストを中央寄せ(2)にします。

   

3. 吹き出しブロックの追加
   個々のお客様の声を吹き出しで見せるため、「ブロックの追加」をクリックして「VK Blocks」メニューから「フキダシ」を追加し、画像(1)を選択、人物名(2)やセリフ(3)を入力します。

   

   画像の配置（左または右）はサイドバーで設定できます。

   

   吹き出しの色もサイドバーで設定できます。

   

   2人目、3人目…の「お客様の声」も同じようにフキダシブロックを追加して作成します。

   

サービス2のお客様の声

サービス2のお客様の声は上記の手順でゼロから作成しても構いませんし、見出しと吹き出しブロックを複製してテキストを編集する形でも良いでしょう。

1. 見出しと吹き出しを選択
   サービス1の見出しと吹き出しブロックを選択します。

   

2. 見出しと吹き出しを複製
   ブロックツールバーの「詳細設定」から「複製」をクリックして、見出しと吹き出しをまとめて複製します。

   

   サービス1のお客様の声が複製されます。

   

3. お客様の声の編集
   画像・お客様名・お客様の声を変更してサービス2のお客様の声を完成させます。

   

確認・パーマリンクの変更

1. 作成したお客様の声ページの確認
   これでお客様の声ページは完成です。画面右上の「プレビュー」をクリックして確認しましょう。

   

2. ページのURLの修正
   編集画面に戻ってタイトルをクリックするとページのURL（パーマリンク）(1)を確認できます。日本語になっている場合は英数字に修正した方が無難です。その場合、「編集」(2)をクリックして修正します。

   

   パーマリンクを英数字（例：voice）に修正(1)し、「保存」(2)をクリックすると設定完了です。

   

画面右上の「公開する」（続いて「公開」）をクリックするとページが公開されます。

これでお客様の声ページは完成です。続いて、会社概要ページを作成します。

会社概要ページの作成

会社概要ページは会社の住所や代表者名などの「会社情報」と地図を掲載する「所在地」で構成されるページです。

会社概要ページを作成するため、「固定ページ」‐「新規追加」メニューを開いてタイトル（会社概要）を入力します。

ブロックエディタを使って本文（会社情報・所在地）を組み立てていきます。

会社情報

1. 見出しブロックの追加
   「会社情報」という見出しを作成するため、 「ブロックの追加」をクリックして「一般ブロック」メニューから「見出し」を追加し、「会社情報」と入力(1)して中央寄せ(2)にします。



2. 表ブロックの追加
   会社の住所などの基本情報を表形式で作成するため、 「ブロックの追加」をクリックして「フォーマット」メニューから「表」を追加します。

   

   表の行数と列数を選択(1)して「表を作成」(2)をクリックします。行数・列数は後で変更できるので適当でも大丈夫です。ここでは、2列・4行にしました。

   

   データ入力用に空の表が追加されます。

   

   会社情報を入力しましょう。

   

   行や列を追加・削除したい場合は、ブロックツールバーを使います。

   

   表のレイアウトについてはサイドバーの「列を同じ幅に揃える」オプション(1)やブロックツールバーの配置設定（左寄せ・中央寄せ・右寄せ）(2)も試して仕上がりを比べてみてください。

   

これで会社情報セクションは完成です。続いて、所在地セクションを作成します。

所在地

所在地にはGoogleマップを表示します。

1. 見出しブロックの追加
   「所在地」の見出しを作成するため、「ブロックの追加」をクリックして「一般ブロック」メニューから「見出し」を追加し、「所在地」と入力(1)して中央寄せ(2)にします。

   

2. カスタムHTMLブロックの追加
   所在地の地図（Googleマップ）を追加するため、「ブロックの追加」をクリックして「フォーマット」メニューから「カスタムHTML」を追加します。

   

   ここに入力する地図のHTMLをコピーするため、Googleマップを開きます。

   

   左上のボックスに会社の住所を入力して地図を表示します。

   

   地図の左から「共有」をクリックします。

   

   共有メニューから「地図を埋め込む」をクリックします。

   

   サイズで「大」(1)を選択し、「HTMLをコピー」(2)をクリックします。これで地図を表示するためのHTMLがコピーされます。

   

   WordPressのダッシュボードに戻って、コピーしたHTMLをカスタムHTMLブロックにペーストします。

   

確認とページのURLの設定

1. 作成した会社概要ページの確認
   会社概要ページはこれで完成です。画面右上の「プレビュー」をクリックして確認しましょう。

   

2. ページのURLの修正
   問題なければ編集画面に戻ってタイトルをクリックしてページのURL（パーマリンク）(1)を確認します。日本語になっている場合は英数字に修正した方が無難です。その場合、「編集」(2)をクリックして修正します。

   

   パーマリンクを英数字（例：company）に修正(1)し、「保存」(2)をクリックすると設定完了です。

   

画面右上の「公開する」（続いて「公開」）をクリックするとページが公開されます。

これで会社概要ページは完成です。

メインメニュー（ナビゲーション）の作成

メニューに固定ページを追加

1. オリジナルメニューを作成する「外観」-「メニュー」
   テスト用の固定ページを何ページか準備できたら、オリジナルメニューを作成するため「外観」-「メニュー」メニューを開きます。

   

   自分で作るオリジナルメニューは「カスタムメニュー」とよばれることもあります。また、ホームページ上部にある全ページ共通のメニューは「グローバルメニュー」や「グローバルナビゲーション」といいます。
2. メニュー名の入力
   任意のメニューの名前(1)を入力（例：メインメニュー・ヘッダーメニューなど）し、「メニューを作成」ボタン(2)をクリックします。

   

   メニュー名はホームページ上には表示されません。「menu1」や「メニュー1」「グローバルナビゲーション」など自由な名前で大丈夫です。

   すでに作りかけのメニューが表示されている場合は「新しいメニューを作成しましょう」をクリックしてゼロからメニューを作成しましょう。

   

3. 固定ページをメニューに追加
   画面左側からメニューに追加したい固定ページ(1)をチェックして、「メニューに追加」(2)をクリックします。

   

   このページリストに表示されるのは作成済み・公開済みのページのみです。作成したはずのページがリストに見当たらない場合、「すべて表示」をクリックしてみてください。

   メニュー構造の下に固定ページが追加されます。メニューに表示されるページです。

   

4. 表示順の変更
   メニューの表示順を変更したい場合、マウスで上下に移動して表示順を変更することができます。最も上の項目がメニューの左端に表示されます。

   

5. ドロップダウンの設定
   親子関係（ドロップダウン）にしたいメニューは、少し右にドラッグしてドロップします。この例では、「サービス紹介」にカーソルを合わせると「WordPress講座」や「Excel講座」が表示されるドロップダウンメニューになります。

   

   ドロップダウンメニューの動作イメージは次のようになります。親項目（サービス紹介）にカーソルを合わせると子項目が表示される仕組みです。

   

   ドロップダウンメニューの色は「外観」-「カスタマイズ」メニューの「Lightningデザイン設定」で変更できます。

   

   「キーカラー」がマウスオーバー時の色、「キーカラー（暗）」がメニューの色になりますが、これらの色設定はサイト全体の色設定（例：ページタイトルの背景色）と連動しているので注意してください。

6. メニューの表示位置の設定
   このメニューを表示する位置（ヘッダー・フッターなど）を設定します。それには、画面を下にスクロールして「メニューの位置」のチェックボックスから選択します。ここではヘッダーのメニューとして表示したいので「Header Navigation」をチェックします。

   

   すぐ上の「固定ページを自動追加」はチェックしないように注意してください。
7. メニューの保存
   作業が完了したら「メニューを保存」ボタンをクリックします。

   

8. メニューの確認
   これでメニューは完成です。サイトを表示してメニューを確認しましょう。

   

9. メニューの削除
   メニュー項目を削除したい場合は、メニュー項目の「▼」をクリックして設定画面を開き、「削除」をクリックします。

   

メニューにカテゴリーを追加

1. メニューには投稿のカテゴリーなども追加できます。もう一度、ダッシュボードの「外観」-「メニュー」メニューに戻って、固定ページのチェックボックスの下に見える「カテゴリー」(1)をクリックしましょう。メニューに追加したいカテゴリー(2)をチェックして「メニューに追加」(3)ボタンをクリックします。

   

2. チェックしたカテゴリーがメニューに追加されます。

   

3. メニューを保存してサイトを表示してみましょう。メニューにカテゴリーが追加されています。クリックしたカテゴリーの投稿のみが表示される仕組みです。

   

メニューにリンクを追加

1. メニューには外部サイトへのリンクも追加できます。もう一度、ダッシュボードの「外観」-「メニュー」メニューに戻って、固定ページのチェックボックスの下に見える「カスタムリンク」(1)をクリックしましょう。メニューに追加したいリンクのURL(2)とリンク文字列(3)（リンクに表示する文字）を入力して「メニューに追加」(4)ボタンをクリックします。

   

2. メニューにリンク項目が追加されます。

   

3. リンクを新たなウィンドウで開く設定
   外部サイトへのリンクは他のメニュー項目と違い、クリック時に新たなページを開きたいところです。同じページで外部リンクを開くと、お客様がサイトから出ていってしまいます。そこで、画面を一番上までスクロールして右上の「表示オプション」をクリックし、「リンクターゲット」をチェックします。

   

4. 新たなウィンドウで開くように設定
   画面を下にスクロールしてメニューに追加したリンク項目の右端にある「▼」をクリックして設定画面を開き、「リンクを新しいタブで開く 」をチェックします。これでリンク項目のクリック時に新たなタブが開くようになります。

   

   設定後、メニューを保存してサイト表示に戻り、追加されたリンクの動作を確認しましょう。

   

   メニュー項目が多くなったので便宜上、右端のリンクは削除します。

「ブログ」メニューの作成

1. 固定ページで「トップページ」と「ブログ」を作成
   「固定ページ」‐「新規追加」メニューから、「トップページ」と「ブログ」というページを作成（公開）しておきます。

   

   本文は空で大丈夫です。

   その際、ブログのパーマリンクは「http://example.net/blog」のように英数字に直しておきましょう。

   

2. 固定ページ「ブログ」をメニューに追加
   「外観」-「メニュー」メニューを開いて、固定ページの「ブログ」をメニューに追加します。

   

   先に追加したカテゴリーメニューと共にドロップダウンメニューにしておくと便利です。「ブログ」では全カテゴリーの新着情報、ドロップダウンメニューでは個別のカテゴリー記事が一覧表示される仕組みです。

   

3. メニューを確認
   メニューを保存して、「ブログ」がメニューに追加されたことを確認します。ただし、まだ設定していないのでクリックしても投稿は一覧表示されません。

   

4. 「設定」‐「表示設定」メニューでホームページの表示を設定
   「設定」‐「表示設定」メニューを開いて「ホームページの表示」で「固定ページ」を選択します。

   

5. ホームページと投稿ページを選択
   「ホームページ」で「トップページ」を選択、「投稿ページ」（投稿が一覧されるページ）で「ブログ」を選択します。

   

   「変更を保存」ボタンをクリックすると設定完了です。

6. 「ブログ」メニューの確認
   サイトを表示して「ブログ」メニューをクリックしてみましょう。カテゴリーに関係なく、すべてのカテゴリーの投稿が表示されるはずです。

   

サイト設定の変更

サイトURL（パーマリンク）の設定

1. 現在のURLの確認
   作成済みの投稿を見てURLをチェックしましょう。「?」が付いていてブログっぽいURLになっている場合もあります。

   

   固定ページのURLも見てみましょう。「?」が付いていて「会社概要」ページのために入力したスラッグ「company」が反映されていない場合もあります。

   

こうしたURLの設定は変更することができます。

1. URLの設定を変更する「設定」‐「パーマリンク設定」メニュー
   各ページのURL設定を変更するため「設定」‐「パーマリンク設定」メニューを開きます。

   

2. パーマリンク設定の変更
   「パーマリンク設定」の「共通設定」が「基本」になっている場合、「http://example.com/?p=123」のようにブログっぽいURLになってしまいます。そこで、「基本」以外（例：数字ベース）(1)に切り替えます。

   

   「数字ベース」がベストというわけではありません。あくまで初期設定の「基本」から変更する例として紹介しています。
3. 変更したパーマリンク設定の保存
   設定を保存するため、画面を下にスクロールして「変更を保存」ボタンをクリックします。

   

4. 変更後のパーマリンクの確認
   サイトを表示して個別の投稿を確認してみましょう。URLから「?」が消えて「example.net/archives/16」のようになっているはずです。

   

   固定ページも表示して確認しましょう。URLから「?」が消えて固定ページの作成時に入力した文字が反映されて「example.com/company」のようになります。

   

これでサイトのURL設定は完了です。

サイト名とキャッチフレーズの設定

1. 「設定」‐「一般」メニューへ
   サイト名とキャッチフレーズを設定するため「設定」‐「一般」メニューを開きます。

   

2. サイトのタイトル(1)はWordPressをインストールしたときに入力したホームページの名前です。問題なければそのままでも構いませんが集客やSEOを意識するなら業種や地域名を入れておく（例：サンプルPC教室【銀座・パソコン教室】）と検索で引っ掛かりやすくなります。
   キャッチフレーズ(2)はサイトの簡単な説明ですが初期設定では「Just another WordPress site」になっています。テーマによって使われる場所が異なりますが、ひとまず適当な文言に変更しておきましょう。

   

   キャッチフレーズの下にあるWordPressアドレスとサイトアドレス(3)の2つは絶対にお試しで変更しないでください。トラブルが起きる場合があります。

サイドバー（ウィジェット）の設定

サイドバー（ウィジェットメニュー）の使い方

1. サイドバー（ウィジェット）設定画面を開く
   サイドバーを設定するため、「外観」-「ウィジェット」メニューを開きます。

   

2. ウィジェットメニューの構成
   ウィジェットメニューは左側が使用可能なパーツ（ウィジェット）、右側がパーツを設置する場所（ウィジェットエリア）という構成になります。

   

3. ウィジェットの設置
   画面左のパーツを画面右のウィジェットエリアにドラッグアンドドロップしてサイドバーの表示内容を組み立てていきます。以下の例では新着情報を表示する「VK最新記事」ウィジェットを「サイドバー（共通上部）」に設置しています。

   

   「サイドバー（共通上部）」とは、全ページの上の方に表示されるサイドバーという意味です。「サイドバー（トップページ）」のように特定のページのみに表示されるサイドバーもあります。サイドバーの数や名称はテーマによって異なります。

   設置後のイメージは次のようになります。特別な設定をしなくても新着情報が表示される状態になっていますが、▼をクリックして設定画面を開いて表示内容を設定することもできます。

   

   ウィジェットをドラッグアンドドロップしただけの場合は保存の必要はありませんが設定を変更した場合はウィジェット設定画面の右下にある「保存」をクリックしてください。

   

4. サイドバーの確認
   サイトを表示してサイドバーに設置したパーツ（最新記事の表示）を確認しましょう。

   

   ブログ記事のサイドバーには自動的に最新記事を表示するように設定されているため、サイドバー（共通上部）の最新記事と重複する場合があります。

   

   その場合、テキストウィジェットをサイドバー（投稿）に追加しておきましょう。

   

   これで重複が解消します。

5. サイドバーウィジェットの削除
   不要なサイドバーウィジェットは設定画面を開いて削除できます。またはウィジェットを画面左にドラッグして画面上部に「無効化」のようなメッセージが表示されたタイミングでドロップしても消えます。

   

   WordPressのインストール直後などは不要なウィジェットが残っている場合があるので削除しておきましょう。たとえば、この記事を読んでWordPressを始めた場合、「フッター上部」に「アーカイブ」「カテゴリー」「メタ情報」が残っているかもしれません。これらは不要なので削除しましょう。

   

トップページウィジェットの設定

1. 3PRエリアの設置
   「3PRエリア」とは3つの画像を横並びにレイアウトするパーツです。サービス詳細ページへの誘導にも役立ちます。

   

   このパーツを設置するため、「外観」-「ウィジェット」メニューを開いて、「VK 3PRエリア」を「トップページコンテンツエリア上部」にドラッグアンドドロップします。

   

   3つのセクション（3PR エリア設定 1～3）が左・中央・右に横並びになります。それぞれについてタイトル(1)と説明文(3)を入力し、画像(2)を選択します。また、このブロックをクリックしてサービス詳細ページに誘導したい場合は、リンク先のURL(4)を入力します。

   

   3つのエリアを設定すると完成です。

   3PRエリアを使う場合は初期設定で表示されているPR Blockを消しておくとよいでしょう。それには、「外観」-「カスタマイズ」メニューの「Lightning トップページ PR Block」から「PR Block を表示する」のチェックを外します。
2. 新着情報を表示
   続いて、新着情報を表示するウィジェットをトップページに設置します。それには、「LTGコンテンツエリア投稿ウィジェット」を「トップページコンテンツエリア上部」にドラッグアンドドロップします。

   

3. 表示内容の設定
   設置したウィジェットは初期設定のままでも新着情報として機能しますが、表示内容を設定することもできます。

   

   LTG コンテンツエリア投稿ウィジェットの表示設定
   • 表示形式(1) --- 画像付きかシンプルなタイトル一覧か
   • タイトル(2) --- 「最新の記事」「新着情報」などを入力
   • 表示件数(3) --- 投稿の表示件数
   • カスタム投稿タイプ／カスタム分類(4) --- 表示を絞り込みたい場合

   (4)についてはサイト制作に慣れてきて「カスタム投稿タイプ」や「カスタム分類」の意味がわかったら活用してみましょう。今は「新着情報を絞り込める」くらいの理解で大丈夫です。

   トップページに新着情報が重複する場合、「外観」-「カスタマイズ」メニューの「Lightningデザイン設定」で「その他の設定」にある「トップページでデフォルトの投稿リストや固定ページを表示しない」のチェックを外してみてください。

フッターウィジェットの設定

1. 会社情報の設置
   左側のフッターに会社情報を入力するためテキストウィジェットをフッターウィジェットエリア1に追加します。ドラッグアンドドロップするには距離が遠いので、画面左下にあるテキストウィジェット(1)をクリック、フッターウィジェットエリア1を選択(2)、「ウィジェットを追加」(3)をクリック、の方法で設置した方が楽です。

   

   選択したテキストウィジェットにタイトル(1)、本文(2)を入力し、「保存」ボタン(3)をクリックすると設定完了です。ここでは会社情報を入力しましたが使い方は自由です。

   

   サイトを表示してフッターを確認しましょう。

   

2. Googleマップの設置
   フッターの中央（フッターウィジェットエリア2）に会社の地図を設置してみましょう。それにはGoogleマップのサイトを開き、目的の住所を入力します。

   

   地図が表示されます。

   

   地図の左から「共有」メニューをクリックします。

   

   「地図を埋め込む」をクリックします。

   

   「HTMLをコピー」をクリックします。

   

   このコードをウィジェットにペーストします。それには、WordPressのダッシュボード（「外観」-「ウィジェット」メニュー）に戻り、カスタムHTMLウィジェットをフッターウィジェットエリア2に設置します。

   

   設置されたウィジェットにGoogleマップのHTML(1)をコピーペーストして「保存」ボタン(2)をクリックします。

   

   サイトを表示してフッターを確認しましょう。

   

3. 運営者プロフィールの設置
   フッターの右側（フッターウィジェットエリア3）に運営者プロフィールを設置してみましょう。それには、VKプロフィールウィジェットをフッターウィジェットエリア3に追加します。

   

   「VKプロフィール」を使うにはVK All in One Expansion Unitプラグインを使います。インストールをお願いします。インストール方法がわからない場合は後述の「機能の拡張」も参考にしてください。

   画像を追加したり、プロフィール文を入力して「保存」ボタンをクリックすると設定完了です。

   

   サイトを表示してフッターを確認しましょう。

   

デザインの設定

サイトのキーカラー

初期設定で青系に設定されてるサイト全体のテーマカラーは「外観」-「カスタマイズ」メニューの「Lightningデザイン設定」から変更できます。

キーカラーはページタイトルや各種罫線などの色に反映されます。キーカラー（暗）はグローバルメニューにマウスオーバーしたときの色などになります。2つの色を変更して違和感がないかチェックしてみてください。

ヘッダーロゴ画像

「外観」-「カスタマイズ」-「Lightningデザイン設定」メニューの「ヘッダーロゴ画像」から、画面上部に表示するロゴ画像を設定できます。ロゴ画像の推奨サイズは幅280px、高さ60pxです。これと異なるサイズでも表示可能ですが縮小表示される場合があります。

表示結果は次のようになります。

スライドショー

「外観」-「カスタマイズ」-「Lightningトップページスライドショー」メニューではトップページに表示するスライドショーを設定できます。

スライド画像は5枚（スライド[1]～スライド[5]まで）、PCとモバイルで別々に設定できます。スライドショーではなく静止画像にしたい場合は、スライド[1]のみを設定（[2]～[5]の画像は削除）してください。

初期設定ではスライドショー画像に重ねる文字が設定されているので、変更するか不要であれば削除しましょう。

機能の拡張（問い合わせページの作成）

1. 機能を拡張するため「プラグイン」‐「新規追加」メニューへ
   プラグインをインストールするため、「プラグイン」‐「新規追加」メニューを開きます。

   

2. インストールするプラグインの検索
   画面右上の「プラグインの検索」にプラグインの名前を入力します。

   

   ここではメールフォーム用のプラグインである「Contact Form 7」と入力してEnterキーを押します。

   

   ここではプラグインの名前がわかっているので「Contact Form 7」と入力しました。名前がわからない場合はGoogleなどで「WordPress　問い合わせフォーム　プラグイン」など、実現したいことを検索キーワードにしてプラグイン名を探してみましょう。ほとんどの要件で「このプラグインがおすすめです！」のようなブログ記事が見つかるはずです。
3. プラグインのインストール
   見つかった場合は「いますぐインストール」をクリックします。

   

   「インストール済み」と表示される場合は「プラグイン」‐「インストール済みプラグイン」メニューに移動して、該当するプラグイン（ここではContact Form 7）の「有効化」をクリックします。
4. プラグインの有効化
   インストールが完了したら「有効化」をクリックします。

   

5. 「お問い合わせ」メニューへ
   Contact Form 7プラグインを有効化すると「お問い合わせ」というメニューが追加されます。その中の「コンタクトフォーム」をクリックします。

   

6. ショートコードのコピー
   「コンタクトフォーム1」の右側にあるショートコードをコピーします。このコードを固定ページの本文にペーストすればメールフォームが表示される仕組みです。

   

   ショートコードとは、複雑な命令を簡単に呼び出すための短いコードです。
7. 固定ページ「お問い合わせ」の作成
   「固定ページ」‐「新規追加」メニューを開いて問い合わせページを作成します。タイトル(1)に「お問い合わせ」と入力し、本文(2)には上記のステップでコピーしたショートコードをペーストします。いったん画面右上の「下書きとして保存」ボタンをクリックして下書きとして保存し、パーマリンク(3)をアルファベットに変更して「公開する」ボタンをクリックすれば完了です。

   

    

8. 問い合わせフォームの確認
   「固定ページを表示」をクリックして問い合わせフォームを確認しましょう。

   

9. うまくいっていれば次のような問い合わせフォームが表示されます。

   

    

10. メール送信のテスト
    あとはメールが届くかテストしてみてください。

    

    うまくいけばメールが届きます。

    レンタルサーバーによっては試用期間ではメール送信できない場合があります。
11. 問い合わせページのURLを設定
    問い合わせフォームが表示できたら、そのページのURLをコピーしてダッシュボード内のメニューにペーストしましょう。

    

    ペースト先は「ExUnit」-「メイン設定」‐「お問い合わせ情報」メニューの「お問い合わせ先URL」です。URLをペーストして「変更を保存」ボタンをクリックします。

    

12. お問い合わせボタンの設置
    上記の設定はサイドバーに設置するお問い合わせボタンと連動します。「外観」-「ウィジェット」メニューで「VKお問い合わせボタン」をサイドバーに設置してみましょう。

    

    サイトを表示して確認してみましょう。サイドバーにお問い合わせボタンが表示され、クリックするとお問い合わせページに移動します。

    

13. メール送信先の設定
    Contact Form 7によるメールの送信先はWordPressをインストールしたときに入力した管理者のメールアドレスになっていますが、変更できます。それには、「お問い合わせ」‐「コンタクトフォーム」メニューで「コンタクトフォーム1」の「編集」をクリックします。

    

    「メール」タブの「送信先」にメールが届く設定になっています。確認してください。

    

    変更後は画面右上の「保存」ボタンをクリックします。

まとめ

お疲れ様でした！これでホームページ作成の説明は終了です。まだまだ紹介したい機能はありますが、このあたりで作業をいったん終わりにします。

ひとまず、ここまでの作業で普通のページ、ブログ記事、問い合わせフォームで構成されるホームページのたたき台が立ち上がったかと思います。

あとは少しずつカスタマイズしたりブログ記事やページを増やしてサイトを充実させていきましょう。

【参考資料】ブロックエディタの使い方

WordPressでは投稿や固定ページの本文は見出しや段落などの「ブロック」というパーツを組み立てるように作成する仕組みです。

ダッシュボードの「投稿」メニューまたは「固定ページ」メニューから「新規追加」をクリックすると、次のような編集画面が開きます。

1. タイトル --- 文書（投稿や固定ページ）のタイトルを入力
2. 本文（ブロックエディタ） --- 文書の本文を組み立てる
3. ヘッダーツールバー --- ブロックの追加など
4. 公開メニュー --- 作成した文書の公開・プレビュー・下書き保存
5. サイドバー --- 文書やブロックのオプション設定

文書のタイトル(1)を入力し、本文(2)を組み立て、「公開する」ボタン(4)をクリックすれば投稿や固定ページは完成です。ここでは、本文を組み立てるブロックエディタの使い方に焦点を当てて説明します。

ブロックの追加

ブロックエディタにブロックを追加するには編集画面上部のヘッダーツールバーから「ブロックの追加」をクリックします。

追加するブロックの種類を選択します。ここでは、「よく使うもの」から「画像」を選択しています。

選択したブロックがブロックエディタに追加されます。

ヘッダーツールバー以外にも、ブロックを追加する方法があります。

1. ブロックにマウスオーバーして「ブロックを追加」
   現在のブロックにマウスオーバーして表示される「ブロックを追加」からブロックを追加できます。

   

2. 詳細設定からブロックを追加
   ブロック上部のブロックツールバー右端の「詳細設定」から現在のブロックの前または後にブロックを追加できます。

   

3. ブロックの最後でEnterキーを押す

段落ブロックや見出しブロックなどで文章の入力後、Enterキーを押すと新たなブロックが追加されます。

新たにブロックを追加したくない場合はShiftキーを押しながらEnterキーを押して下さい。新たな段落は作成されず同じブロックでの改行になります。

ブロックの削除

ブロック上部のブロックツールバー右端の「詳細設定」から「ブロックを削除」をクリックすると、ブロックが削除されます。

ブロックの移動（順番変更）

ブロック左上のハンドルを使うと、ブロックの上下を入れ替えたり、設置場所を移動することができます。

ブロックの複製

同じブロックをもう1つ作成したい場合はブロックツールバーの詳細設定から「複製」をクリックします。

同じブロックが作成されます。

新しいブロックのたたき台を作りたいときに便利です。

ブロックをHTMLとして編集

ブロックは基本的にコードが見えないビジュアルパーツとして作成されますが、HTMLタグを編集したい場合は、ブロックツールバーの「詳細設定」から「HTMLとして編集」をクリックします。

ブロックのHTMLタグを編集できるようになります。

ビジュアルモードに戻すには「ビジュアル編集」をクリックします。

元のビジュアル編集モードに戻ります。

ブロックのオプション設定

画面に追加したブロックは配置位置や色などを設定することができます。

ブロックツールバー

ブロックのすぐ上にあるブロックツールバーを使うと、ブロックの配置やリンクなどを設定することができます。

ブロックの種類によってオプションは異なります。以下は段落ブロックの例です。

• --- ブロックの種類を変更
• --- ブロックの配置（左寄せ・中央寄せ・右寄せ）
• --- 太字（B）・斜体（I）
• --- リンクの設定
• --- 文章以外の追加
• --- 詳細設定（ブロックの複製・削除など）

詳細設定では次のような作業ができます。

• --- ブロック設定を非表示に
• --- ブロックの複製
• --- 新たなブロックを前に挿入
• --- 新たなブロックを後に挿入
• --- HTMLとして編集
• --- 再利用ブロックに追加
• --- ブロックの削除

ブロックサイドバー

サイドバーからはブロックパーツの色などを設定できます。

これもブロックの種類によって設定項目が異なります。

• 文字サイズ
• 色設定 --- 文字色・背景色
• ドロップキャップ --- 先頭の文字を大きく

• ALTテキスト（代替テキスト） --- 画像の説明（SEOでは必須）
• 画像サイズ
• リンク設定

• 見出しレベル --- h1～h6まで設定可
• 配置 --- 左寄せ・中央寄せ・右寄せ

テキストのリンク設定

上記のサイドバーやブロックツールバーを使ってブロック内のテキストを加工できますが、一例としてブロックの文章中にリンクをはる方法を説明します。

1. 段落ブロックに文章を入力
   段落ブロックに文章を入力します。この一部にリンクを設定したいとします。

   

2. 文字の選択
   リンクをはりたい部分を選択します。

   

3. リンクアイコンをクリック
   リンクアイコンをクリックします。

   

4. リンク先URLを入力
   リンク先URLを入力します。

   

5. リンクを適用
   適用アイコンをクリックします。

   

6. リンク設定の完了
   文字にリンクが設定され、サイト表示時にクリックするとリンク先に移動するようになります。

   

 

【参考資料】主なブロックの紹介

ブロックエディタで使える主なブロックを紹介します。

段落ブロック（一般ブロック）

段落ブロックは文章を入力するときに使います。

文章入力後、Enterキーを押すと新たなブロックが作成されます。つまり、別々の段落になります。

同じ段落として編集したい場合は、Shiftキーを押しながらEnterキーを押します。単純な改行になり新たな段落は作成されません。

画像ブロック（一般ブロック）

画像ブロックは画像を差し込むときに使います。

画像のサイズを変更したい場合は、サイドバーから表示サイズを設定するか、ツールバーの「画像を編集」から画像自体のサイズを変更する方法があります。

表示サイズを変更するだけならサイドバーの「画像サイズ」の設定で大丈夫です。「画像の編集」を使うのは実際のサイズを変更（縮小）したりトリミングする場合です。

見出しブロック（一般ブロック）

見出しブロックは、これから始まる文章や画像などのブロック群の見出し（セクションタイトル）となるパーツです。

見出しの大きさは見た目で決めないようにしましょう。SEOの観点から、文書構造で決める必要があります。よくわからなければ、見出し2（h2）だけでも大丈夫です。

リストブロック（一般ブロック）

リストブロックは箇条書きを作成するときに使います。

番号付きリストにする場合、ツールバーで設定できます。

個々のリンク項目にカーソルを合わせて「リスト項目をインデント」をクリックすると字下げできます。

表ブロック（フォーマット）

表ブロックは会社情報や料金表など、表形式のコンテンツ作成に役立ちます。

ツールバーのからは表の行や列の追加・削除ができます。

• --- 上に行を追加
• --- 下に行を追加
• --- 行の削除
• --- 左に列を追加
• --- 右に列を追加
• --- 列の削除

カスタムHTML（フォーマット）

HTMLタグを入力したり、外部サイトからコピーしたHTMLタグをペーストする場合、カスタムHTMLブロックを使います。たとえば、Googleマップを埋め込む際に取得したHTML（<iframe　で始まるコード）をコピーペーストするときに役立ちます。

プレビューするとGoogleマップが表示されます。

段落ブロックに上記のHTMLをコピーペーストしてもうまくいきません。HTMLタグのコピーペーストにはカスタムHTMLブロックを使うようにしましょう。

クラシックブロック（フォーマット）

クラシックブロックでは、昔のWordPress（WordPress 4.x）のエディタを使うことができます。WordPress 5以降のブロックを組み立てる方式ではなく、1つの枠に文書や画像をまとめて入力するスタイルです。

ブロックエディタに対応していないプラグインを使いたい場合にクラシックブロックが役立ちます。たとえば、エディタにオリジナルボタンを追加できるAddQuicktagプラグインなどです。

改ページブロック（レイアウト要素）

改ページブロックは長いページを分割したい場合に役立ちます。

ページが分割され、ナビゲーションが表示されます。

メディアと文章（レイアウト要素）

メディアと文章ブロックは画像と文章を横並びにレイアウトできるブロックです。

レイアウト例はこんな感じです。

画像の配置（上下左右）はツールバーで設定できます。

サイドバーの設定項目から「モバイルでは縦に並べる」を選択すると、幅の狭い端末では横並びが解除されます。

ボタン（レイアウト要素）

ボタンブロックでは「詳しくはこちら」「お問い合わせはこちら」などのボタンを作成できます。ボタンの文字(1)、リンク先URL(2)を入力し、サイドバーで背景色(3)や文字色(4)を設定すれば完成です。

他のブロックと連携してレイアウト構成に役立ちます。

サイドバーの「スタイル」ではボタンのスタイル（塗りつぶしまたはアウトライン強調）を選択できます。

スペーサー（レイアウト要素）

スペーサーブロックは上下のブロックの間に余白(1)を入れることができます。余白のサイズはサイドバーで設定(2)できます。

カラムブロック（レイアウト要素）

カラムブロックは横並びで2列、3列などのレイアウトを作成したいときに役立ちます。

ブロック追加時にレイアウトを選択できますが、「スキップ」で省略しても大丈夫です。その場合、2列が作成されます。

あとはそれぞれの列にブロックを追加してレイアウトすればよいでしょう。

途中で列数を変更したい場合は、サイドバーの「カラム数」で設定できます。

グループブロック（レイアウト要素）

グループブロックを使うと複数ブロックをまとめて管理できます。

サイドバーの「高度な設定」ではブロックにIDやクラス名を付けることができます。HTMLアンカー(1)を設定すればID、追加CSSクラス名(2)ではclassが追加されます。ブロック全体にスタイル設定するときに便利です。

グループブロックはdivタグでグループ全体を囲み、IDやクラス名が付加されます。

区切りブロック（レイアウト要素）

区切りブロックは上下のブロック間に区切り線を差し込みます。表示結果は次のようになります。

サイドバーから色を設定することもできます。

埋め込み（Twitter・YouTube・Instagramなど）

埋め込みセクションでは、Twitter・YouTube・Instagramなどのコンテンツを埋め込むことができます。

以下はYouTubeの動画を埋め込む例です。

「埋め込み」をクリックすると動画が埋め込まれます。

埋め込めるサービスは次のとおりです。

Twitter, YouTube, Facebook, Instagram, WordPress, SoundCloud, Spotify, Flickr, Vimeo, Animoto, Cloudup, CollegeHumor, Crowdsignal, Dailymotion, Hulu, Imgur, Issuu, Kickstarter, Meetup.com, Mixcloud, Reddit, ReverbNation, Screencast, Scribd, Slideshare, SmugMug, Speaker Deck, TED, Tumblr, VideoPress, WordPress.tv, Amazon Kindle

テーマ・プラグインによるブロック

WordPress組み込みのブロックだけでなくテーマやプラグインが独自にサポートしているブロックもあります。いくつか紹介します。

テーマ「Cocoon」の例

ブロックエディタ対応のテーマ「Cocoon」では、投稿や固定ページの編集画面で「ブロックの追加」をクリックするとCocoon固有のブロックメニューが表示されます。独自のボックス（枠囲み）や吹き出しが使用可能になります。

以下はCocoonブロックで作成したアイコンボックスの表示結果です。

また、ブロックツールバーも使用可能なオプションが増え、文字のスタイルやマーカーなどを使うことができます。

詳しくは、以下のページをご覧ください。

Cocoon Blocksの現在の対応状況 | Cocoon

プラグイン「VK All in One Expansion Unit」の例

Lightningと同時インストールが推奨されているVK All in One Expansion Unitプラグインでは、ブロックの追加メニューでVK Blocksセクションが使用可能になります。

以下は質問と回答ブロックの使用例です。

ご利用の流れなどにも使えるフローブロックも便利です。

【参考資料】再利用ブロックの使い方

再利用ブロックという特殊なブロックがあります。これは、もう一度使いたいときに簡単に呼び出せるブロックで、投稿に何度も差し込む定型文などに役立ちます。以下、使い方を説明します。

再利用ブロックの登録

再利用ブロックに登録するブロック（もう一度使いたいブロック）を決めます。ここでは定型文を入力した段落ブロックを別のページでも使うかもという想定データ再利用ブロックに登録することにします。

そのブロックのツールバーにある「詳細設定」から「再利用ブロックに追加」をクリックします。

ブロックに名前を付けて「保存」ボタンをクリックします。

再利用ブロックの呼び出し

登録した再利用ブロックは「ブロックの追加」をクリックして「再利用可能」メニューから呼び出すことができます。

言うまでもありませんがサイト内の別のページから呼び出すこともできます。

再利用ブロックの変更

再利用ブロックの内容を変更したい場合は、「ブロック追加」‐「再利用可能」メニューから「すべての再利用ブロックを管理」をクリックします。

ブロック管理画面が開くので、変更したいブロックを選択します。

ブロックの内容を変更して「更新」ボタンをクリックすると変更完了です。

ここでは単純に文言を変更しただけです。

再利用ブロックの変更は以前に設置したブロックにも反映されるので注意してください。逆に言えば一括で変更されるので便利ともいえます。

ブロック管理メニューを開くには、投稿や固定ページの編集画面の右上のツールメニューから「すべての再利用ブロックを管理」を選択する方法もあります。

再利用ブロックの削除

再利用ブロックを削除するには、上記で開いた再利用ブロック管理画面から「ゴミ箱」をクリックします。

設置済みの再利用ブロックも削除されるので注意してください。その場合、「ブロックは削除されたか、利用できません。」と表示されます。

もちろん、そのページから再利用ブロックを削除すれば問題ありません。また、上記の警告ブロックが残っていてもサイト画面には何も表示されないので大騒ぎする必要はありません。

他のサイトでの利用

再利用ブロックを他のサイトで利用するには「JSON形式でエクスポート」をクリックしてエクスポートします。

再利用ブロックを利用したいサイトの投稿または固定ページの編集画面の右上にあるツールメニューから「すべての再利用ブロックを管理」を選択します。

「JSONからインポート」をクリックします。

事前にエクスポートした再利用ブロックを選択して「インポート」をクリックします。

インポートが完了します。一覧に表示されない場合はブラウザの更新ボタンをクリックしてみてください。

インポートした再利用ブロックは「ブロックの追加」から選択可能になります。