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

【第8回】トップページの作成

ここからは、具体的なページデザイン作業になります。

  1. [固定ページ]-[新規追加]から、下記情報に従いトップページを追加します。
     タイトル:ホーム
     URL:home
    ※以降、固定ページを追加した時は[公開]をクリックし、更新した時は[更新]をクリックしてください。
    ※タイトルを入力しても、URLの入力フィールドが表示されない場合は、一旦[公開]ボタンをクリックし、その後に URL を入力して更新します。
    ※「公開してもよいですか?」というメッセージが表示されたら、「公開前チェックを常に表示する。」のチェックを外して、[公開]ボタンをクリックしてください。
  2. [設定]-[表示設定]から、[ホームページの表示]を ‘固定ページ’ にチェックを入れ、[ホームページ]のリストから、 ‘ホーム’ を選択します。
  3. [固定ページ一覧]から、「ホーム」を選択します。
  4. アイキャッチ画像に、メディアライブラリから「main_visual.jpg」を設定します。
  5. [タイトルを停止]にチェックを付けます。
  6. [ブロックの追加(+マーク)]をクリックし、「カラム」を選択します。
  7. カラムの左枠をクリックし、カラム数を ‘3’ に変更します。
  8. 3つのブロックにそれぞれ3つのポイントを入力します。
  9. 入力したブロックタイプを、「見出し-H3」に変更します。[テキストの配置]は、「中央寄せ」を選択します。
  10. それぞれのブロックの下に、画像ブロックを追加し、画像ファイル(benefit-1.jpg / benefit-2.jpg / benefit-3.jpg)をメディアライブラリから挿入します。
  11. 画像ブロックの下に段落ブロックを追加し、それぞれのアピールポイントの説明文を入力します。
    ※文章の入力だけで段落ブロックになります。
  12. [更新]ボタンをクリックします。
  13. 2カラム目の見出しが2行になるので、フォントサイズを小さくします。
    [外観]-[カスタマイズ]から、[書体]-[内容]をクリックし、見出し3のフォントサイズを ’24’ に変更します。
  14. 3カラムの幅をコンテナの横幅ピッタリに収まるようにマージンを調整します。
    マージン調整は標準機能ではできないので、[外観]-[カスタマイズ]から、[追加CSS]に以下のコードを記述します。
    .wp-block-column:last-child {margin-right:0;}
  15. ここまで設定できたら、ブラウザでトップページの表示を確認しましょう。

 │