WordPressのGutenbergでトップページを作る手順

WordPressのGutenbergでトップページを作る手順

2020年4月8日
WordPress

WordPressの新しいエディタGutenbergは、以前のエディタと比べて直感的に画像を挿入したり、レイアウトを組んだりできるようになりました。

Gutenbergを使うことによって、HTMLやCSSの知識が無い方でも会社概要などのページを簡単に作ることができます。

今回は制作難易度が一番高いトップページをGutenbergで作ってみようと思います。初期テーマの「Twenty Twenty」を使っていますが、他のテーマにも応用できます。

トップページの完成イメージはこちら

それではGutenbergでトップページを作る手順を解説していきます。

【手順1】固定ページを作成する

まずはトップページ用の固定ページを作成します。
サイドメニューから「固定ページ」を選び「新規追加」をクリックします。

固定ページを新規追加

ページタイトルに「トップページ」と入力して「公開」をクリックします。

トップページを公開する

【手順2】ホームページに固定ページを設定する

サイドメニューの「表示設定」をクリックします。
ホームページの表示の「固定ページ」にチェックを入れ、「ホームページ」という項目で先ほど作成した「トップページ」を選びます。
設定が完了したら「変更を保存」をクリックします。

ホームページに固定ページを設定する

この設定によって、トップページに固定ページの内容が表示されるようになります。

【手順3】メインイメージを作成する

「固定ページ一覧」から「トップページ」をクリックして編集画面に移動します。

トップページを編集する

エディターの「+」アイコンをクリックすると、ホバーでブロック一覧が表示されます。ブロック一覧の中から「画像」をクリックします。

画像を挿入する

「アップロード」をクリックし、使いたい画像を選択して挿入します。

画像をアップロードする

挿入した画像をクリックすると上部にツールバーが表示されます。
ツールバーの左端の「ブロックタイプまたはスタイルを変更」をクリックすると、ホバーメニューが表示されるので「カバー」をクリックします。

カバー画像に変換

ツールバーの左から2番目の「配置を変更」をクリックし、ホバーメニューの「全幅」を選択します。「全幅」を選択することで、ブラウザの左端から右端までいっぱいに広がった画像になります。

カバー画像を全幅に変更

画像を「カバー」に変更したことによって、画像が背景になり、画像上にテキストを入力できるようになります。任意のタイトルやキャッチフレーズなどを入力します。

右サイドバーの「テキスト設定」でフォントサイズを指定することもできます。

カバー画像のテキストを入力する

入力した文字は中央寄せにした方がきれいです。
ツールバーの「テキストの配置を変更」で「テキスト中央寄せ」を選択します。

テキストを中央寄せにする

以上でトップページのメインイメージが完成です。
次はコンセプトエリアを作っていきます。

【手順4】コンセプトを作成する

「+」アイコンをクリックして「見出し」を追加します。

見出しを追加する

「Concept」と入力して中央寄せにします。

見出しを中央寄せにする

見出しの下にテキストを入力して中央寄せにします。

テキストを入力して中央寄せにする

以上でコンセプトは完成です。
次はサービス紹介エリアを作っていきます。

【手順5】サービス紹介を作成する

サービス紹介は、3つのサービスを横並びにレイアウトします。
要素を横並びにするため、レイアウト要素の「カラム」ブロックを追加します。

レイアウト要素のカラムを追加する

パターンの中から「3カラム」を選択します。
ちなみにこの「カラム」はレスポンシブ 対応しており、表示領域がスマートフォンサイズになると1カラムになります。

3カラムを選択する

サービス紹介は大きく表示したいので、カラムの配置を「全幅」に変更します。

カラムを全幅に変更する

グレーのボックスが3つ横並びに追加されます。グレーのボックス内の「+」アイコンをクリックして画像を追加します。

左端のカラムに画像を追加する

画像の下にサービスの説明文を追加して中央寄せにします。

サービス説明を入力する

サービス説明文の下にボタンを追加します。

ボタンを追加する

ボタン内のテキストを「サービス詳細」に変更します。
「リンク」アイコンをクリックし、ボタンのリンク先を設定します。

ボタンにリンクを追加する

ボタンも中央寄せにしておきます。

ボタンを中央寄せにする

以上の作業を残りの2カラムでも行えばサービス紹介は完成です。
次はお知らせ一覧を作っていきます。

【手順5】お知らせ一覧を作成する

まずはお知らせ一覧の見出しを追加します。

お知らせ一覧の見出しを追加する

「News」と入力し、見出しを「H3」に変更します。

見出しをH3に変更する

見出しを中央寄せにします。

H3見出しを中央寄せにする

見出しの下にウィジェットの「最新の記事」ブロックを追加します。

最新の記事ブロックを追加する

最新の記事ブロックを「幅広」に変更します。

最新の記事を幅広に変更する

右サイドバーで記事一覧の表示方法を変更します。
「投稿コンテンツ」、「投稿日を表示」、「アイキャッチ画像を表示」を有効にし、アイキャッチ画像の位置を「左寄せ」に設定します。

記事一覧の表示を変更する

以上でお知らせ一覧は完成です。

これでトップページの全てのコンテンツが完成しました。

WordPressのGutenbergでトップページを作る手順のまとめ

長くなりましたが、以上がGutenbergでトップページを作成する手順です。
作成したコンテンツは、メインイメージ、コンセプト、サービス紹介、お知らせ一覧です。
今回はトップページの作成としていますが、会社概要などの他のページでも応用できます。

「既存ページに少しコンテンツを追加したい」
「新しいサービスや商品の紹介ページを新規に作りたい」

など、ホームページには更新がつきものです。
本来であればWeb制作会社に依頼したり、Web担当者を雇ったりする必要があります。
しかし、Gutenbergを使えばHTMLやCSSの知識が無くても、簡単な更新や簡単なページ作成くらいならできると思います。

Gutenbergには、今回紹介したブロック以外にも色々なブロックが存在します。
各ブロックを上手に組み合わせることで、いろいろなレイアウトを組むことができます。

ぜひGutenbergを使ってページ作成にチャレンジしてみてください。