Genva Interior
ドキュメント
Genva Interiorは、クロス・床の張り替えを請け負う内装職人向けのWordPressブロックテーマです。電話が鳴ることを第一に設計し、ヘッダー・トップページ・各ページの末尾・404ページのいずれにも電話番号を置いています。施工事例は投稿で管理し、工事メニュー・料金の目安・当店について・お問い合わせは、パターンを選ぶだけの固定ページとして用意できます。デザインはあらかじめ組んであるので、文字と写真を差し替えれば形になります。
主な特徴
- トップページ用の10セクション（ヒーロー〜お問い合わせ）
- 固定ページ5種類の雛形（クロス張替え、床の張替え、料金の目安、当店について、お問い合わせ）
- 施工事例のセクションは「固定3件」「投稿から自動」の2種類
- 施工事例の本文の見本パターン「投稿：施工事例」
- 店舗情報の一括設定（外観 > 店舗情報）
- スマートフォン用の固定バー（ホーム／電話で相談／無料お見積）
- ダークモード切替ボタン（ヘッダー右端）
- スタイルバリエーション2種類（オーカー／藍）
- 文字サイズの下限を大きめに設定（本文16px、注記14px、ラベル12px）
- 369theme.com経由の自動アップデート対応
動作要件
- WordPress 6.7以上（7.1まで動作確認済み）
- PHP 7.4以上
- ブロックテーマ対応環境（サイトエディター）
テーマタイプ
単体で動く親テーマです。ほかのテーマをインストールする必要はありません（子テーマでもアドオンでもありません）。
プラグイン依存
必須プラグインはありません。すべてコアブロックで構成しています。お問い合わせフォームを動かす場合のみ、お使いのフォームプラグイン（Contact Form 7 など）を利用してください。
インストール
Genva Interiorは単体で動くブロックテーマです。以下の手順でインストールしてください。
テーマのアップロード
WordPress管理画面の「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」を選び、購入時にダウンロードした genva-interior.zip をアップロードします。
有効化
アップロードが完了したら「有効化」をクリックします。この時点でトップページに10セクションが並び、見本の文と仮画像が入った状態になります。固定ページはまだ1つもありません（初期設定の手順04で作ります）。
編集の入口
トップページの編集は「外観」→「エディター」→「テンプレート」→「フロントページ」から行います。ヘッダーとフッターは「外観」→「エディター」→「パターン」→「テンプレートパーツ」にあります（画面の下のほうにあり、スクロールしないと出てきません）。
初期設定
公開前に、次の順番で設定してください。手順06まで終えると、サイトの骨組みが完成します。
店舗情報を入力する（必須）
「外観」→「店舗情報」で、電話番号・受付時間・郵便番号・住所を入力します。ヘッダー、フッター、トップページ、404ページの表示がこの内容に変わります。空欄のままにすると、見本（048-000-0000 など）がそのまま表示されます。
固定ページの中の電話番号は、ここでは変わりません。固定ページは作成時に内容がページ側へコピーされる仕組みなので、そのページの編集画面で直してください。
屋号とロゴを設定する
- 屋号：「設定」→「一般」→「サイトのタイトル」
- 屋号の上に出る一言（例：埼玉・下請けなし）：同じ画面の「キャッチフレーズ」
- ロゴ：「外観」→「エディター」→「パターン」→「テンプレートパーツ」→「ヘッダー」
パーマリンクを設定する
「設定」→「パーマリンク」で「投稿名」を選んで保存します。「基本」のままだと、ページのアドレスが ?page_id=12 のような形になり、次の手順で決めるスラッグが使われません。
固定ページを7つ作る
「固定ページ」→「新規追加」で、下の表のとおりに作成します。新規作成の直後に出るパターン選択の画面から選ぶだけです。
| ページ名 | スラッグ | 選ぶパターン |
|---|---|---|
| ホーム | home | 選ばない（空のまま公開） |
| 施工事例 | work | 選ばない（空のまま公開） |
| クロス張替え | cross | 固定ページ：クロス張替え |
| 床の張替え | floor | 固定ページ：床の張替え |
| 料金の目安 | price | 固定ページ：料金の目安 |
| 当店について | about | 固定ページ：当店について |
| お問い合わせ | contact | 固定ページ：お問い合わせ |
ページ名を日本語のまま公開すると、アドレスが %e3%82%af... のような読めない文字列になります。右サイドバーの「URL」から、表のスラッグを入れてから公開してください。あとから変えるとリンク切れの原因になります。
トップページと施工事例の表示を決める
「設定」→「表示設定」を開き、「ホームページの表示」で「固定ページ」を選びます。
- ホームページ → ホーム
- 投稿ページ → 施工事例
この設定をしないと、トップページが投稿の一覧を兼ねてしまい、施工事例に独立したアドレスが生まれません。
リンク先を指定する（16本）
固定ページはお店ごとに名前が変わるため、テーマ側では行き先を決められません。同梱の状態では16本のリンクが仮のリンク（#）になっています。「外観」→「エディター」→「パターン」→「テンプレートパーツ」から、ヘッダーとフッターを開いて、作成したページにつないでください。
ヘッダー（7本）
- メニュー：施工事例／クロス張替え／床の張替え／料金の目安／当店について／お問い合わせ
- ボタン「無料相談・お見積り」→ お問い合わせ
フッター（9本）
- 左の列：クロス張替え／床の張替え／料金の目安／施工事例
- 右の列：当店について／「無料お見積り・ご相談」→ お問い合わせ／「よくあるご質問」→ お問い合わせページの
#faq - 最下部：プライバシーポリシー
- 下部のバー「無料お見積」→ お問い合わせ
テーマを切り替えた直後は、メニューに前のテーマで使っていたページが並んでいることがあります。WordPressが、サイトにある固定ページをすべて並べたメニューを自動で作るためです。不要な項目は削除してください。「ホーム」もメニューには要りません（屋号とロゴがトップページへのリンクになります）。
お問い合わせフォームを入れる
お問い合わせページの破線の枠の中に、お使いのフォームプラグインのブロックを置いてください。設置後、枠の中の案内文は削除して構いません。フォームを使わない場合は、枠ごと削除し、フッターの「プライバシーポリシー」のリンクも外してください。
写真と代替テキストを差し替える
仮画像を選び、ツールバーの「置換」から実際の写真に差し替えます。同梱の画像には「住宅の居間で、真新しいクロスをヘラで撫でつけている内装職人」のように、入れるべき写真の説明が代替テキスト（alt）として入っています。目の見えない方が読み上げで聞く文章なので、実際の写真の内容に合わせて書き換えてください。
固定ページのパターン
固定ページを新規作成すると、カテゴリー「固定ページ」のパターンが選べます。選んだ内容は本文にコピーされるので、ふつうのブロックとして自由に編集できます。
クロス張替え cross
「壁が黄ばんできた」など、よくある相談と工事の中身、下地処理、料金の目安の表。
床の張替え floor
扱っている床材（クッションフロア、フロアタイル など）の特徴と、料金の目安。
料金の目安 price
工事・内容・目安の3列の料金表。行を足したり消したりして使います。
当店について about
屋号・代表者・所在地・電話などを並べた会社概要。
お問い合わせ contact
電話でのご相談の案内、「3つのお約束」、フォームを置く破線の枠、よくあるご質問（#faq）。フォームの送信処理はプラグインの役割です。
パターン選択の画面を閉じてしまったとき
左上の「＋」から「パターン」を開き、「固定ページ」の中から選んでください。
施工事例の運用
増え続けるのは施工事例だけなので、施工事例は「投稿」で書きます。一覧は、初期設定の手順05で投稿ページに指定した「施工事例」ページです。
本文の見本「投稿：施工事例」
新規投稿で選ぶと、施工前・施工後の写真と、場所・費用の目安・工期の表、説明文が本文に入ります。
抜粋は必ず書く
トップページと一覧に出る説明文は抜粋です。空欄だと本文の先頭（写真と表）から自動で作られ、「場所 費用の目安 工期 …」という文になります。抜粋の欄は、一度下書き保存すると右側に出てきます。
トップページの施工事例は2種類
フロントページのテンプレートで、施工事例の区画ごと入れ替えられます。入れ替え用のパターンは、「＋」の「セクション」に入っています。
| パターン | 並べ方 | 表示される内容 |
|---|---|---|
| 施工事例（固定3件） | 見せたい3件を手で選ぶ | 写真の前後と費用の表 |
| 施工事例（投稿から自動） | 新しい投稿3件が自動で並ぶ | アイキャッチと抜粋 |
テンプレート一覧
WordPressのテンプレート階層に沿って、自動で使い分けられます。選ぶ操作は要りません。
front-page フロントページ
10セクションのトップページ。表示設定でホームページに指定したページに使われます。
home 施工事例の一覧
表示設定で投稿ページに指定した「施工事例」ページ。
single 施工事例の個別ページ
投稿1件ずつのページ。
page 固定ページ
クロス張替え・料金の目安など、固定ページ全般。
archive アーカイブ
カテゴリー・タグ・日付別の一覧。
search 検索結果
サイト内検索の結果。
404 ページが見つからない
存在しないアドレスを開いたときのページ。ここにも電話番号を置いています。
index 予備
ほかのどれにも当てはまらないときに使われる、最後の受け皿です。
パターン一覧
ブロックを追加する「＋」→「パターン」から挿入できるものと、テーマの内部で使うものがあります。
トップページのセクション
- ヒーロー
- 直接頼める4つの安心
- 施工事例
- うかがう職人
- 料金の目安
- 選ばれている理由
- 施工の流れ
- 対応エリア
- お客様の声
- まずはお電話ください
番号はトップページに並んでいる順番です。フロントページのテンプレートに最初から入っています。
挿入できるパターン
- セクション：施工事例（固定3件）／施工事例（投稿から自動）
- 固定ページ：クロス張替え／床の張替え／料金の目安／当店について／お問い合わせ
- 投稿：施工事例
テーマの内部で使うもの
ヘッダー・フッター・スマートフォン用の固定バー・投稿一覧・投稿一覧の見出し・施工事例の本文・検索フォーム・コメント・404 は、テンプレートの中で使われます。
テンプレートを保存したら、テーマの更新が反映されなくなります
テンプレートを一度でも保存すると、そのページはテーマのファイルを見なくなります。保存した内容がデータベースに残り、そちらが使われるためです。元に戻したいときは、同じ画面で「カスタマイズをクリア」を選んでください。ただし、そのテンプレートに加えた変更はすべて消えます。
デザイン設定
スタイルバリエーション
「外観」→「エディター」→「スタイル」から「オーカー」または「藍」を選べます。どちらも、明るい配色と暗い配色の両方が用意されています。
オーカー
#131B2E
#904D00
#C2410C
#FE932C
藍
#1E2529
#1F4B8E
#1A5FB4
#5E93DE
配色の組み合わせは、文字と背景のコントラスト比が 4.5:1 以上になるよう確認して決めてあります。個別の色を変更すると、読みにくくなる場合があります。
タイポグラフィ
- 日本語：Noto Sans JP（latin サブセットを同梱、400 / 600 / 700）。日本語の字形は閲覧者の端末にある游ゴシック、ヒラギノ角ゴ、Noto Sans CJK などで表示されます
- 数字・英字：Inter（テーマに同梱、400 / 600）
外部サービスへの接続
フォントはテーマに同梱しているため、Google Fontsなどの外部のフォント配信サービスには接続しません。アイコンも外部のアイコンフォントは使わず、テーマ内の SVG で描いています。
ダークモード
ヘッダー右端のボタンで切り替えます。パソコンやスマートフォンの設定には追従しません。訪問者が選んだ状態はその方のブラウザに保存され、次回も同じ状態で表示されます。
アクセシビリティ機能
大きめの文字
本文16px・注記14px・ラベル12pxを下限にしています。
コントラスト比 4.5:1 以上
明るい配色・暗い配色の両方で、すべての組み合わせを測って決めています。
キーボードとスクリーンリーダー
キーボードで移動したときは、フォーカスの位置に枠が出ます。ダークモードのボタンは、いまの状態を読み上げソフトに伝えます。
写真の説明文
同梱の画像には、入れるべき写真の説明が代替テキストとして入っています。差し替えるときの手本になります。
自動アップデート
Genva Interiorは369theme.comのアップデートサーバーと連携しており、WordPress管理画面から最新版にアップデートできます。
アップデートの確認方法
更新の確認は最大1時間キャッシュされます。「外観」→「テーマ」の画面に表示される「今すぐ更新を確認」から、すぐに確認し直せます。新しいバージョンがあるときは、通知が表示されます。
アップデート時の注意
- テーマのファイルを直接編集している場合、アップデートで上書きされます
- サイトエディターで編集した内容はデータベースに保存されるため、テーマの更新では消えません
- 一度保存したテンプレートには、テーマ側の変更が反映されません（上の「パターン一覧」の注意を参照）
- アップデートの前に、サイトのバックアップを取ることをおすすめします
よくある質問
フォームは付いていますか？
付いていません。メールの送信はプラグインの担当で、テーマに含めるとプラグインを変えた日にフォームが動かなくなります。お問い合わせページには、フォームを置く枠だけを用意しています。
フォームを使わない場合は？
お問い合わせページの枠ごと削除してください。あわせて、フッターの「プライバシーポリシー」のリンクも外してください。個人情報を受け取らないのであれば、そのページは必要ありません。フォームとプライバシーポリシーは一組です。
固定ページの電話番号が「店舗情報」で変わりません
固定ページの中の文字は、そのページの編集画面で直してください。店舗情報の設定が反映されるのは、ヘッダー・フッター・トップページ・404ページです。固定ページは作成時に内容がページ側へコピーされる仕組みなので、そのまま普通に編集できます。
サイトエディターの画面では、古い電話番号が表示されます
実際のサイトには、設定した番号が表示されます。編集画面の表示と一致させるにはテーマ専用のブロックが必要で、そうするとテーマを変えたときにページへ壊れたブロックが残ります。そのため、この形にしています。
施工事例の抜粋は書いたほうがいいですか？
必ず書いてください。トップページの施工事例（投稿から自動）と、施工事例の一覧に出る説明文が抜粋の内容です。空欄のままだと、本文の先頭の写真と表から自動で作られてしまいます。
デモサイトの写真は付いてきますか？
付いていません。デモサイトとスクリーンショットの写真は、AIで生成したイメージです。テーマに同梱しているのは、差し替え用の SVG の仮画像4点のみです。
サポートを受けるには？
購入者専用のサポートフォームからお問い合わせください。下の「サポート・リソース」にリンクがあります。
Genvaシリーズ
電話が鳴ることを第一に設計した、職人さん向けのテーマシリーズです。
Genva Interior
クロス・床の張り替えの職人向け。
Genva Carpenter
施主から直接仕事を受ける、個人・少人数の大工向け。「いつから着手できるか」をトップページの一番上に置き、施工事例は投稿するだけで並びます。