【日本語WordPressテーマ】XWRITE

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

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

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

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

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

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

リスト表示

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

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

カード表示

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

テキスト表示

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

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

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

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

ソリッド

マイルド

シンプル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

＜勉強ブログ＞ ＜ペットブログ＞ ＜美容ブログ＞で使われてる機能もほぼ同じなので、ここでは＜コーポレートサイト＞のみの説明になってます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デモサイトの”構造”（旅行ブログなどのブログサイト）で紹介しているブロックと同じレイアウトについては割愛してます。

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

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

①の『カラム』ブロック内に2個のカラムを作り②のカラム幅は60%に、③のカラム幅は40%に設定。
②のカラムの中身を空のままにすることで③のカラムが右寄せになるレイアウトを採用。

右側のカラムはワードプレス上（PC）と実際の表示（ブラウザ）ではレイアウトの比率が異なってちょっと見づらいですが、ワードプレスではよくあることなので慣れるしかないです。

①のタイムテーブルは『説明リスト（dl）』というブロックを適用。
タイトル（dt）には「Morning,Lunch...」などの項目、説明文（dd）には「9:00-11:00...」などの時間帯が設定されてます。

①画像の並列表示は『ギャラリー』ブロックを使用。
（「カラム」数を2にすれば右端の画像は非表示になります）

画像の周りの白いフチはスタイルで「フォトフレーム」を指定。

このエリアもワードプレス上（PC）と実際の（ブラウザ上の）画像のサイズが異なってるのでちょっとわかりにくいかもです。

①の『カラム』ブロック内には2個の「画像＋テキスト」グループが格納されてます。
左側はシンプルに『画像』ブロック→『段落』ブロックの順、そして右は『段落』ブロック→『画像』ブロックの順で”互い違い感”を演出。

ただしブラウザで確認してみると実際には左の画像がちょっと小さく表示される設計になっています。

どうやってるかというと左の画像②にはA数値（368px）を入れて”固定”幅に。
一方右の画像③はブラウザ幅に合わせて大きさが自由に変わるようC”自動”幅に設定されてます。

またBの「cover」は枠内に画像がうまく収まるよう自動的にサイズ調整する設定で、「contain」は元画像の全部が表示されるという設定です。
そのため「contain」だと元画像の縦横のサイズ比によっては余白が見えてしまう場合があります。

さらに左の画像①の「アスペクト比」はD”元のサイズ”になってますが、右側の画像②の「アスペクト比」はE”標準-4:3”に設定されてます。
（「アスペクト比」とは画像の縦と横の長さの比率）

これは①の画像はそのまま使えるのに対して②の画像は元の画像③が縦長なので強制的に横長で見せるためにアスペクト比を変えてるということです。

画像周りの白いフチはここでは先ほどの”フォトフレーム”ではなく”枠線（縦横とも10px）”で設定されてます。

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

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

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

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

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

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

関連記事や外部リンクを通常のテキストリンクではなくページのタイトルや抜粋文を自動的に引用し、カードのように表示できるのが『ブログカード』ブロック。

内部リンク設定では日時の表示/非表示が選択可。それ以外は共通設定。

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

公開中の記事を一覧表示できる『記事一覧』ブロック。
表示形式は「カード（横）・カード（縦）・リスト・スライダー」の4種類から選択可。

表示する投稿数や表示順、カテゴリーやタグの指定、アイキャッチ画像の比率設定や抜粋の文字数、投稿日・カテゴリーの表示/非表示など細かく設定可。

『見出し』ブロックのデザイン一覧。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

オリジナルの『ボタン』ブロック。アフィリエイト用広告タグも設置可能。
デザインやエフェクトの切り替えなどが調整可。

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

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

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

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

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

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

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

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

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