ブロックパターンを利用する

パターンライブラリからお好みのパターンの「このパターンをコピーする」ボタンをクリックし、コピーします。

WordPressの管理画面より「固定ページ」>「固定ページ追加」を選択します。

固定ページにパターンを貼り付け、画像や文章を編集してページを公開しましょう。

ブロックパターンを利用する固定ページの設定を以下に変更します。

• テンプレートを「記事タイトル出力なし」に変更
• サイドバーを「非表示」に変更
• パンくずリストを「表示しない」に変更

WordPress管理画面 > 「表示設定」より、ホームページ設定にて固定ページを指定します。

指定した固定ページがトップページに表示されます。

お好みに応じてトップページで透過ヘッダーを使用する場合の設定を変更できます。
（法律事務所デモサイトでは透過ヘッダーを使用しています。）

設定を保存すると、サイトのトップページに透過ヘッダーが反映されます。

サイトのフォント設定をお好みに応じて変更します。
（法律事務所デモサイトでは「Noto Serif JP」を使用しています。）

設定を保存すると、サイトに新しいフォントが反映されます。

「カスタマイザー＞トップページ＞メインビジュアル」の設定を変更します。
まずはサイトの第一印象を整えます。PC・スマホそれぞれの画面サイズに合わせて、画像が一番きれいに見え、かつ操作もしやすいサイズに指定します。

• 表示形式： 「スライダー画像」を選択
• 詳細オプション： 「全幅で表示する」にチェック
• メインビジュアルの高さ： 「数値を指定する」を選択
  • PC： 65vh
  • モバイル： 50vh

写真素材本来の色味や明るさを活かすため、フィルターなどの装飾はかけずにクリアな状態にします。

• フィルターの種類： 「表示しない」を選択
• フィルターの不透明度： 5（初期値のまま）
• オーバーレイカラー： 設定しない
• オーバーレイの不透明度： 5（初期値のまま）
• スクロールの種類： 「表示しない」を選択

ゆったりとした切り替えにすることで、落ち着いた印象を与えます。

• 切り替えのアニメーション： スライド
• 表示中のアニメーション： なし
• スライドの表示時間： 7000
  • ポイント：長めの7秒に設定し、写真をじっくり見せます。
• アニメーションの速度： 600

メインビジュアル内に表示するコンテンツの配置や配色を指定します。
設定したい枚数に応じて各スライダーを設定してください。
（ここではデモサイトに合わせた色指定を行います）

• 画像（PC/モバイル）： 任意の画像をアップロード
  • モバイルはPCと同じ画像を使うため未選択でOK
• タイトル・本文： 任意の文章を入力
• テキスト色： #FFFFFF（白）
• ボタン：
  • ラベル： 「詳しくはこちら」など任意の文字を入力
  • URL： 任意の遷移先を入力
  • ボタンの色： #3adbb7（教育メディアデモサイトのキーカラー）
• テキストの配置： 「左」を選択

指定した設定でトップページにメインビジュアルが表示されます。

メインビジュアルやウィジェットエリアを組み合わせて利用することでトップページのレイアウトを変更することができます。
（教育メディアデモサイトでは「トップページメインビジュアル下部」「サイドバー」を使用しています。）

教育メディアデモサイトのメインビジュアルの設定は以下の通りです。
設定変更後保存します。

• 表示形式： 「画像」を選択
• 詳細オプション： 「全幅で表示する」にチェック
• メインビジュアルの高さ： 「数値を指定する」を選択
  • PC： 65vh
  • モバイル： 50vh
• フィルターの種類：「斜線」を選択
• フィルターの不透明度：1
• オーバーレイカラー： 設定しない
• オーバーレイの不透明度： １
• スクロールの種類： 「表示しない」を選択

ウィジェットエリア「トップページメインビジュアル下部」に以下のブロックを配置して保存します。
（教育メディアデモサイトのブロックパターンをコピーするとこちらと同じ作りのブロック群をコピーできます。）

ウィジェットエリア「サイドバー」に以下のブロックを配置して保存します。
サイドバーでは従来のウィジェット「[XWRITE]プロフィール」と「検索」ブロック、「最新の投稿」ブロックを使用しています。

サイドバーの横に表示する部分を調整し保存します。
（教育メディアデモサイトのブロックパターンをコピーするとこちらと同じ作りのブロック群をコピーできます。）