こんにちは。SaitoKouです。新しいWordPressのデフォルトテーマ「Twenty Twenty-Five」、リリースされてからしばらく経ちましたが、気になっていたのでどんなテーマなのかいろいろ触ってみて、例として建設会社の企業サイトを作成してみました！
本記事の構成
複数記事にわたり、Twenty Twenty-Fiveで企業サイトを作成するまでの操作方法を紹介します！
本シリーズをすべて見ていただくことで、公開可能な状態が作れるようにします。また、本シリーズではHTML、CSSなどのプログラミングは一切使用しません！「WordPressでサイトを作りたいけど、高額なテーマは手が出ない…」「無料テーマでも、プロっぽいサイトは作れるの？」とお悩みのかたは良ければ参考にしてください！
完成予定のサイト
- トップページのみの企業サイト → 画像はこちら
- お問い合わせ用のリンク（サイト訪問者がクリックするとメールソフトが開き、設定したメールアドレスがToに設定される。）
本記事の手順実行前に準備するもの
- 「Twenty Twenty-Five」テーマの有効化
- 本シリーズ①下準備での設定が完了している
- 本シリーズ②トップページ上部の設定が完了している
事業内容エリア作成
サンプル画像にもあるような「3列表示」の事業内容紹介エリアを作成していきます。
こちらも、パターンを使用して作っていきます。
■ 下図の要領でボタンをクリックしていき、パターンを企業理念エリアの下にドラッグします。今回選択するパターンは「サービス」の部類にあります。
■ すると、ドラッグした箇所に配置されるので、配置されたら左サイドバーを閉じます。
■ 配置したコンテンツを修正します。
・タイトルは中央寄せにして文言変更します。
・画像の変更は、画像をクリックし「置換」→すでに登録してある画像から選択するかアップロードします。
・画像下の文字はそれぞれクリックして直接変更します。
・画像に示した順で、背景色を変更していきます。背景色は好きな色を選ぶか、カラーコード（#FFFFFFのような文字列）をクリックすれば候補にない色を選択できます。
■全ての設定が完了したら保存し、表示を確認します！
施工事例エリア作成
続いて、その下の施工事例エリアを作成します。2列表示で、右側は画像になります。
■ すでに配置されていた下図のパターンを編集する形で作成します。
・ ヘッダー文字、テキストはクリックして直接編集します。
・ 下図のように操作し、テキストの下にブロックを追加します。
追加されたブロックを「引用」に変更します。変更した後はテキストを入力します。
文字のサイズが大きすぎる場合は、「引用」ブロックを選択後、文字サイズを調整します。
・ 画像は、先ほどの要領で置換を選択し、画像を選択するかアップロードします。
■ すべて設定出来たら保存し、プレビューで表示を確認します！
お知らせエリア作成
お知らせエリアを作成します。WordPressの本来の使い方であれば、このエリアで投稿した記事を表示したいところですが、今回は外観のみの設定で、投稿記事を表示する設定は割愛します。
■ 下図のように要素を配置すれば、この設定が出来上がります。（そろそろ慣れてきたところだと思いますので、ブロックの細かい設定などは割愛します！）
■ 下図の「グループ」のみ設定を変更し、横幅を小さくします。
お問い合わせエリア作成
最後にお問い合わせエリアになります。ボタンを設置しますが、このボタンをクリックするとメールソフトが開き、指定のメールアドレスへ送信できるような仕掛けにします！
■ 下図のように要素を配置すれば、この設定が出来上がります。
■ 「カバー」に設定した背景写真を暗く表示するには、ブロック ＞ スタイル でオーバーレイに黒色を設定し、オーバーレイの不透明度を60程度にします。
■ リンクを設定するには、ボタンをクリックし、下図の要領で設定します。リンクには「 mailto:[メールアドレス] 」を記載します。
ここまでで、「フロントページ」テンプレートの一通りの設定は完了しました！
今回のサイト作成はここまでになります！もう少しでトップページが完成します！
まとめ
「フロントページ」テンプレートの作成の続きを行っていきました！前回とはまた違ったブロックやパターンを使用し、様々な配置や外観の設定方法がわかっていただければ幸いです！
次回の記事では、サイトの最上部であるヘッダーと、一番下の部分であるフッターの設定を紹介していきます！
コメント