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

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

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

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

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

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

• WordPressバージョン：WordPress 5.3
• テーマ：Lightning 7.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. プラグインの有効化
   インストールが完了したら必須プラグインのインストール画面に戻ります。

   

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

   

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

    

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

テスト表示用の投稿「Hello world!」などの不要な投稿は「投稿」‐「投稿一覧」メニューでタイトルにマウスオーバーして「ゴミ箱」をクリックすれば削除できます。

カテゴリーの作成

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の例です。

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

1. 「普通のページ」を作成する「固定ページ」メニュー
   WordPressで作成する「普通のページ」は「固定ページ」とよばれます。ダッシュボードに戻って「固定ページ」‐「新規追加」メニューを開いて普通のページを作成しましょう。

   

2. 固定ページのタイトル・本文の入力
   固定ページ作成画面の使い方は基本的に投稿と同じです。固定ページとして作成したいページのタイトル（例：会社概要）(1)を入力し、本文(2)を組み立てます。

   

   固定ページのタイトル候補をリストアップしておきます。
   ・会社概要・所在地・ごあいさつ・会社の歴史
   ・商品紹介・商品1・商品2
   ・サービス紹介・サービス1・サービス2
   ・料金表・お問い合わせ・よくある質問・プライバシーポリシー
3. 表（テーブル）ブロックの追加
   投稿作成の説明では通常の文章（段落ブロック）や画像ブロックを追加する方法を紹介したので、ここでは会社概要などで役立つ表ブロックを追加してみます。それには、（ブロックの追加）をクリックして、「フォーマット」から「表」を選択します。

   

   続いて開く設定画面で表の列数と行数を選択(1)し、「表を作成」(2)をクリックします。列数や行数は後で変更できるので、適当でも構いません。

   

   空の表が追加されるのでデータを入力しましょう。会社情報や料金表など表形式で見せたいときに活用できます。

   

   表の列や行を追加したり削除するには表の上にあるメニューをクリックします。

   

   表ブロックの使い方について詳しくは以下のページも参考にしてください。
   テーブル（表）を作る方法

4. ページのURL（パーマリンク）の変更
   現状では固定ページのURLは「http://example.net/会社概要」のように日本語が混じった状態になってしまうので、「http://example.net/company」のようにアルファベットに変更しておくと便利です。それには、いったん「下書きとして保存」をクリックしてページを保存します。

   

   タイトルの枠をクリックするとパーマリンク（このページのURL）が表示されます。このURLを変更するため「編集」をクリックします。

   

   任意の英数字（ここでは「company」）を入力(1)して「保存」ボタン(2)をクリックします。これにより、パーマリンク（ページのURL）が「http://example.net/company/」のようになります。

   

5. 固定ページの公開
   完了後、画面右上の「公開する」ボタン（および「公開」ボタン）をクリックして固定ページを公開しましょう。

   

6. 固定ページの表示
   「固定ページを表示」をクリックして固定ページを表示してみましょう。

   

7. 表示された固定ページ
   作成した固定ページが表示されます。

   

   「なぜ表に枠線が付かないのか」「なぜタイトルがセンタリングされてしまうのか」などデザインについて今は気にしない方がよいでしょう。時間が経てばわかってくるので、今はコンテンツ制作に集中しましょう。

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

作成した固定ページやカテゴリーはメニューに整理してナビゲーションを構成することができます。ここまで完了すれば、ホームページらしい雰囲気が出てきます。

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

1. テスト用の固定ページの準備
   メニューの雰囲気がわかるように、ダッシュボードに戻って「固定ページ」‐「新規追加」メニューから固定ページを何ページか準備しておきましょう。テスト用なので本文は空で構いません。タイトルを入力し、パーマリンクを英数字に変更するだけで大丈夫です。

   

   作成した固定ページは「固定ページ」‐「固定ページ一覧」メニューで確認できます。
   固定ページのタイトル候補をリストアップしておきます。
   ・会社概要・所在地・ごあいさつ・会社の歴史
   ・商品紹介・商品1・商品2
   ・サービス紹介・サービス1・サービス2
   ・料金表・お問い合わせ・よくある質問・プライバシーポリシー

   「サンプルページ」など不要なページを削除したい場合は、ページタイトルにマウスオーバーして「ゴミ箱」をクリックします。

   

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

   

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

   

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

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

   

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

   

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

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

   

5. 表示順の変更
   追加された固定ページはマウスで上下に移動して表示順を変更することができます。最も上の項目がメニューの左端に表示されます。

   

6. ドロップダウンの設定
   親子関係（ドロップダウン）にしたいメニューは、少し右にドラッグしてドロップします。この例では、「会社概要」にカーソルを合わせると「アクセス」が表示されるドロップダウンメニューになります。

   

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

   

   ドロップダウンメニューの典型的の活用例は、サービス紹介にマウスオーバーすると具体的な商品やサービスが表示されるメニューです。

   

   この場合、「サービス紹介」ページだけではなく、具体的なサービスのページ（例：Excel講座、Access講座、サービスA、サービスBなど）を作成（公開）してから作業する必要があります。

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

   

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

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

   

   メニューを表示できる場所（メニューの位置）はテーマによって異なります。Lightningではヘッダーとフッターに表示可能ですが、フッターメニューのないテーマもあります。
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. 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. トップページに新着情報を表示
   「外観」-「ウィジェット」メニューを開いて、新着情報を表示するウィジェットをトップページに設置します。それには、「LTGコンテンツエリア投稿ウィジェット」を「トップページコンテンツエリア上部」にドラッグアンドドロップします。

   

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

   

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

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

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

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

   

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

   

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

   

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

   

   地図が表示されます。

   

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

   

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

   

   「<iframe…」のHTMLコードをコピーします。

   

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

   

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

   

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

   

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

   

   「VKプロフィール」がない場合、推奨プラグイン（VK All in One Expansion Unit）がインストールされていないことが考えられます。「3 デザインの切り替え」まで戻ってインストールしてみてください。

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

   

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

   

デザインの設定

ヘッダーロゴ画像

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

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

スライドショー

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

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

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

トップページPRブロック

「外観」-「カスタマイズ」-「LightningトップページPR Block」メニューではトップページに3つの横並びブロックを設置できます。サービスページへの誘導など、使い方はアイデア次第です。タイトル、説明文を入力、必要に応じてリンク先を設定するだけで使え、アイコンは変更できます。

アイコンを変更するには、「Icon List」をクリックしてアイコンのサイトを開きます。

開いたアイコンのサイト（Font Awesome）から、使いたいアイコンをクリックします。

画面上部からアイコンのHTMLをコピーします。

WordPressのダッシュボードに戻り、既存のアイコンのコード（例：fas fa-check）を上記のHTMLに置き換えます。

「class="？？？"」の「？？？」の部分のみを残して他の文字を削除します。

アイコンが切り替わります。

「公開」ボタンをクリックすると設定完了です。

アイコンの代わりに画像を使いたいとか、3つだけでなく3列×2で6つにしたい場合は「外観」-「ウィジェット」メニューで使える「VK 3PRエリア」が便利です。

Lightning Pro（有料版）の活用

ここまで説明してきたテーマ「Lightning」は無料版ですが、有料版の「Lightning Pro」もあります。

Lightning Proではサイト制作に便利なモバイル固定メニューや投稿のグリッド表示、フッターコピーライトの編集機能などがサポートされており、より柔軟なデザイン設定が可能になります。

たとえば、スマホサイトのフッターに固定されるメニューも簡単に設置できるようになっています。

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

Lightning Proの強力な便利機能

また、Lightning Proの拡張デザインスキン「Lightning Fort」を使うと、ヘッダー右上に電話番号を表示することができます。

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

ヘッダーに電話番号やお問い合わせボタンを表示できるLightning Fort

機能の拡張（プラグインの使い方）

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」の「編集」をクリックします。

    

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

    

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

まとめ

お疲れ様でした！これでホームページ作成の説明は終了です。まだまだ紹介したい機能は山ほどありますが、2万文字を超えているのでキリの良いこのあたりで作業をいったん終わりにします。

さらに学習を深めたい方は、「いちばんやさしいWordPressの教本 第4版 5.x対応」をおすすめします。

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

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

• 予約システムやショッピングカートを追加したい
• デザインを修正したい（文字サイズ・色・背景画像など）
• 表・箇条書き・バナー広告を入れたい
• 「スタッフブログ」などのオリジナルメニューを追加したい

これらのカスタマイズを含めてWordPress個別サポートで対応しております。気軽にご利用ください。

WordPressによるホームページ作成講座も開講しております。先に受講してから復習としてこの記事を読んでいただくのも良いと思います。自由に講座をご活用ください。