エディター

WordPressのブロックエディターでサイト全体を編集

独自のビルダーもショートコードも使いません。Canvasは、ヘッダー、ヒーロー、ページタイトル、コンテンツ、フッターを編集キャンバスに配置し、実際のデザインに必要な設定を、コアブロックを含むすべてのブロックに追加します。

更新日:

テンプレートロックによる編集

ページは、公開時の見た目どおりに開きます

Canvasは、ブロックエディターがテンプレート全体を描画するように設定します。ヘッダーやヒーロー、ページタイトルバンド、コンテンツ、フッターまですべてがキャンバス上に表示され、フロントエンドを描画するのと同じコードで描かれます。

WordPressブロックエディターで、ヘッダー、ヒーロー、フッターがキャンバス内にレンダリングされたCanvasページを表示している画面

編集した内容が、そのまま訪問者に届きます

多くのテーマは、エディターには白い箱だけを渡し、デザインはフロントエンドに任せています。Canvasはコンテンツの周囲にテンプレートを描画するため、ページの横ではなく、ページの中で直接編集できます。

  • エディターとフロントエンドに共通の1つのレンダラー
  • テンプレートは表示されますが、ページから直接編集することはできないため、サイトの共通パーツを誤って壊してしまう心配はありません。
  • このページに割り当てられた Hero、Slider、ページタイトルは、公開前の時点で既に用意されています
  • 幅と余白は実際のテンプレートから取得されるため、全幅のセクションは全幅で表示されます
共通パーツが組み込まれる仕組み
サイトエディター

WordPressが管理しているテンプレートとスタイル

Canvasは、WordPressのブロックテンプレートをベースに構築されています。テンプレートはブロックテンプレート、パーツはテンプレートパーツであり、色とタイポグラフィはtheme.jsonから読み込まれます。そのため、サイトの設定が当社独自の設定パネルの中に隠されることはありません。

173件のテンプレートと4種類のスタイルバリエーション

投稿、ポートフォリオ作品、イベント、商品、デモに含まれるすべてのコンテンツタイプ向けのシングルレイアウトと、ランディング、スプラッシュ、フラッシュ、フルブリードのページ向けのページレイアウトを用意しています。

  • 173件のブロックテンプレート(サイトエディターで編集可能)
  • ヘッダー、フッター、ページタイトル、サイドバー用のテンプレートパーツ5個
  • 4種類のスタイルバリエーション、ダークやミッドナイトを含む
  • theme.json のカラーとタイポグラフィは1か所で設定され、エディターとフロントエンドの両方に反映されます
ダークモードとカラースキーム
Canvasブロックテンプレートを表示しているWordPressサイトエディター
ブロック設定

訪問者に表示されるものはすべて、設定で変更できます。

テキストとリンク、画像とアイコン、色、サイズ、動作。ブロックが表示するものはすべて、サイドバーのコントロールで変更できます。コードエディターを使う必要はありません。

エディターでCanvasブロックを選択し、サイドバーで設定パネルを開いた状態

一度設定すれば、どこでも再利用できます

2つの仕組みが繰り返しの作業を省いてくれますが、解決する問題はそれぞれ異なります。

  • 既定値として保存します。ブロックを好みの状態に設定し、そのブロックタイプの既定値として保存できます。次に挿入するブロックは、その既定値から始まります。アンカーや追加のCSSクラスなど、ブロックの識別に関わる設定は、コピーされません。
  • グローバルブロックスタイル。設定のまとまりをプリセットとして名前を付け、サイト全体のブロックに適用できます。プリセットを一度変更すれば、それを使用しているすべてのブロックに反映されます。
ブロックライブラリを見る
詳細オプション

コアブロックを含め、すべてのブロックで同じ4種類のコントロール

Canvasは、サイトに登録されているすべてのブロックタイプに、自身のブロックだけでなく高度な設定パネルを1つ追加します。コアの段落ブロックにも、Canvasブロックと同じアニメーション、CSS、属性、表示の設定項目が追加されます。

アニメーション

入場アニメーションは速度と遅延を個別に設定でき、退場アニメーションにも独自の遅延を設定できます。表示されないまま、読み込まれない JavaScript を待つ要素はありません。

カスタムCSS

このブロック専用のCSSを書けます。CanvasはそのCSSをこのブロックだけに適用し、WordPressがインラインスタイルに使うのと同じフィルターで処理します。

カスタム属性

アナリティクスのフックやテスト用の識別子、属性を必要とするサードパーティ製スクリプトのために、ブロックのルート要素に独自の属性を追加できます。

表示条件

ユーザーロールやデバイスに応じてブロックを表示・非表示にできるため、会員限定パネルやスマートフォン専用の通話ボタンにプラグインは不要です。

カスタムクラスとHTMLアンカーは、おなじみのWordPressのフィールドにそのまま残っています。そのため、ここで学ぶ内容はCanvas独自のものではありません。これらは通常のブロック属性なので、パターンやスクリプトからも同じように設定できます。

パターン

183件のパターンをカテゴリー別に分類

パターンは通常のブロックとして挿入されるので、並べ替え、書き換え、削除を自由に行えます。セクションの出発点であり、回避しなければならないロックされたレイアウトではありません。

  • 40ヘッダー
  • 24コンテンツ
  • 22フォーム
  • 16 フッター
  • 14ブログ
  • 13Hero
  • 12ギャラリー
  • 12コールトゥアクション
  • 9料金
  • 9ページ
  • 8機能
  • 5イベント
  • 4ポップアップ
  • 3ソーシャル
  • 2お客様の声
  • 2ポートフォリオ
  • 1件のFAQ

パターンは複数のカテゴリーに分類できます。ヘッダーとフッターのパターンはヘッダービルダーのページで解説しており、すべてのパターンはブロックライブラリにあるブロックで構成されています。

標準のマークアップ

コンテンツはブロックマークアップのまま

Canvasが提供できる最大の強みは、コンテンツのどの部分も独自仕様ではないことです。Canvasのブロックは、WordPressのブロックと同じ形式で保存されます。

  • Canvasのブロックはすべて、本格的な設定パネルを備えた登録済みブロックタイプで、ショートコードではありません。
  • 属性は通常のブロック属性のため、パターン、REST API、コマンドラインからも設定できます。
  • ブロックはテーマではなくCanvasプラグインに含まれているため、テーマを変更してもページが失われることはありません。
  • コアブロックも引き続き動作し、同じ高度な設定パネルが利用できるようになります。
他製品との比較
ブロック挿入ツール

WordPressのインサーターで使える209個のブロック

Canvasのブロックはコアブロックと並んで提供され、独自の10種類のカテゴリーにまとめられています。さらに105個のブロックはデモ固有のもので、必要とするデモと一緒に表示されます。

名前でブロックを検索

  • 名前やキーワードで検索できるほか、Canvasのカテゴリーも含まれます。
  • 同じ「パターン」タブにある183個のパターン
  • 314個のブロックのうち228個が無料枠で、残りはすべてのプランに含まれます。
  • ページには、含まれているブロックのCSSとJavaScriptだけが読み込まれます。
それが速度にとって重要な理由
Canvasのブロックカテゴリーが開いているWordPressのブロックインサーター
同じエディター

ここでできる操作がさらに3つ

ヘッダー、デモ、コピーは別々のアプリケーションではありません。いずれも、このページで説明しているエディターで、同じキャンバスと同じサイドバーを使って開きます。

ブロックエディターで開いているヘッダーレコードです。ヘッダー行にはロゴとナビゲーションが配置され、サイドバーにはCanvas Header Containerの設定が表示されています。

ヘッダーを作成

ヘッダーは、ヘッダーブロックで構成されたレコードです。キャンバス上で編集し、レイアウトモードとクラスはサイドバーで設定します。

ヘッダービルダー
WordPress管理画面のCanvasデモインポート画面。カテゴリ、ページ数、パッケージサイズ、インポートボタンを備えたカード形式でデモサイトを表示しています

デモをインポート

すべてのデモには、ページ数、サイズ、カテゴリが表示され、ワンクリックでインポートでき、同じ方法でロールバックできます。

デモライブラリ
ブロックエディターの上に「AIでテキストを生成」ダイアログが開いている画面。プロンプト欄、長さの設定、「キャンセル」と「生成」ボタンがあります。

コピーを書く

CanvasAI Engineは、選択した入力欄に書き込みます。一度設定したサイトプロフィールを使い、作業の進行に合わせてクレジットの使用状況を表示します。

Canvas AI
よくある質問

編集について

そのほかの回答は、FAQの全文とドキュメントにあります。

ページビルダープラグインは必要ですか?

Canvasにページビルダープラグインは必要ありません。Canvasは、コンパニオンプラグインを備えたWordPressテーマです。そのため、すべてのブロック、ヘッダー、フッター、ヒーロー、ページタイトルは、ブロックエディターとWordPressに標準搭載のサイトエディターで編集します。覚えるべき別のエディターも、暗記すべきショートコードも、テーマと一緒に更新すべきビルダーのライセンスもありません。

テーマを切り替えると、ページが崩れますか?

コンテンツは、ショートコードではなく標準のブロックマークアップとして保存されるため、コアブロックはどのテーマでも表示され続けます。CanvasブロックはテーマではなくCanvasプラグインから提供されるため、テーマを変更しても投稿やページからCanvasブロックが削除されることはありません。

サイトエディターで、テンプレートを引き続き編集できますか?

はい、Canvasには173個のブロックテンプレート、5個のテンプレートパーツ、4種類のスタイルバリエーションが含まれ、すべてWordPressが管理するサイトエディターで編集できます。カラーとタイポグラフィはtheme.jsonから読み込まれるため、スタイルパネルでの変更はすべてのページに反映されます。

コアブロックの詳細オプションとは何ですか?

Canvasでは、コアブロックにアニメーション、カスタムCSS、カスタム属性、表示条件を追加できます。サイトに登録されているすべてのブロックタイプ(他のプラグインのブロックを含む)に同じパネルを追加するため、コアブロックと必要な設定を持つブロックのどちらかを選ぶ必要はありません。

ライセンスの期限が切れると、何が使えなくなりますか?

Canvasのライセンスの有効期限が切れても、フロントエンドの動作は止まりません。サイトは現在と同じように表示され続け、プレミアムブロックも引き続き使えます。停止するのはサービスです。アップデート、デモのインポート、CanvasAI Engineによる生成、プレミアムブロックの編集は、更新するまで利用できなくなります。ライセンスの確認が当社サーバーに接続できない場合は、14日間の猶予期間があります。

Canvasで次のウェブサイトを構築しましょう

初心者でも、フリーランサーでも、エージェンシーでも、同じブロックとデモを利用できます。まずは1つのサイトから始めて、同じライセンスで必要な数だけサイトを構築できます。