Xwrite【日本語ワードプレステーマ】

ワードプレス標準搭載のブロックやXwriteの独自ブロックを組み合わせることでおしゃれなトップページも作れます。

その一例としてXwriteではコーポレートサイトや店舗サイト用のデモサイトも公開中。
（デモサイトは「デモサイトのブロックパターン」内にでご覧になれます）

またデモサイト用のパターンも公開しており、自サイトにコピー＆ペーストすることでデモサイトと同じレイアウトで再現させることもできます。

Xwriteを使えばブログサイトだけでなくさまざまなタイプのサイトも作成可能。
その一例がデモサイトとして公開されてます。
（クリックすると当該サイトが別タブで開きます）

Xwriteを使えばブログサイトだけでなくさまざまなタイプのサイトも作成可能。
その一例がデモサイトとして公開されてます。
（タップすると当該サイトが別タブで開きます）

さらにXwriteが用意している各デモサイトのブロックパターンをコピー＆ペーストするだけでデモサイトと同じレイアウトでの再現が可能になります。

パターンは随時追加されており、本日の時点で23パターンが登録されてます。

これを利用すればたとえば「コーポレートサイト」や「カフェサイト」といった通常のトップページでは表現が難しいレイアウトも簡単に作れちゃいます。
またそのレイアウトのブロック構造を検証することで「こういうふうにやればできるんだ」といったテクニックも覚えられます。

それぞれのデモサイトの中身の構造を解析してみたので、気になる方は『デモサイトの”構造”』をご覧ください。

• デモサイトの”構造”（旅行ブログなどのブログサイト）
• デモサイトの”構造”（コーポレートサイト）
• デモサイトの”構造”（カフェサイト）

複数のテキスト装飾を１つにまとめてオリジナルのテキスト装飾を作れるのが『カスタム書式』。

たとえば選択したテキストに「マーカー」「テキスト色」「太字」を適用してみます。

ツールバーのXwriteメニュー内の「カスタム書式登録・編集」を選択→任意の名称と好きなアイコンで”登録”します。

するとツールバーに登録したアイコンが表示され、設定した複数の書式を１クリックで適用できるようになります。

Xwrite設定の『カスタム書式』内にある”登録済みの名称”を非表示にするとツールバーからアイコンが非表示になります。
その代わりに「Xwriteメニュー」内からカスタム書式を選択できるようになります。

よく使うコンテンツなどを登録しておきサイト内で繰り返し使い回しできる機能が『共通パーツ』。

作成した『共通パーツ』は『共通パーツ』ブロックかショートコードのいずれかで呼び出し可能。

また『共通パーツ』は編集画面上で呼び出し・変更が可能で、同じ『共通パーツ』を使ってる箇所は一括で修正内容が反映される仕様。

さらに『共通パーツ』を作成すると自動的に「非同期パターン」としても登録されるため、非同期パターンからの呼び出しも可能。

なおパターンから呼び出した『共通パーツ』はその場でその箇所のみの変更を加えることも可。
（一括修正にはならず）

「計測機能」を有効にすると共通パーツの”表示回数”が計測可能。
共通パーツ内にリンクが設置されてれば「クリック数」と「クリック率」も計測可。

背景には静止画像（複数ならスライダー形式）・mp4動画が設置可。

ファーストビューでもあるヘッダー画像を表示する場合は、表示幅（全幅/コンテンツ幅）/フィルター/オーバーレイ効果/タイトルテキスト/リンクボタンなどの調整が可能。

下のサンプルは背景に単一画像、コンテンツ幅、フィルタ－（網目）、テキスト表示、高さ（自動）の例。

こちらは背景に単一画像、全幅、オーバーレイ（黒）、テキスト表示、高さ（画面のサイズに合わせる）、リンクボタン表示の例。

（複数画像で）スライド画像の場合はスライド表示時間や切り替わるアニメーションの速さなどの調整も可。

ブログサイトとして利用するなら何もしなくてもトップページには記事一覧が表示されます。
表示形式も複数タイプが用意。

リスト表示

ブログでよく見るオーソドックスなレイアウト。
表示するラベルも複数選択可。

PCとモバイルで別々の表示レイアウトも可。

カード表示

カード形式のレイアウトでカラム数は2～4カラムから選択可。
こちらも表示するラベルが複数選択可。PCとモバイルで別々の表示レイアウトも可。

テキスト表示

一番シンプルなレイアウトで文字通り”テキストのみ”のリスト表示。

固定ページをトップページに設定する場合は自由な表現が可能になります。（中・上級者向け）
デモサイトの「コーポレートサイト」なんかがそういった使い方ですね。

『スキン』を変更することで全体の雰囲気を1クリックで簡単に”着せ替え”可能。
（クリックで拡大します）

『スキン』を変更することで全体の雰囲気を1クリックで簡単に”着せ替え”可能。
（タップで拡大します）

ソリッド

マイルド

シンプル

固定ページや投稿記事内に目次を設定可能。
表示レベルや表示位置などももちろん調整可。

収益化のための「PR」などの広告ラベル表記、『ボタン』に”アフィリエイトリンクのタグ”を挿入するといった広告設定も簡単。

ヘッダー上部にメッセージやURLなどを表示できるのが通知エリア機能。
ボタンや背景パターンなどのカスタマイズも可能。

デモサイトではどんなブロックがどのように使われているのか、一部ですがご紹介します。
なおここで紹介している画像はサイト内に”ブロックパターンをペースト”した状態のものです。

コピー＆ペースト直後はデモサイトで使われてるテキストや画像がそのままペーストされるので、実際にはオリジナルのテキストや画像に変える必要があります。

表示されてる画面内のブロック要素①だけに効果が及ぶ『セクション』ブロックが適用。

表示エリアの背景には背景画像を設定。

• A：「全幅」を指定することでブラウザの横幅いっぱいに画面が広がる。
• B：高さに「100vh」を指定することでブラウザの高さいっぱいまで背景画像が広がる。
• C：ここで背景画像を指定。

ほかにもオーバーレイや余白などの設定項目もあります。

①は親ブロックとして『縦積み』ブロックを適用し、そのブロック内に『見出し』ブロックと『記事一覧』ブロックが縦に並ぶレイアウト。
『カラム』ブロックと違って『縦積み』ブロックはブロック全体の水平方向の配置指定などが可能。

『記事一覧』内はすでに何記事か公開してる場合は実際の記事一覧での表示に変わります。

『記事一覧』①では「スライダー」表示を指定。
記事数や自動スライドなども個別指定可。

3つのブロックを囲むように①『カラム』ブロックが設定されており、カラム数は「3」。

各カラムは『グループ』ブロック（A）で囲われ、その中にB『画像』、C『段落』、D『テーブル』、E『ボタン』ブロックで構成されてる。

①も『カラム』ブロック使用で「2カラム」指定。（左：画像＋右：段落）
すぐ下の『記事一覧』ブロックではレイアウトスタイルに「カード（縦）」を適用。

先の『カラム』ブロック右側の（複数の）『段落』ブロックはまとめてグループ化①され、『グループ』ブロック全体に余白（パディング）を設定。

こちらはXwriteの『ボックスメニュー』というブロックを使った表示。

デモサイトではどんなブロックがどのように使われているのか、一部ですがご紹介します。
なおここで紹介している画像はサイト内に”ブロックパターンをペースト”した状態のものです。

コピー＆ペースト直後はデモサイトで使われてるテキストや画像がそのままペーストされるので、実際にはオリジナルのテキストや画像に変える必要があります。

①は3カラムに設定した『カラム』ブロック。
個々のカラム②の上端にある棒線（ボーダー）は、「枠線」の上端だけに「5px」と指定することで表示。

全体①を『カラム』ブロックを使って2分割。
左の”Services”カラム②には幅30%を、右側③には幅70%を設定することで独特のレイアウトを表現。
また「モバイルでは縦に並べる」にチェックを入れることでスマホでは縦1列表示に。

コンテンツの装飾に便利なのが『ボックス』ブロック。

商品の説明や評価をする際に便利なのが『商品レビュー』ブロック。
評価の数値や表示形式、画像の大きさ/比率、構造化データ（json-ld）の設定など細かい調整項目が用意。

会話形式の記事を作成できる『ふき出し』ブロック。
ふき出しの配置・形状・並び・アイコン/画像・カラーなど細かく設定可。

クリックするとコンテンツが開閉する『アコーディオン』ブロック。
レイアウトスタイルやアイコン設定、枠や影の設定などが用意。

Q&A形式のコンテンツを簡単に作成できる『FAQ』ブロック。
ブロックのデザイン、アイコン設定、構造化データ（json-ld）の出力などの調整項目が用意。

複数の装飾を適用した「プリセット」を登録しておくと、次回からは1発適用が可能。

作業手順等を紹介するのに便利な『ステップ』ブロック。
こちらも細かい設定が用意。

（本来は）”用語”と”その用語の説明”の組み合わせで1セットとなるブロックが『説明リスト』。
（HTMLでは＜dl＞タグを使った定義リストのこと）

会社概要や店舗情報、メニューリストなどで使用されることが多い。
デザインの変更、高さやテキストの配置、縦/横並びなど細かい調整が可能。

アイコン付きのボックス型メニューを作成できるのが『ボックスメニュー』ブロック。
デザインやメニューの列数、余白、アイコン設定など細かな設定が可能。

複数のコンテンツをタブ分けして表示したい時に使える『タブ』ブロック。
デザインやメニュー幅の変更や横スクロールの有効/無効などの調整が可。

ブラウザ画面幅いっぱいにコンテンツを配置したい時に使える『セクション』ブロック。
表示幅や高さの変更、背景色、画像や動画の表示、フィルターやオーバーレイ、さらには境界線の変更など細かい調整も可能。

コンテンツを表示するページを制限できるのが『制限』ブロック。

通常はサイドバーなどのウィジェットに挿入されたコンテンツは全ページ共通での表示になります。
しかしながら『制限』ブロックを使えば指定したページだけに表示することが可能になります。

「制限ブロックの設定を確認」をクリックすると設定した項目を一覧で確認可能。

ブロックに適用した独自の複数の装飾などの設定をまとめて保存しておける機能が「プリセット」機能。
保存したプリセットはいつでも１クリックで適用可能。

たとえば『ふき出し』ブロックを使う際、スタイルや画像などを毎回毎回その都度設定していくのはとても面倒です。
そんなときに設定済みのプリセットがあれば複数の設定を1クリックで適用できるのでとても楽です。

サンプルをご用意してみました。

ふき出しに画像やスタイルなどを設定した状態で「プリセット」欄に任意の名称で”保存”します。
すると下にその名称のプリセットが出現します。

次からは『ふき出し』ブロックを挿入後に先ほどのプリセット「吹き出し1」をクリックすると1発で登録済みのレイアウトスタイルが反映されます。
あとはテキストを記入していくだけ。