こんにちは。SaitoKouです。新しいWordPressのデフォルトテーマ「Twenty Twenty-Five」、リリースされてからしばらく経ちましたが、気になっていたのでどんなテーマなのかいろいろ触ってみて、例として建設会社の企業サイトを作成してみました！
本記事の構成
複数記事にわたり、Twenty Twenty-Fiveで企業サイトを作成するまでの操作方法を紹介します！
本シリーズをすべて見ていただくことで、公開可能な状態が作れるようにします。また、本シリーズではHTML、CSSなどのプログラミングは一切使用しません！「WordPressでサイトを作りたいけど、高額なテーマは手が出ない…」「無料テーマでも、プロっぽいサイトは作れるの？」とお悩みのかたは良ければ参考にしてください！
完成予定のサイト
- トップページのみの企業サイト → 画像はこちら
- お問い合わせ用のリンク（サイト訪問者がクリックするとメールソフトが開き、設定したメールアドレスがToに設定される。）
本記事の手順実行前に準備するもの
- 「Twenty Twenty-Five」テーマの有効化
- サイトで使用するキーカラー（企業のイメージカラーなり、好きな色なりを一つ決めてください！）
下準備
企業サイトと言えば、印象的なメイン画像やキャッチコピー、事業内容を掲載したトップページだと思いますが、本記事ではトップページを作成するまえの下準備としてWordPressの設定変更などを行います。フロントページから作り始めたい方はコチラ。
下準備リスト
- サイトの基本設定
- 「スタイル」の調整
サイトの基本設定
まず初めに、サイトの基本設定を行いましょう。サイトのタイトルやファビコンの設定です。
■ WordPress管理画面（以下管理画面）サイドバー ＞ 設定 ＞ 一般 をクリックします。
■ 下図で示した箇所を修正します。
■ 修正後、画面下部にある「変更を保存」ボタンで登録します。
スタイルの調整
Twenty Twenty-Fiveでは、「スタイル」という機能でサイト全体の外観を設定することができます。今回はこのスタイル機能で、サイトのフォント種類やサイズ、使用するアクセントカラーなどを先に決めてしまいます。それでは操作していきましょう！
■ 管理画面サイドバー ＞ 外観 ＞ エディター を開きます。
■ 左サイドエリアにある「スタイル」をクリックします。
■ 赤枠で示した箇所をクリックします。
スタイルのバリエーションがいろいろ表示されていますが、残念ながら使いません(笑)。
クリック後、以下のような画面になります。左エリアがサイトのプレビュー、右エリアが設定（以下、スタイル設定エリア）になります。赤枠の部分をもろもろ設定していきます。
フォントのアクティベート
サイトで使用するフォントの種類を決定します。サイト標準のフォントだと日本語フォントと英語フォントのバランスがあんまりよくないので、別のフォントを使用します。
■ スタイル設定エリア ＞ タイポグラフィ をクリックします。
■ 赤枠で囲ったアイコンをクリックします。
■ 「フォントをインストール」タブをクリックします。Googleフォントへの接続確認が表示されるので「アクセスを許可する」ボタンをクリックします。
■ フォント名に「Gothic」と入力します。表示された「Zen Kaku Gothic New」をクリックします。
■ すべてのチェックボックスにチェックを入れ、右下の「インストール」ボタンをクリックします。問題なければ、「フォントは正常にインストールされました。」と表示されます。
■ いったん右上の「保存」ボタンを押しておきます。この「保存」ボタンを押さないと変更した内容が保存されないので注意してください！こまめに保存ボタンを押しておいて損はないです！
フォントサイズプリセット
Webサイトのページは、「見出しは文字のサイズを大きく！」「普通の文章はサイズを小さく！」というように、文字サイズに大小をつけます。このサイズをサイト全体で統一かつ簡単に設定できるように「フォントサイズプリセット」を設定しておきます。デフォルトで設定されていますが英語サイト用なので、日本語でもちょうどいい感じに見えるよう設定変更します。
■ スタイル設定エリア ＞ タイポグラフィ をクリックします。
■ 下図の「フォントサイズプリセット」をクリックします。
■ プリセットには、サイズが5種類設定されています。Smallから設定します。
■ 下図のように設定します。フルードタイポグラフィをONにしておくと、スマホ表示にしたときに自動でイイ感じの文字サイズにしてくれます。
■ ほかのサイズもすべて設定します。僕が設定したサイズは以下です。
| Small | 1 rem |
| Medium | 1.2 rem |
| Large | 1.75 rem |
| Extra Large | 2.5 rem |
| Extra Extra Large | 3 rem |
■ 忘れず「保存」ボタンを押しておきましょう！
使用フォントとサイズの設定
アクティベートしたフォントと、フォントサイズプリセットを使って、サイト内で配置する要素のフォントデザインを決定していきます。
■ スタイル設定エリア ＞ タイポグラフィ をクリックします。
■ 下図の「テキスト」をクリックします。
■ 下図のようにフォントを設定します。フォントは先ほどアクティベートしたものが選択でき、サイズはフォントサイズプリセットで設定した大きさを選択できます。
■ ほかのタイポグラフィ（リンク、見出しなど）も同じ手順で設定していきます。設定値は以下にしました。
| リンク | ・フォントをZen Kaku Gothic New に変更 |
| 見出し | ・フォントをZen Kaku Gothic New に変更 ・外観をボールドに変更 （「すべて」の内容のみ変更。他のH1などは何も変えない） |
| キャプション | ・フォントをZen Kaku Gothic New に変更 ・外観を「ライト」に変更 ・行の高さを「２」に変更 ・文字間隔を0.5に変更 |
| ボタン | ・フォントをZen Kaku Gothic New に変更 ・外観を「ミディアム」に変更 ・文字間隔を0.5に変更 |
これでフォントの設定は完了です。
キーカラーの追加
企業のイメージカラーなどをサイトのアクセントカラーとして使用したいため、カラーを登録します。これに登録しておくと、様々なタイミングですぐに登録した色を呼び出せます。
■ スタイル設定エリア ＞ 色 をクリックします。
■ 下図の「パレット」をクリックします。
■ 下図の「カスタム」の横のプラスボタンをクリックします。
■ 色を選択し、名前を自由につけます。その後、「完了」をクリックします。
これで色の登録が完了です。
まとめ
いったんこれでサイト作成の下準備が終了しました。次からはいよいよサイトのトップページを作り上げていきます！
ちなみに今回使用した「スタイル」機能は、Twenty Twenty-Threeあたりから導入されたもので、サイト全体の見た目を一括で変更することができます。これは今までのWordPressにはなかった機能で、これが意外と便利なので使こなせるようになっていきたいところです！
この記事は第2部に続きますので、引き続きご覧ください！
