# X-T9 でフルサイト編集を体験してみよう 2
###### tags: `X-T9`

## フルサイト編集の基礎知識（後日でも可）

### フルサイト編集とは

* 新しくいブロックテーマ X-T9 について解説していきます。
* ブロックテーマとはなんぞや？
* 5.9でβ版として実装されたフルサイト編集機能が実装された
* 本文だけじゃなくヘッダーやフッターなど全部が編集できる。
* これに対応したテーマです。

## 0. インストール（勉強会ではやらない）

* テーマ : X-T9
* プラグイン : VK All in One Expansion Unit
* プラグイン : VK Blocks
* プラグイン : VK Blocks Patterns

## 子テーマの適用

* 先に適用しておかないと、テンプレートの編集が引き継がれないので面倒

## 1. ヘッダーの設定

### ヘッダーのパターンを変更してみよう

テーマによっていろいろなバリエーションのパターンが用意されるようになる

* 外観 > エディター からでも 外観 > エディター > ヘッダー からでも出来る
* 間違って必要なパーツを消したりして混乱しないように左メニューからHeaderを開いた上で必要の応じてパターンを変更します。
* ヘッダーをブロックリストから削除
* パターンカテゴリ → ヘッダー → 参照
* 特定のクラスが付与してある

### ヘッダー要素の編集

#### サイトロゴの登録

* サイトロゴを登録してみる
* サイトアイコンの登録

#### お問い合わせボタンの追加

* お問い合わせボタンを追加してみる
* 色を変更してみる

#### スクロール時の固定ヘッダー

#### キーカラーなど色の変更

## コンテンツの作成

* お知らせ
* サービス案内
* サービスの流れ
* よくある質問
* 会社案内
* お問い合わせ
* プライバシーポリシー
* サイトマップ

## ナビゲーションの調整

* 設定 > 表示設定 を指定
* ヘッダーのナビゲーションを変更
* ナビゲーション（親を選択してないと入力できない）

---

## フッターの設定

* 明るい色を選択
* フッダーのパターンを入れ替える
* フッターのナビゲーションを作る

## トップページの調整

* ヒーローエリア画像編集
* ヒーローエリアボタンを増やす
* 有料版ユーザーならスライダーに変更とか

## 投稿トップテンプレートの編集

* ページヘッダー部分のテキストを変更する

## 投稿テンプレートの編集

★ テンプレートの増やし方

* カテゴリーを追加してみる
* 投稿者を追加してみる

## CTA テンプレートパーツの作成

* CTAの作成
* 各テンプレートへの配置

## 固定ページの２カラムテンプレートを作る

* 先祖階層からのページリストブロック配置

## パンくずリストの配置（Pro版のみ）

------

## 少し高度なカスタマイズ

### サイドバーの幅を変更する

* theme.json を子ページに複製して編集

---

## フルサイト編集を理解する

### テンプレートパーツとパターンの違い

#### パターン
* レイアウトの見本

#### テンプレートパーツ
* 使用中のサイトで実際に利用するパーツ

例）
* 通常のヘッダー
* LP用（ナビゲーションがないなど）のヘッダー
* トップページ用の透過ヘッダー

==============================================================

# X-T9 でフルサイト編集を体験してみよう 2
ファイルでのカスタマイズ

# ブロックテーマの構造をみてみよう

## PHPファイルではなくhtmlファイルで構成されている

* phpのテンプレートファイルはありません
* template と parts ディレクトリがある
* この中にhtml保存される
* single.htmlを変更してみる

## theme.json を見てみよう

色々な設定が書いてあります

* font-size を変更してみる
* 幅を変更してみる

## テーマファイルから改変してみる

* front-page.html を改変しても変更されない
* さっき編集したから
* テンプレート一覧を確認する 改変マークがついてる

制作だとファイルで管理しておきたい

* エクスポートする
* 親テーマに上書き → 改変する
* 確認する → 変わってない → リセットする → 反映される

ある程度一気に作業してから１日の作業の終わりにファイルエクスポートしてコミットとか？

## 子テーマで編集した内容をファイルで管理する

子テーマが使えます

* 有効化します
* front-page 改変
* エクスポートしたファイルを配置する
* 反映されない → リセットする → 反映される

### theme.json の上書き

theme.jsonも変更したい値だけ書けばマージされる

* カラーパレットを上書きしてみる

---

# さいごに

まだまだ実際に運用するサイトとして使ってみようとすると困る場面も多いと思いますが、フルサイト編集でどんな感じになるのかのイメージが伝われば幸いです。

是非やってみてください。