こんにちは。SaitoKouです。新しいWordPressのデフォルトテーマ「Twenty Twenty-Five」、リリースされてからしばらく経ちましたが、気になっていたのでどんなテーマなのかいろいろ触ってみて、例として建設会社の企業サイトを作成してみました！
本記事の構成
複数記事にわたり、Twenty Twenty-Fiveで企業サイトを作成するまでの操作方法を紹介します！
本シリーズをすべて見ていただくことで、公開可能な状態が作れるようにします。また、本シリーズではHTML、CSSなどのプログラミングは一切使用しません！「WordPressでサイトを作りたいけど、高額なテーマは手が出ない…」「無料テーマでも、プロっぽいサイトは作れるの？」とお悩みのかたは良ければ参考にしてください！
完成予定のサイト
- トップページのみの企業サイト → 画像はこちら
- お問い合わせ用のリンク（サイト訪問者がクリックするとメールソフトが開き、設定したメールアドレスがToに設定される。）
本記事の手順実行前に準備するもの
- 「Twenty Twenty-Five」テーマの有効化
- 本シリーズ①下準備での設定が完了している
トップページ作成
前の記事でスタイルの調整が完了したので、いよいよブロックエディタを使用したトップページ作成に入っていきます。
「テンプレート」の新規作成
トップページとして表示するページを作成するために、「テンプレート」を追加します。
■ WordPress管理画面（以下管理画面）サイドバー ＞ 外観 ＞ エディター をクリックします。
■ エディター画面で「テンプレート」をクリックします。
■ テンプレート一覧表示されるので、右上の「新規テンプレートを追加」をクリックします。
■ ポップアップが表示されたら「フロントページ」を選択します。
■ すると、テンプレートの初期デザインの選択ができるようになります。今回は一番左を選択します。
■ 以下のような画面になったら、右上の保存をクリックします。これでテンプレートの追加が完了です。
「フロントページ」テンプレートは1サイトに1つしか設定できません。サイトのホームURLにアクセスしたときは必ずこのページが表示されるようになります。トップページは、この「フロントページ」テンプレートをデザインして作っていくことになります！
メインビジュアルの作成
トップページのメインビジュアルを作成していきます。サイトに訪れたらかならず目にする重要なエリアですね。
■ WordPress管理画面（以下管理画面）サイドバー ＞ 外観 ＞ エディター をクリックします。
■ エディター画面で「テンプレート」をクリックします。
■ 「フロントページ」テンプレートを開きます。（以降、ここまでの手順を「フロントページ編集画面を開く」と記載します。）正しく開けていれば、上部に「フロントページ・テンプレート」と表示されます。
今回は、「パターン」という機能を使って外観を作っていきたいと思います。
■ 下図の要領でボタンをクリックしていき、パターンを選択します。
■ すると、今ある要素の一番下に配置されるので、配置されたら左サイドバーを閉じます。
■ 左上の3本バーボタンをクリック（＝リストビューの表示） → 「カバー」（追加したパターンの一番上の要素）よりも上にある要素をすべて選択し、右クリック → 削除します。
これで、パターンで追加した要素のみが残ります。
■ メインビジュアル画像の変更：リストビューから「カバー」を選択 → 置換 → アップロード をクリック。メインビジュアルの画像として使用したい画像ファイルを選択します。
■ テキストの変更：テキストを直クリック → テキストを編集します。
■ ボタンの削除：リストビューの表示 → 「ボタン」要素を選択 → 削除します。
■ 修正後、忘れずに「保存」ボタンで登録します。
これでメインビジュアルが完成しました！ サイトを表示ボタンでサイトを確認してみましょう！
編集画面とほぼほぼ同じ状態ですね！
こんな要領で、トップページの他のエリアも作っていくことになります！
企業理念エリアの作成
トップページすぐ下の企業理念エリアを作っていきます！
■ パターンの追加：パターン一覧 → CTA（行動喚起）→ 下図のパターンをメインビジュアルの下にドラッグアンドドロップします。
■ 画像の追加：見出しの下に画像を追加したいので、リストビューから見出しを選択 → 後に追加 を選択します。
■ 増えた段落の右側のプラスボタン → 画像 を選択します。画像をメディアライブラリから選択するか、アップロードします。
■ テキストの編集、ボタンの削除：メインビジュアルと同じ要領で、テキストの編集とボタンの削除を実施します。
■ 保存ボタンを押して、サイトの確認をします。
お手本のデザインと少し違いますが、細かい微調整は最後の仕上げで行います。そろそろブロックエディタにも慣れてきた頃でしょうか？
今回のサイト作成はここまでで、また次の記事で続きを実施していきます！
まとめ
「フロントページ」テンプレートを追加することで、ホームURLにアクセスしたときに表示されるページを設定することができました！ 現在はここに手を加えている状態になります！
今回利用した「パターン」は、Twenty Twenty-Fiveでサイトを作るときにうまく活用できると効率化になりそうですね！いろんなパターンを見て使えそうなものは積極的に使っていきましょう！英語でのパターンが多いので、デザインの調整は必要ですが(笑)
次回はトップページの続きを作っていきます！「カラム」を使った少し複雑なデザインに挑戦します！
