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

連載講座:WordPressで作る簡単Webサイト

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

  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. ここまで設定できたら、ブラウザでトップページの表示を確認しましょう。

«次の連載記事»
«前の連載記事»

スポンサーリンク

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ