誰でも簡単! WordPressで作るホームページ

【第14回】サブページの編集

「講座案内」ページの編集

  1. [固定ページ一覧]から、「講座案内」を選択します。
  2. [ブロックの追加(+マーク)]をクリックし、「カラム」を選択します。
  3. カラムの左枠をクリックし、カラム数を ‘3’ に変更します。
  4. 最初の列に画像ブロックを追加し、メディアライブラリから画像ファイル(course_word.png / course_excel.png / course_homepage.png)を挿入します。
  5. 画像の下に、それぞれ3つの講座のタイトルと説明文を、ブロックを追加し入力します。タイトルはブロックタイプを「見出し-H3」に設定し、[テキストの配置]は「中央寄せ」を選択します。
  6. [更新]ボタンをクリックし、ページの表示を確認しましょう。

「教室案内」ページの編集

  1. [固定ページ一覧]から、「教室案内」を選択します。
  2. [ブロックの追加(+マーク)]をクリックし、「テーブル」を選択します。
  3. 列数を ‘2’、行数を ‘5’ にして、[生成]ボタンをクリックします。
  4. それぞれのセルに以下のように入力します。
  5. [更新]ボタンをクリックし、ページの表示を確認しましょう。

「お問い合わせ」ページの編集

お問い合わせページには、メールフォームを表示します。
メールフォームの作り方にはいくつかの方法があるのですが、時間的な問題から、この講座では既に作成されたコードを貼り付けるだけにします。

  1. [固定ページ一覧]から、「お問い合わせ」を選択します。
  2. [ブロックの追加(+マーク)]をクリックし、「カスタムHTML」を選択します。
  3. 以下のコードをコピーし、貼り付けます。
    
    <form action="" method="post">
    <table>
    <tbody>
    <tr>
    <th><label for="client-name">お名前</label></th>
    <td><input id="client-name" name="お名前" type="text" /></td>
    </tr>
    <tr>
    <th><label for="client-phone">電話番号(半角)</label></th>
    <td><input id="client-phone" name="電話番号" type="text" /></td>
    </tr>
    <tr>
    <th><label for="client-email">メールアドレス(半角)</label></th>
    <td><input id="client-email" name="メールアドレス" type="text" /></td>
    </tr>
    <tr>
    <th>興味のある講座</th>
    <td><input id="interest-word" name="興味のある講座" type="checkbox" value="word" />
    <label for="interest-word">Word基礎マスター講座</label>
    <input id="interest-excel" name="興味のある講座" type="checkbox" value="excel" />
    <label for="interest-excel">Excel基礎マスター講座</label>
    <input id="interest-homepage" name="興味のある講座" type="checkbox" value="homepage" />
    <label for="interest-homepage">ホームページ作成講座</label></td>
    </tr>
    <tr>
    <th>希望連絡方法</th>
    <td><input id="tel-means" name="希望連絡方法" type="radio" value="電話" />
    <label for="tel-means">電話</label>
    <input id="mail-means" name="希望連絡方法" type="radio" value="メール" />
    <label for="mail-means">メール</label>
    <input id="both-means" checked="checked" name="希望連絡方法" type="radio" value="どちらでも" />
    <label for="both-means">どちらでも</label></td>
    </tr>
    <tr>
    <th><label for="message">お問い合わせ内容</label></th>
    <td><textarea id="message" name="お問い合わせ内容"></textarea></td>
    </tr>
    </tbody>
    </table>
    <br>
    <div><input id="submitform" type="submit" value="送信する" /></div>
    </form>
    
    
  4. [更新]ボタンをクリックし、ページの表示を確認しましょう。

 │