# WordPressブロックエディター向けの314個のブロック URL: https://canvaswp.com/ja/blocks/ Updated: 2026-11-05 ブロック 本物のブロックに本物の設定パネルが付いており、WordPressのインサーターから挿入できます。ショートコードも独自のキャンバスも、覚える別のエディターもありません。訪問者に見えるものはすべて、サイドバーのコントロールで編集できます。 更新日：2026年11月5日 314 ブロックの総数 228 無料プランでは 209 インサーター内 105 デモ単位 10 カテゴリ ライブラリ ## 今すぐ挿入できるブロック209種類 ファミリーで絞り込むか、名前、キーワード、ブロックの機能で検索できます。プレミアムブロックには印が付いており、すべてのプランにそれらすべてが含まれます。 WordPress 標準のインサーターに、コアブロックの下に Canvas のファミリーが表示されます。ショートコードは使用せず、別のエディターも開きません。 名前、説明、キーワードでブロックを検索 209件をすべて表示 ### 投稿 31件のブロックは、ブロックインサーターの「投稿」の下に表示されます。 #### Academic Works 無料 学術系デザインに沿って表示されるポートフォリオ項目：書籍の一覧、ジャーナル論文のカード、そして各ページの詳細情報。 #### Agency Works 無料 ポートフォリオのプロジェクトを、エージェンシー風のカルーセルまたはグリッドで表示したり、単一のプロジェクトページ（属性、問い合わせCTA、関連プロジェクト）を表示したりできます。 [ライブで確認：Agency Works（ポートフォリオ、新しいタブで開きます）](https://demos.canvaswp.com/agency/works/) #### Blog Archive Loop 無料 メインクエリ（インデックス、カテゴリー、タグ、作成者、日付）のブログループです。テーマの blog-entry パーツとページネーションを使用します。 [ライブで確認：Blog Archive Loop（ホーム、新しいタブで開きます）](https://demos.canvaswp.com/classic/) [ドキュメントに記載のBlog Archive Loopブロック の設定](https://docs.canvaswp.com/block-blog-archive) #### Blog Loop 無料 組み合わせ可能なブログ記事のループです。投稿ごとのカードは、Post Image/Title/Meta/Excerptブロックで組み立てます。コンテナー、ページネーション、タイムラインの装飾部分はレイアウトによって決まります。 [ライブで確認：Blog Loop（ブログ | グリッド、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-grid/) [ドキュメントに記載のBlog Loopブロック の設定](https://docs.canvaswp.com/block-blog-loop) #### Blog Single Post 無料 単一のブログ投稿レイアウト（タイトル、メタ情報、画像、コンテンツ、タグ、シェア、ナビゲーション、投稿者、コメント、関連記事、サイドバー）。single.html用です。 [ドキュメントに記載のBlog Single Postブロック の設定](https://docs.canvaswp.com/block-blog-single) #### Construction Projects 無料 Projects 投稿タイプのプロジェクトをポートフォリオグリッド（2〜5列）として表示するか、単一のプロジェクトページ（属性、お問い合わせCTA、関連プロジェクト）を描画します。 [ライブで確認：Construction Projects（プロジェクト | 5カラム、新しいタブで開きます）](https://demos.canvaswp.com/construction/projects-5/) #### Illustrator Works 無料 ポートフォリオの項目を、色付きの枠を持つ正方形カードのフィルター可能なグリッドで表示したり、個別のプロジェクトページの各パーツとして表示したりできます。 [ライブで確認：Illustrator Works（ホーム、新しいタブで開きます）](https://demos.canvaswp.com/illustrator/) #### Interior Projects 無料 Projects投稿タイプのスタジオ制作事例を、絞り込み可能なポートフォリオグリッドとして表示します。または、単一の制作事例ページ（詳細サイドバー、相談CTA、関連プロジェクト）を表示します。 [ライブで確認：Interior Projects（Stonecroft、新しいタブで開きます）](https://demos.canvaswp.com/interior-design/portfolio/stonecroft/) #### Law Firm Cases 無料 Portfolio投稿タイプの事例をカードとして表示したり、単一の事例ページ（属性、お問い合わせCTA、関連事例）を表示したりできます。 [ライブで確認：Law Firm Cases（最近の事例、新しいタブで開きます）](https://demos.canvaswp.com/law-firm/recent-cases/) #### Photo Shots 無料 Shots投稿タイプの写真を展開式のプレビューグリッドで表示したり、単一のショットページ（フレーム、撮影情報、問い合わせCTA、関連ショット）を表示したりします。 [ライブで確認：Photo Shots（探索、新しいタブで開きます）](https://demos.canvaswp.com/photography/explore/) #### Post Archive Index 無料 日付とタイトルを表示するすべてのレコードを、必要に応じて年と月でグループ化します。「公開したものすべて」のインデックスです。 [ドキュメントに記載のPost Archive Indexブロック の設定](https://docs.canvaswp.com/block-post-archive-index) #### Post Author 無料 アバター、表示名、経歴の説明を含む、現在の投稿者プロフィールカードを表示します。 [ライブで確認：Post Author（スロー・ウェブ：最高の読書体験がなぜ静かになりつつあるのか、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) [ドキュメントに記載のPost Authorブロック の設定](https://docs.canvaswp.com/block-post-author) #### Post Comments 無料 コメント一覧と送信フォームを含む、WordPress のコメントテンプレートを表示します。 [ライブで確認：Post Comments（スロー・ウェブ：最高の読書体験がなぜ静かになりつつあるのか、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) [ドキュメントに記載のPost Commentsブロック の設定](https://docs.canvaswp.com/block-post-comments) #### Post Content 無料 現在の投稿の全文を表示します。ショートコードや埋め込みを含め、すべてのコンテンツフィルターを適用します。 [ライブで確認：Post Content（プレビュー画像付きの標準投稿、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2021/02/10/blog-single/) [ドキュメントに記載のPost Contentブロック の設定](https://docs.canvaswp.com/block-post-content) #### Post Date 無料 投稿の公開日だけを単独で表示します。メタリストでは表示できない、バイライン向けの公開日です。 [ライブで確認：Post Date（スロー・ウェブ：最高の読書体験がなぜ静かになりつつあるのか、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) [ドキュメントに記載のPost Dateブロック の設定](https://docs.canvaswp.com/block-post-date) #### Post Excerpt 無料 設定可能な長さで、単語の区切りで切り詰めた現在の投稿の抜粋を表示します。 [ライブで確認：Post Excerpt（ブログ | グリッド、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-grid/) [ドキュメントに記載のPost Excerptブロック の設定](https://docs.canvaswp.com/block-post-excerpt) #### Post Image 無料 現在の投稿のアイキャッチ画像を、サイズを指定して表示します。パーマリンクへのリンクを付けることもできます。 [ライブで確認：Post Image（ブログ | ミックスフィード、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-mixed-feed/) [ドキュメントに記載のPost Imageブロック の設定](https://docs.canvaswp.com/block-post-image) #### Post Media 無料 現在の投稿の冒頭にあるメディアボックスです。投稿形式に応じて、アイキャッチ画像、動画または音声の埋め込み、ギャラリースライダー、サムネイルグリッド、引用、リンク、またはステータスカードが表示されます。 [ライブで確認：Post Media（ブログ | タイムライン・左サイドバー、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-timeline-left-sidebar/) [ドキュメントに記載のPost Mediaブロック の設定](https://docs.canvaswp.com/block-post-media) #### Post Meta 無料 日付、投稿者、カテゴリー、コメント数など、設定可能な投稿メタ情報を表示します。 [ライブで確認：Post Meta（ブログ | ミックスフィード、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-mixed-feed/) [ドキュメントに記載のPost Metaブロック の設定](https://docs.canvaswp.com/block-post-meta) #### Post Navigation 無料 現在の投稿の前後の投稿へのナビゲーションリンクを表示します。 [ライブで確認：Post Navigation（スロー・ウェブ：最高の読書体験がなぜ静かになりつつあるのか、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) [ドキュメントに記載のPost Navigationブロック の設定](https://docs.canvaswp.com/block-post-navigation) #### Post Read More 無料 現在の投稿のパーマリンクへ向かう「続きを読む」リンクまたはボタンを表示します。 [ライブで確認：Post Read More（ホーム、新しいタブで開きます）](https://demos.canvaswp.com/speaker/) [ドキュメントに記載のPost Read Moreブロック の設定](https://docs.canvaswp.com/block-post-read-more) #### Post Reading Bar 無料 現在の投稿について、読了時間、文字サイズ、印刷、シェアとスクロールのコントロールを表示します。 [ライブで確認：Post Reading Bar（プレビュー画像付きの標準投稿、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2021/02/10/blog-single/) [ドキュメントに記載のPost Reading Barブロック の設定](https://docs.canvaswp.com/block-post-reading-bar) #### Post Reading Time 無料 記録の本文から計算した、読了までの推定時間です。 [ライブで確認：Post Reading Time（スロー・ウェブ：最高の読書体験がなぜ静かになりつつあるのか、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) [ドキュメントに記載のPost Reading Timeブロック の設定](https://docs.canvaswp.com/block-post-reading-time) #### Post Related 無料 現在の投稿と同じカテゴリの関連投稿を、グリッド形式で表示します。 [ライブで確認：Post Related（スロー・ウェブ：最高の読書体験がなぜ静かになりつつあるのか、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) [ドキュメントに記載のPost Relatedブロック の設定](https://docs.canvaswp.com/block-post-related) #### Post Share 無料 現在の投稿のソーシャル共有リンクを表示します。共有先のネットワーク、スタイル、サイズを設定できます。 [ライブで確認：Post Share（Event Single、新しいタブで開きます）](https://demos.canvaswp.com/classic/event-single/) [ドキュメントに記載のPost Shareブロック の設定](https://docs.canvaswp.com/block-post-share) #### Post Terms 無料 現在の投稿のタクソノミーの項目（カテゴリーまたはタグ）を、テキスト、バッジ、ピル、タグクラウド、インラインカテゴリーのいずれかのスタイルで表示します。 [ライブで確認：Post Terms（ブログ | ミックスフィード、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-mixed-feed/) [ドキュメントに記載のPost Termsブロック の設定](https://docs.canvaswp.com/block-post-terms) #### Post Title 無料 現在の投稿タイトルを、任意の見出しタグ内に表示します。オプションでパーマリンクへのリンクを付けることもできます。 [ライブで確認：Post Title（ブログ | ミックスフィード、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-mixed-feed/) [ドキュメントに記載のPost Titleブロック の設定](https://docs.canvaswp.com/block-post-title) #### Post Table of Contents 無料 投稿内の見出しの目次です。機能するアンカーリンクと、読者の位置に合わせて移動するマーカーが付きます。 [ライブで確認：Post Table of Contents（リブランディングを経ても使えるデザイントークンの実践ガイド、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2026/03/05/design-tokens-that-survive-a-rebrand/) [ドキュメントに記載のPost Table of Contentsブロック の設定](https://docs.canvaswp.com/block-post-toc) #### 投稿 無料 グリッド、リスト、メイソンリー、タイムラインなど多彩なレイアウトで投稿をクエリして表示します。カテゴリー、タグ、カスタム投稿タイプ、並べ替えによるフィルタリングに対応しています。 [ライブで確認：投稿（ブログ | グリッド、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog-grid/) [ドキュメントに記載の投稿ブロック の設定](https://docs.canvaswp.com/block-posts) #### Recent Comments 無料 サイト全体の承認済みの最新コメントを表示します。各コメントには投稿者のアバター、名前、冒頭の数語が表示され、スレッドへのリンクが付きます。 [ライブで確認：Recent Comments（ウィジェット、新しいタブで開きます）](https://demos.canvaswp.com/classic/widgets/) [ドキュメントに記載のRecent Commentsブロック の設定](https://docs.canvaswp.com/block-recent-comments) #### Resume Works 無料 Worksの投稿タイプのプロジェクトを、コンパクトなリストまたはタイルグリッドで表示したり、個別のプロジェクトページ（属性、CTA、関連プロジェクト）を表示したりします。 [ライブで確認：Resume Works（作品、新しいタブで開きます）](https://demos.canvaswp.com/resume/works/) ### コンテンツ 30件のブロック。ブロックインサーターの「コンテンツ」に一覧表示されます。 #### Background Video / Audio 無料 ヒーロー、セクション背景、デザインされたプレーヤーに使用できる、自己ホスト型のループ再生動画または音声レイヤーです。メディア要素のみを出力するため、配置を決めるラッパーはご自身で管理できます。 [ライブで確認：Background Video / Audio（メディアアクション、新しいタブで開きます）](https://demos.canvaswp.com/classic/media-actions/) [ドキュメントに記載のBackground Video / Audioブロック の設定](https://docs.canvaswp.com/block-background-video) #### Cascading Images すべてのプランに含まれています 画像ごとの移動、回転、拡大縮小、z-index、アニメーション遅延、任意の装飾用背景シェイプを使った、レイヤー構成の画像レイアウト。 [ライブで確認：Cascading Images（Cascading Images、新しいタブで開きます）](https://demos.canvaswp.com/classic/cascading-images/) [ドキュメントに記載のCascading Imagesブロック の設定](https://docs.canvaswp.com/block-cascading-images) #### チャート すべてのプランに含まれています 用意したデータセットからチャートを描画し、レポートや価格比較の数値をひと目で読み取れるようにします。チャートの種類、データ、ラベルはすべて入力した設定から決まります。 [ライブで確認：チャート（サービス - レイアウト1、新しいタブで開きます）](https://demos.canvaswp.com/classic/services/) [ドキュメントに記載のチャートブロック の設定](https://docs.canvaswp.com/block-chart) #### Circle Stack すべてのプランに含まれています 円形のアバター、アイコン、テキストバッジを横に並べて表示します。チームの紹介、ソーシャルプルーフ、フォロワー数の表示に最適です。 [ライブで確認：Circle Stack（Circle Stacks、新しいタブで開きます）](https://demos.canvaswp.com/classic/circle-stack/) [ドキュメントに記載のCircle Stackブロック の設定](https://docs.canvaswp.com/block-circle-stack) #### クライアント 無料 クライアント、パートナー、ブランドのロゴを、レスポンシブグリッドまたはowl-carouselで表示します。任意でリンクやライトボックスに対応します。 [ライブで確認：クライアント（クライアント、新しいタブで開きます）](https://demos.canvaswp.com/classic/clients/) [ドキュメントに記載のクライアントブロック の設定](https://docs.canvaswp.com/block-clients) #### Data Table すべてのプランに含まれています 仕様一覧やプラン比較など、構造化された情報を行と列で配置します。訪問者が並べ替えられる列見出しと、任意で末尾に表示できる要約行を備えています。 [ライブで確認：Data Table（ユーザープロフィール、新しいタブで開きます）](https://demos.canvaswp.com/classic/profile/) [ドキュメントに記載のData Tableブロック の設定](https://docs.canvaswp.com/block-data-table) #### Map 無料 Google MapsまたはOpenStreetMapの地図です。カスタムマーカー、ズームレベル、Google Mapsでは地図タイプとスタイルの上書きに対応しています。 [ライブで確認：Map（マップ、新しいタブで開きます）](https://demos.canvaswp.com/classic/maps/) [ドキュメントに記載のMapブロック の設定](https://docs.canvaswp.com/block-google-map) #### Hover Card 無料 マウスポインターに合わせて3Dに傾く画像カードです。タイトルとカテゴリのキャプションが、手前に浮き上がるように表示されます。 [ライブで確認：Hover Card（Hover Parallax、新しいタブで開きます）](https://demos.canvaswp.com/classic/hover-parallax/) [ドキュメントに記載のHover Cardブロック の設定](https://docs.canvaswp.com/block-hover-card) #### Icon Browser 無料 有効化されたアイコンパックのすべてのアイコンを検索できる一覧グリッドです。 [ライブで確認：Icon Browser（アイコン、新しいタブで開きます）](https://demos.canvaswp.com/classic/icons/) [ドキュメントに記載のIcon Browserブロック の設定](https://docs.canvaswp.com/block-icon-browser) #### Inline SVG 無料 SVGパスデータから描画するベクターアイコン。サイズ、色、viewBox、レイヤーごとの不透明度をサイドバーのコントロールで設定できます。 [ライブで確認：Inline SVG（料金、新しいタブで開きます）](https://demos.canvaswp.com/classic/pricing/) [ドキュメントに記載のInline SVGブロック の設定](https://docs.canvaswp.com/block-inline-svg) #### Link Tiles 無料 アイコンとラベルのタイルを並べたグリッドで、それぞれがページにリンクします。存在しないページを指すタイルは除外されます。 [ライブで確認：Link Tiles（リストグループ・カード、新しいタブで開きます）](https://demos.canvaswp.com/classic/lists-cards/) [ドキュメントに記載のLink Tilesブロック の設定](https://docs.canvaswp.com/block-link-tiles) #### Lists & Cards 無料 Bootstrapベースのリストグループとカード。複数のスタイル、色、レイアウトに対応します。 [ライブで確認：Lists & Cards（リストグループ・カード、新しいタブで開きます）](https://demos.canvaswp.com/classic/lists-cards/) [ドキュメントに記載のLists & Cardsブロック の設定](https://docs.canvaswp.com/block-list-cards) #### Media Embed 無料 ホスティングサービスの動画や音声、アップロード済みのファイル、またはプロバイダーから提供された埋め込みアドレスから、動画または音声プレーヤーをページに配置できます。選択したアスペクト比に合わせてサイズが調整されます。 [ライブで確認：Media Embed（メディア埋め込み、新しいタブで開きます）](https://demos.canvaswp.com/classic/media-embeds/) [ドキュメントに記載のMedia Embedブロック の設定](https://docs.canvaswp.com/block-media-embed) #### Nav Tree 無料 インデントされた多階層のリンクツリーです。サイドパネルやドキュメントのサイドバーで使用するナビゲーションリストです。 [ドキュメントに記載のNav Treeブロック の設定](https://docs.canvaswp.com/block-nav-tree) #### Navbar 無料 ブランド、ハンバーガーボタン、ドロップダウンリンク、そして任意で末尾に置ける検索フォーム、ボタン、テキストを備えた、折りたたみ可能なナビゲーションバーです。 [ライブで確認：Navbar（ナビゲーション、新しいタブで開きます）](https://demos.canvaswp.com/classic/navigation/) [ドキュメントに記載のNavbarブロック の設定](https://docs.canvaswp.com/block-navbar) #### Overlay Content 無料 オーバーレイ内の1つのコンテンツレイヤー。配置を揃えられ、必要に応じてマスクを適用でき、トリガーアイコンと入れ子のブロックを含みます。 [ライブで確認：Overlay Content（アイテムオーバーレイ、新しいタブで開きます）](https://demos.canvaswp.com/classic/item-overlays/) [ドキュメントに記載のOverlay Contentブロック の設定](https://docs.canvaswp.com/block-overlay-content) #### Overlay Item 無料 画像カードの上にオーバーレイを重ねたもの：バッジ、色味レイヤー、1つ以上のオーバーレイコンテンツレイヤー。 [ライブで確認：Overlay Item（アイテムオーバーレイ、新しいタブで開きます）](https://demos.canvaswp.com/classic/item-overlays/) [ドキュメントに記載のOverlay Itemブロック の設定](https://docs.canvaswp.com/block-overlay-item) #### ページタイトル 無料 ページタイトル（ヒーローバー）のブロックです。見出し、サブタイトル、パンくずリストを内部に配置でき、配置、背景画像、パララックス、ダークカラーを選択できます。 [ライブで確認：ページタイトル（ページタイトル左揃えレイアウト、新しいタブで開きます）](https://demos.canvaswp.com/classic/page-title/) [ドキュメントに記載のページタイトルブロック の設定](https://docs.canvaswp.com/block-page-title) #### Page Title Buttons 無料 ページタイトル帯に表示されるアクションボタンです。ダイナミックモードでは各ページ独自のボタンを読み込み、ここで作成したボタンを表示することもできます。リンクのないボタンは、スクロールトリガーになります。 [ライブで確認：Page Title Buttons（ボタン、新しいタブで開きます）](https://demos.canvaswp.com/classic/buttons/) [ドキュメントに記載のPage Title Buttonsブロック の設定](https://docs.canvaswp.com/block-page-title-buttons) #### Particles 無料 セクション用のアニメーション付きパーティクル背景レイヤーです。ラインウェブ、スターフィールド、バブル、スノー、ローポリから選べます。 [ライブで確認：Particles（Particles、新しいタブで開きます）](https://demos.canvaswp.com/classic/particles/) [ドキュメントに記載のParticlesブロック の設定](https://docs.canvaswp.com/block-particles) #### Preloader 無料 デザインシステムのローダースタイルのいずれにも対応する、アニメーション付きのCSSローディングインジケーターです。 [ライブで確認：Preloader（プリローダー、新しいタブで開きます）](https://demos.canvaswp.com/classic/preloaders/) [ドキュメントに記載のPreloaderブロック の設定](https://docs.canvaswp.com/block-preloader) #### Pricing Switcher すべてのプランに含まれています 対になったPricing Tableブロック全体で、月額/年間（または任意の2状態）の料金表示を切り替えるトグルスイッチです。 [ライブで確認：Pricing Switcher（料金、新しいタブで開きます）](https://demos.canvaswp.com/classic/pricing/) [ドキュメントに記載のPricing Switcherブロック の設定](https://docs.canvaswp.com/block-pricing-switcher) #### Q&A Item 無料 1つの質問とその回答を、それぞれ独自のマーカー付きで配置できます。インタビューを構成する基本的なブロックです。 [ライブで確認：Q&A Item（Jane Doe on Twenty Years of Building Type、新しいタブで開きます）](https://demos.canvaswp.com/classic/blog/2026/02/11/jane-doe-on-building-type/) [ドキュメントに記載のQ&A Itemブロック の設定](https://docs.canvaswp.com/block-qa-item) #### Rounded Skill 無料 パーセンテージに合わせて満たされる円形のスキルリングです。中央には数値、独自のテキスト、アイコン、またはカウンターを表示できます。 [ライブで確認：Rounded Skill（Pie & Skills、新しいタブで開きます）](https://demos.canvaswp.com/classic/pie-skills/) [ドキュメントに記載のRounded Skillブロック の設定](https://docs.canvaswp.com/block-rounded-skill) #### Scroll Arrow すべてのプランに含まれています ヒーローセクション向けのアニメーション付きスクロールダウン矢印。ターゲットとなるセクションのアンカーへスムーズにスクロールします。 [ライブで確認：Scroll Arrow（Christmas Sale Store、新しいタブで開きます）](https://demos.canvaswp.com/xmas/) [ドキュメントに記載のScroll Arrowブロック の設定](https://docs.canvaswp.com/block-scroll-arrow) #### Star Rating 無料 1つのスコアとして設定する星評価です。半分の星、カスタムアイコン、任意のラッパー要素に対応しています。 [ライブで確認：Star Rating（結果、新しいタブで開きます）](https://demos.canvaswp.com/beauty-kit/results/) [ドキュメントに記載のStar Ratingブロック の設定](https://docs.canvaswp.com/block-star-rating) #### Testimonials 無料 お客様からいただいたお声を、グリッド、切り替わるカルーセル、または吹き出し形式で表示します。各お声には投稿者、写真、星評価を付けられます。 [ライブで確認：Testimonials（お客様の声 & Twitter、新しいタブで開きます）](https://demos.canvaswp.com/classic/testimonials-twitter/) [ドキュメントに記載のTestimonialsブロック の設定](https://docs.canvaswp.com/block-testimonials) #### Thumbnails 無料 ホバーエフェクトとオプションのキャプションを備えた画像サムネイルグリッド。ライトボックスとリンクオーバーレイに対応。 [ドキュメントに記載のThumbnailsブロック の設定](https://docs.canvaswp.com/block-thumbnails) #### Ticker 無料 項目、方向、速度、スタイルを設定できる、スクロールするお知らせティッカーです。 [ライブで確認：Ticker（ティッカー、新しいタブで開きます）](https://demos.canvaswp.com/classic/ticker/) [ドキュメントに記載のTickerブロック の設定](https://docs.canvaswp.com/block-ticker) #### Twitter Feed 無料 ページの読み込み時に取得される、アカウントの最新ツイートを切り替え表示するフィードです。表示するアカウント、表示件数、ウィジェットのレイアウトを選択できます。 [ライブで確認：Twitter Feed（ウィジェット、新しいタブで開きます）](https://demos.canvaswp.com/classic/widgets/) [ドキュメントに記載のTwitter Feedブロック の設定](https://docs.canvaswp.com/block-twitter-feed) ### Canvas 29個のブロック。ブロックインサーターの Canvas の下に一覧表示されます。 #### Alert 無料 Bootstrapのalert、またはCanvasのstyle-msgシステムを使用したアラートと通知ボックスです。塗りつぶし、枠線付き、拡張版のバリエーションに対応し、任意でアイコンと閉じるボタンを追加できます。 [ライブで確認：Alert（スタイルボックス、新しいタブで開きます）](https://demos.canvaswp.com/classic/style-boxes/) [ドキュメントに記載のAlertブロック の設定](https://docs.canvaswp.com/block-alert) #### ボタン 無料 スタイルのバリエーション、サイズ、形状、色、アイコン、ホバーエフェクト、シャドウ設定を備えた、フル機能のボタンです。 [ライブで確認：ボタン（ボタン、新しいタブで開きます）](https://demos.canvaswp.com/classic/buttons/) [ドキュメントに記載のボタンブロック の設定](https://docs.canvaswp.com/block-button) #### Code Highlight すべてのプランに含まれています Prism.jsによる構文ハイライト付きのコードブロックです。15以上の言語に対応し、オプションでクリップボードへのコピーボタンを追加できます。 [ライブで確認：Code Highlight（コードハイライター、新しいタブで開きます）](https://demos.canvaswp.com/classic/code-highlighter/) [ドキュメントに記載のCode Highlightブロック の設定](https://docs.canvaswp.com/block-code-highlight) #### カウンター 無料 アイコン、接頭辞・接尾辞、キャプションラベルを備えた、アニメーション付きの数値カウンターです。 [ライブで確認：カウンター（カウンター、新しいタブで開きます）](https://demos.canvaswp.com/classic/counters/) [ドキュメントに記載のカウンターブロック の設定](https://docs.canvaswp.com/block-counter) #### Divider 無料 アイコンを任意で追加できる水平の区切り線。スタイルのバリエーション、配置、幅のプリセット、スクロール先へのリンクに対応します。 [ライブで確認：Divider（区切り線、新しいタブで開きます）](https://demos.canvaswp.com/classic/dividers/) [ドキュメントに記載のDividerブロック の設定](https://docs.canvaswp.com/block-divider) #### Dropcap 無料 スタイル付きのドロップキャップ文字と、それに続く段落テキスト。ボックス、枠線、円、枠線付き円のバリエーションに対応し、左または右に配置できます。 [ライブで確認：Dropcap（見出し・ドロップキャップ、新しいタブで開きます）](https://demos.canvaswp.com/classic/headings-dropcaps/) [ドキュメントに記載のDropcapブロック の設定](https://docs.canvaswp.com/block-dropcap) #### 見出し 無料 サブタイトルを任意で追加できる、スタイル付きの見出しです。Heading Block、Title Block、Emphasis Title、Fancy Title の各タイプに対応します。 [ライブで確認：見出し（見出し・ドロップキャップ、新しいタブで開きます）](https://demos.canvaswp.com/classic/headings-dropcaps/) [ドキュメントに記載の見出しブロック の設定](https://docs.canvaswp.com/block-heading) #### ハイライト 無料 マーカー、下線、グラデーション、アウトライン、テキストのみなど、スタイルを切り替えられるハイライトテキストです。前後に任意の周辺テキストを追加でき、ブロックレベルのHTMLタグにも対応します。 [ドキュメントに記載のハイライトブロック の設定](https://docs.canvaswp.com/block-highlight) #### Icon Box 無料 アイコン、タイトル、説明文を備えた機能ボックスです。アイコンのスタイル、サイズ、レイアウト、ホバー効果を複数から選べます。 [ライブで確認：Icon Box（注目ボックス、新しいタブで開きます）](https://demos.canvaswp.com/classic/featured-boxes/) [ドキュメントに記載のIcon Boxブロック の設定](https://docs.canvaswp.com/block-icon-box) #### Icon List 無料 繰り返し項目付きのアイコンリスト。各項目には、アイコン（CSSクラス）、テキストラベル、任意のリンクを設定できます。標準、大、特大のサイズバリエーションに対応しています。 [ライブで確認：Icon List（アイコンリスト、新しいタブで開きます）](https://demos.canvaswp.com/classic/icon-lists/) [ドキュメントに記載のIcon Listブロック の設定](https://docs.canvaswp.com/block-icon-list) #### Login Form すべてのプランに含まれています Canvasのスタイルで WordPressのログインフォームを表示します。ログイン済みのユーザーにはウェルカムメッセージを表示します。 [ライブで確認：Login Form（ログイン・新規登録、新しいタブで開きます）](https://demos.canvaswp.com/classic/login-register/) [ドキュメントに記載のLogin Formブロック の設定](https://docs.canvaswp.com/block-login-form) #### 通知 無料 ボタンのクリック、またはページの読み込み時に自動で表示される、トースト通知を表示します。 [ライブで確認：通知（通知、新しいタブで開きます）](https://demos.canvaswp.com/classic/notifications/) [ドキュメントに記載の通知ブロック の設定](https://docs.canvaswp.com/block-notification) #### Page Title Breadcrumbs 無料 現在のページや投稿のパンくずリスト（ホーム > 親 > 現在）を表示します。 [ライブで確認：Page Title Breadcrumbs（ページタイトル左揃えレイアウト、新しいタブで開きます）](https://demos.canvaswp.com/classic/page-title/) [ドキュメントに記載のPage Title Breadcrumbsブロック の設定](https://docs.canvaswp.com/block-page-title-breadcrumbs) #### Page Title Heading 無料 ページ／投稿のタイトルを見出しとして表示します。動的（コンテキスト）と静的（リテラル）のソースモードに対応しています。 [ライブで確認：Page Title Heading（ページタイトル左揃えレイアウト、新しいタブで開きます）](https://demos.canvaswp.com/classic/page-title/) [ドキュメントに記載のPage Title Headingブロック の設定](https://docs.canvaswp.com/block-page-title-heading) #### Page Title Subtitle 無料 ページのサブタイトルを表示します。動的モードでは _canvas_page_subtitle メタを読み取り、静的モードでは任意のテキストを表示します。 [ライブで確認：Page Title Subtitle（ページタイトル左揃えレイアウト、新しいタブで開きます）](https://demos.canvaswp.com/classic/page-title/) [ドキュメントに記載のPage Title Subtitleブロック の設定](https://docs.canvaswp.com/block-page-title-subtitle) #### Plain Image 無料 figureラッパーなしの素のimg要素です。クラスを正確に制御でき、任意でリンクや、Retina（2x）用のsrcsetペアを設定できます。 [ライブで確認：Plain Image（Shape Dividers、新しいタブで開きます）](https://demos.canvaswp.com/classic/shape-dividers/) [ドキュメントに記載のPlain Imageブロック の設定](https://docs.canvaswp.com/block-plain-image) #### Portfolio Excerpt すべてのプランに含まれています 現在のポートフォリオ項目の短縮抜粋を表示します。 [ライブで確認：Portfolio Excerpt（Imagination を開く、新しいタブで開きます）](https://demos.canvaswp.com/project/portfolio/open-imagination/) [ドキュメントに記載のPortfolio Excerptブロック の設定](https://docs.canvaswp.com/block-portfolio-excerpt) #### Pricing Table すべてのプランに含まれています 柔軟に使える料金ボックスのカードです。デフォルト、シンプル、ミニマル、拡張の各レイアウトに対応し、料金切り替え、機能リスト、CTAボタンを任意で追加できます。 [ライブで確認：Pricing Table（料金、新しいタブで開きます）](https://demos.canvaswp.com/classic/pricing/) [ドキュメントに記載のPricing Tableブロック の設定](https://docs.canvaswp.com/block-pricing-table) #### Process Steps 無料 番号またはアイコンのステップ表示を、破線のコネクターとともに表示します。オプションで、前へ/次へのナビゲーション付きのBootstrap 5タブのコンテンツを有効にできます。 [ライブで確認：Process Steps（Process Steps、新しいタブで開きます）](https://demos.canvaswp.com/classic/process-steps/) [ドキュメントに記載のProcess Stepsブロック の設定](https://docs.canvaswp.com/block-process-steps) #### Progress Bar 無料 パーセント表示のカウンター付きのアニメーション・スキル/プログレスバー。水平または垂直の向きに対応し、Bootstrap のストライプパターンも使えます。 [ライブで確認：Progress Bar（プログレスバー・スキル、新しいタブで開きます）](https://demos.canvaswp.com/classic/progress-skills/) [ドキュメントに記載のProgress Barブロック の設定](https://docs.canvaswp.com/block-progress-bar) #### Promo Box 無料 見出し、サブテキスト、CTAボタンを備えた、プロモーション用のCTAボックスです。デフォルト、枠線、ライト、ダークのスタイルに対応しています。 [ライブで確認：Promo Box（Promo Boxes、新しいタブで開きます）](https://demos.canvaswp.com/classic/promo-boxes/) [ドキュメントに記載のPromo Boxブロック の設定](https://docs.canvaswp.com/block-promo-box) #### 引用 無料 デフォルトの枠線、アイコン付きの引用、吹き出しのスタイルを持つブロッククォート。逆方向の配置、出典フッター、枠線やアイコンの色の任意上書きに対応しています。 [ライブで確認：引用（引用・ブロッククォート、新しいタブで開きます）](https://demos.canvaswp.com/classic/quotes-blockquotes/) [ドキュメントに記載の引用ブロック の設定](https://docs.canvaswp.com/block-quote) #### Read More 無料 「続きを読む」リンクで開閉する、アニメーション付きの折りたたみコンテンツエリア。 [ライブで確認：Read More（Read More、新しいタブで開きます）](https://demos.canvaswp.com/classic/read-more/) [ドキュメントに記載のRead Moreブロック の設定](https://docs.canvaswp.com/block-read-more) #### Register Form すべてのプランに含まれています Canvasのスタイルが適用されたユーザー登録フォームです。WordPressの設定でユーザー登録を有効にしておく必要があります。 [ライブで確認：Register Form（ログイン・新規登録、新しいタブで開きます）](https://demos.canvaswp.com/classic/login-register/) [ドキュメントに記載のRegister Formブロック の設定](https://docs.canvaswp.com/block-register-form) #### Shape Divider 無料 セクションの切り替えに使う、SVG製の装飾用シェイプディバイダーです。 [ライブで確認：Shape Divider（Shape Dividers、新しいタブで開きます）](https://demos.canvaswp.com/classic/shape-dividers/) [ドキュメントに記載のShape Dividerブロック の設定](https://docs.canvaswp.com/block-shape-divider) #### Social Icons 無料 ホバーアニメーション付きのソーシャルアイコンリンクをまとめて配置します。複数のスタイルとサイズから選べ、必要に応じてスティッキー配置も設定できます。 [ライブで確認：Social Icons（Social Icons、新しいタブで開きます）](https://demos.canvaswp.com/classic/social-icons/) [ドキュメントに記載のSocial Iconsブロック の設定](https://docs.canvaswp.com/block-social-icons) #### Stat List 無料 太字の数値と短いラベルの組み合わせを並べたリストです。経験年数、ローンチ数、受賞歴などに使えます。 [ライブで確認：Stat List（チーム、新しいタブで開きます）](https://demos.canvaswp.com/classic/team/) [ドキュメントに記載のStat Listブロック の設定](https://docs.canvaswp.com/block-stat-list) #### Styled Icon 無料 単独で使えるアイコンです。塗りつぶし、枠線付き、シンプルなスタイル、形状のバリエーション、カラーオプション、任意のリンク設定に対応しています。 [ライブで確認：Styled Icon（スタイル付きアイコン、新しいタブで開きます）](https://demos.canvaswp.com/classic/styled-icons/) [ドキュメントに記載のStyled Iconブロック の設定](https://docs.canvaswp.com/block-styled-icon) #### Team Member 無料 写真、名前、役職、経歴、ソーシャルリンク、数値を持つチームメンバーを1人、カード、名簿の行、統計カード、重ねたカード、リーダーのポートレートのいずれかの形式で表示します。 [ライブで確認：Team Member（チーム、新しいタブで開きます）](https://demos.canvaswp.com/classic/team/) [ドキュメントに記載のTeam Memberブロック の設定](https://docs.canvaswp.com/block-team-card) ### インタラクティブ 25個のブロック。ブロックインサーターの「インタラクティブ」に表示されます。 #### アコーディオン 無料 開閉できるタイトル付きのパネルを重ねて配置できます。質問や参考資料が多くても1ページにまとまり、訪問者は必要な部分だけを開いて読めます。 [ライブで確認：アコーディオン（トグル・アコーディオン、新しいタブで開きます）](https://demos.canvaswp.com/classic/toggles-accordions/) [ドキュメントに記載のアコーディオンブロック の設定](https://docs.canvaswp.com/block-accordion) #### AJAX Button 無料 AJAXで外部コンテンツをコンテナに読み込むボタンです。追加、先頭に挿入、置き換えの挿入モードに対応しています。 [ライブで確認：AJAX Button（AJAX Button、新しいタブで開きます）](https://demos.canvaswp.com/classic/ajax-button/) [ドキュメントに記載のAJAX Buttonブロック の設定](https://docs.canvaswp.com/block-ajax-button) #### カルーセル 無料 レスポンシブ対応のowl-carouselスライダーです。ブレークポイントごとのアイテム数、自動再生、ナビゲーション矢印、ドット、ライトボックス、遅延読み込みに対応します。 [ライブで確認：カルーセル（カルーセル、新しいタブで開きます）](https://demos.canvaswp.com/classic/carousel/) [ドキュメントに記載のカルーセルブロック の設定](https://docs.canvaswp.com/block-carousel) #### Countdown すべてのプランに含まれています jQuery countdownプラグインを利用した、カウントダウンまたはカウントアップのタイマー。 [ライブで確認：Countdown（カウンター、新しいタブで開きます）](https://demos.canvaswp.com/classic/counters/) [ドキュメントに記載のCountdownブロック の設定](https://docs.canvaswp.com/block-countdown) #### Flip Card すべてのプランに含まれています 表面と裏面にそれぞれ独自の背景を持ち、ホバー時に裏返る3Dフリップカードです。 [ライブで確認：Flip Card（Flip Cards、新しいタブで開きます）](https://demos.canvaswp.com/classic/flip-cards/) [ドキュメントに記載のFlip Cardブロック の設定](https://docs.canvaswp.com/block-flip-card) #### Gallery 無料 マソンリーレイアウト対応、列数の設定、間隔の調整、オプションのライトボックスに対応した画像ギャラリー。 [ライブで確認：Gallery（Gallery、新しいタブで開きます）](https://demos.canvaswp.com/classic/gallery/) [ドキュメントに記載のGalleryブロック の設定](https://docs.canvaswp.com/block-gallery) #### Cookie Consent 無料 プライバシー設定モーダルとサービスごとの同意トグルを備えたクッキー同意バー。 [ライブで確認：Cookie Consent（GDPR Layout 2、新しいタブで開きます）](https://demos.canvaswp.com/classic/gdpr-layout-2/) [ドキュメントに記載のCookie Consentブロック の設定](https://docs.canvaswp.com/block-gdpr-consent) #### Hover 3D 無料 マウス移動に応じてCSSのパースペクティブによる傾きエフェクトが動く、テーマのJSモジュールを使ったカードです。 [ドキュメントに記載のHover 3Dブロック の設定](https://docs.canvaswp.com/block-hover-3d) #### Image Compare すべてのプランに含まれています ビフォー／アフターの画像比較スライダー。向き、位置のオフセット、ハンドルのスタイル、左右のラベルを設定できます。 [ライブで確認：Image Compare（Image Compare、新しいタブで開きます）](https://demos.canvaswp.com/classic/image-compare/) [ドキュメントに記載のImage Compareブロック の設定](https://docs.canvaswp.com/block-image-compare) #### Image Hotspot すべてのプランに含まれています ホバーまたはクリックでツールチップを表示する、配置されたホットスポットピンを備えたインタラクティブ画像。 [ライブで確認：Image Hotspot（画像ホットスポット、新しいタブで開きます）](https://demos.canvaswp.com/classic/image-hotspot/) [ドキュメントに記載のImage Hotspotブロック の設定](https://docs.canvaswp.com/block-image-hotspot) #### Image Slider すべてのプランに含まれています FlexSlider採用の画像スライダー。スライド／フェードアニメーション、自動再生、矢印、ドット、サムネイルナビゲーション、タッチスワイプに対応。 [ライブで確認：Image Slider（画像スライダー、新しいタブで開きます）](https://demos.canvaswp.com/classic/image-sliders/) [ドキュメントに記載のImage Sliderブロック の設定](https://docs.canvaswp.com/block-image-slider) #### Modal すべてのプランに含まれています ボタンやリンクをクリックしたとき、またはページの読み込み時に自動で、モーダル／ポップアップダイアログを表示します。 [ライブで確認：Modal（モーダル・ポップオーバー、新しいタブで開きます）](https://demos.canvaswp.com/classic/modal-popovers/) [ドキュメントに記載のModalブロック の設定](https://docs.canvaswp.com/block-modal) #### Nav 無料 タブ、ピル、下線式のナビゲーションストリップ。アクティブ、無効の状態と、1階層のドロップダウンに対応。 [ライブで確認：Nav（ナビゲーション、新しいタブで開きます）](https://demos.canvaswp.com/classic/navigation/) [ドキュメントに記載のNavブロック の設定](https://docs.canvaswp.com/block-nav) #### Off-Canvas 無料 ボタンまたはリンクで開く、Bootstrap 5 のオフキャンバス・スライドパネル（開始・終了・上・下）。 [ライブで確認：Off-Canvas（Bootstrap Off-Canvas、新しいタブで開きます）](https://demos.canvaswp.com/classic/offcanvas/) [ドキュメントに記載のOff-Canvasブロック の設定](https://docs.canvaswp.com/block-off-canvas) #### ページネーション 無料 ページネーションの行です。円形、角丸、ピル型、3D、透明、ボタンのいずれかのスタイルで、3つのサイズと任意の配置に対応します。 [ライブで確認：ページネーション（Paginations & Progress Bars、新しいタブで開きます）](https://demos.canvaswp.com/classic/pagination-progress/) [ドキュメントに記載のページネーションブロック の設定](https://docs.canvaswp.com/block-pagination) #### Parallax Image すべてのプランに含まれています オーバーレイとコンテンツを任意で備えた、全幅のパララックス画像セクションです。 [ライブで確認：Parallax Image（パララックス要素、新しいタブで開きます）](https://demos.canvaswp.com/classic/parallax-elements/) [ドキュメントに記載のParallax Imageブロック の設定](https://docs.canvaswp.com/block-parallax-image) #### Scroll Reveal すべてのプランに含まれています ページをスクロールすると、コンテンツがアニメーションで表示されます。 [ドキュメントに記載のScroll Revealブロック の設定](https://docs.canvaswp.com/block-scroll-reveal) #### Slider すべてのプランに含まれています Canvas Slider を選択すると、サイトの任意の場所に埋め込めます。スライド、エフェクト、ナビゲーション、高さは、スライダー自体で設定します。 [ライブで確認：Slider（ホーム・リビング＆インテリアデコレーション、新しいタブで開きます）](https://demos.canvaswp.com/home-living/) [ドキュメントに記載のSliderブロック の設定](https://docs.canvaswp.com/block-slider) #### Tab Strip 無料 パネルの内容が、ページ内の他の通常のブロックで構成されるタブストリップです。 [ライブで確認：Tab Strip（ユーザープロフィール、新しいタブで開きます）](https://demos.canvaswp.com/classic/profile/) [ドキュメントに記載のTab Stripブロック の設定](https://docs.canvaswp.com/block-tab-nav) #### タブ 無料 関連するコンテンツを見出し付きのタブに分けて、訪問者が一度に1つのセクションだけを読めるようにします。これにより、長い比較ページや仕様ページも、ざっと確認できる長さに保てます。 [ライブで確認：タブ（タブ、新しいタブで開きます）](https://demos.canvaswp.com/classic/tabs/) [ドキュメントに記載のタブブロック の設定](https://docs.canvaswp.com/block-tabs) #### Text Fill Scroll すべてのプランに含まれています 要素が画面内にスクロールされると、テキストの色が徐々に塗りつぶされます。 [ドキュメントに記載のText Fill Scrollブロック の設定](https://docs.canvaswp.com/block-text-fill-scroll) #### Text Rotator 無料 見出し要素内で、テキストを回転させたり、タイプ入力風にアニメーション表示したりします。 [ライブで確認：Text Rotator（見出し・ドロップキャップ、新しいタブで開きます）](https://demos.canvaswp.com/classic/headings-dropcaps/) [ドキュメントに記載のText Rotatorブロック の設定](https://docs.canvaswp.com/block-text-rotator) #### トグル 無料 長い回答や、初期状態でページを占有させたくない用語のセットに便利です。訪問者がクリックして開く見出しの後ろに、コンテンツの一部を隠しておけます。 [ライブで確認：トグル（トグル・アコーディオン、新しいタブで開きます）](https://demos.canvaswp.com/classic/toggles-accordions/) [ドキュメントに記載のトグルブロック の設定](https://docs.canvaswp.com/block-toggle) #### Video Facade 無料 サムネイル画像の裏で遅延読み込みされる動画埋め込み。iframeはクリック時にのみ読み込まれ、ページを高速化します。 [ドキュメントに記載のVideo Facadeブロック の設定](https://docs.canvaswp.com/block-video-facade) #### YouTube Background 無料 オーバーレイコンテンツの背後で、ミュート状態で流れるYouTube動画の背景。 [ライブで確認：YouTube Background（Event Single | Full Width Video、新しいタブで開きます）](https://demos.canvaswp.com/classic/event-single-full-width-video/) [ドキュメントに記載のYouTube Backgroundブロック の設定](https://docs.canvaswp.com/block-youtube-bg) ### WooCommerce 24個のブロックは、ブロックインサーターでWooCommerceの下に表示されます。 #### Conference Tickets すべてのプランに含まれています チケット商品のカテゴリーごとの料金ボックス。各ボックスには数量セレクトと、リアルタイムに反映されるカートに追加リンクがあります。 [ライブで確認：Conference Tickets（チケット、新しいタブで開きます）](https://demos.canvaswp.com/conference/tickets/) [ドキュメントに記載のConference Ticketsブロック の設定](https://docs.canvaswp.com/block-conference-tickets) #### Store Price Filter すべてのプランに含まれています 商品グリッドをその場で絞り込む、2つのハンドルを持つ価格範囲コントロールです。 [ライブで確認：Store Price Filter（フィルター付きショップ、新しいタブで開きます）](https://demos.canvaswp.com/classic/shop-filter/) [ドキュメントに記載のStore Price Filterブロック の設定](https://docs.canvaswp.com/block-store-price-filter) #### ウィッシュリスト 無料 お客様が保存した商品を、価格、在庫状況、カートに追加ボタンとともに表示します。テーマオプションのウィッシュリストで選んだページに配置してください。 [ドキュメントに記載のウィッシュリストブロック の設定](https://docs.canvaswp.com/block-wishlist) #### Wishlist Button 無料 現在の商品をお客様のウィッシュリストに保存します。商品テンプレートと商品カードで使用してください。 [ドキュメントに記載のWishlist Buttonブロック の設定](https://docs.canvaswp.com/block-wishlist-button) #### Add to Cart すべてのプランに含まれています 現在の商品の WooCommerce「カートに追加」フォームを表示します。数量入力欄は任意で追加できます。 [ライブで確認：Add to Cart（チェック柄のショートドレス、新しいタブで開きます）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [ドキュメントに記載のAdd to Cartブロック の設定](https://docs.canvaswp.com/block-woo-add-to-cart) #### Cart Table すべてのプランに含まれています 商品明細、数量、合計を含むWooCommerceのカートテーブルを表示します。 [ライブで確認：Cart Table（カート、新しいタブで開きます）](https://demos.canvaswp.com/classic/cart/) [ドキュメントに記載のCart Tableブロック の設定](https://docs.canvaswp.com/block-woo-cart-table) #### Cart Totals すべてのプランに含まれています 小計、配送料、チェックアウトボタンを含む、WooCommerceのカート合計パネルを表示します。 [ライブで確認：Cart Totals（カート、新しいタブで開きます）](https://demos.canvaswp.com/classic/cart/) [ドキュメントに記載のCart Totalsブロック の設定](https://docs.canvaswp.com/block-woo-cart-totals) #### Checkout Billing すべてのプランに含まれています WooCommerceのチェックアウト請求先住所フォームを表示します。 [ドキュメントに記載のCheckout Billingブロック の設定](https://docs.canvaswp.com/block-woo-checkout-billing) #### Checkout Order Review すべてのプランに含まれています 明細と合計を含む、WooCommerceのチェックアウト注文レビューの概要を表示します。 [ドキュメントに記載のCheckout Order Reviewブロック の設定](https://docs.canvaswp.com/block-woo-checkout-order) #### クロスセル すべてのプランに含まれています 現在のWooCommerceカートからクロスセル商品を表示します。カートが有効で、クロスセル商品が含まれている場合にのみ表示されます。 [ライブで確認：クロスセル（カート、新しいタブで開きます）](https://demos.canvaswp.com/classic/cart/) [ドキュメントに記載のクロスセルブロック の設定](https://docs.canvaswp.com/block-woo-cross-sells) #### WooCommerce Notices すべてのプランに含まれています WooCommerceの通知を表示します：エラー、成功メッセージ、情報通知。 [ライブで確認：WooCommerce Notices（カート、新しいタブで開きます）](https://demos.canvaswp.com/classic/cart/) [ドキュメントに記載のWooCommerce Noticesブロック の設定](https://docs.canvaswp.com/block-woo-notices) #### Product Carousel すべてのプランに含まれています WooCommerceの商品を、スクロール可能なowl-carouselで表示します。自動再生、ナビゲーション矢印、ドット、レスポンシブのブレークポイントに対応しています。 [ライブで確認：Product Carousel（カルーセル、新しいタブで開きます）](https://demos.canvaswp.com/classic/carousel/) [ドキュメントに記載のProduct Carouselブロック の設定](https://docs.canvaswp.com/block-woo-product-carousel) #### Product Categories すべてのプランに含まれています WooCommerceの商品カテゴリーを、サムネイル、名前、商品数付きのレスポンシブなカードグリッドで表示します。 [ライブで確認：Product Categories（ブルーのラウンドネックTシャツ、新しいタブで開きます）](https://demos.canvaswp.com/classic/product/blue-round-neck-tshirt/) [ドキュメントに記載のProduct Categoriesブロック の設定](https://docs.canvaswp.com/block-woo-product-categories) #### Product Gallery Linker すべてのプランに含まれています クリックした画像に合わせて、商品ギャラリーのカルーセルを移動させるサムネイル一覧。 [ライブで確認：Product Gallery Linker（メンズ アビエーター サングラス、新しいタブで開きます）](https://demos.canvaswp.com/classic/product/men-aviator-sunglasses/) [ドキュメントに記載のProduct Gallery Linkerブロック の設定](https://docs.canvaswp.com/block-woo-product-gallery-linker) #### Product Images すべてのプランに含まれています WooCommerceの商品のアイキャッチ画像と、任意でギャラリーのサムネイルを表示します。 [ライブで確認：Product Images（チェック柄のショートドレス、新しいタブで開きます）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [ドキュメントに記載のProduct Imagesブロック の設定](https://docs.canvaswp.com/block-woo-product-images) #### Product Meta すべてのプランに含まれています 商品メタ情報カードを表示します：SKU、カテゴリー、タグ。 [ライブで確認：Product Meta（チェック柄のショートドレス、新しいタブで開きます）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [ドキュメントに記載のProduct Metaブロック の設定](https://docs.canvaswp.com/block-woo-product-meta) #### Product Price すべてのプランに含まれています セール価格や通貨書式を含め、WooCommerceの商品価格を表示します。 [ライブで確認：Product Price（チェック柄のショートドレス、新しいタブで開きます）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [ドキュメントに記載のProduct Priceブロック の設定](https://docs.canvaswp.com/block-woo-product-price) #### Product Rating すべてのプランに含まれています 現在のWooCommerce商品の星評価と、必要に応じてレビュー件数を表示します。 [ライブで確認：Product Rating（チェック柄のショートドレス、新しいタブで開きます）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [ドキュメントに記載のProduct Ratingブロック の設定](https://docs.canvaswp.com/block-woo-product-rating) #### Product Share すべてのプランに含まれています 現在のWooCommerce商品について、SNSで共有するためのリンクを含む「Share:」カードを表示します。 [ライブで確認：Product Share（チェック柄のショートドレス、新しいタブで開きます）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [ドキュメントに記載のProduct Shareブロック の設定](https://docs.canvaswp.com/block-woo-product-share) #### Product Short Description すべてのプランに含まれています 商品の短い説明を、段落の構造をそのまま保って表示します。 [ライブで確認：Product Short Description（チェック柄のショートドレス、新しいタブで開きます）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [ドキュメントに記載のProduct Short Descriptionブロック の設定](https://docs.canvaswp.com/block-woo-product-short-description) #### Product Tabs すべてのプランに含まれています WooCommerceの商品データタブ（説明、追加情報、レビュー）を表示します。 [ライブで確認：Product Tabs（チェック柄のショートドレス、新しいタブで開きます）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [ドキュメントに記載のProduct Tabsブロック の設定](https://docs.canvaswp.com/block-woo-product-tabs) #### 商品 すべてのプランに含まれています WooCommerceの商品を、グリッドまたはリスト形式で表示します。ソース、カテゴリー、タグ、並び順で絞り込めます。 [ライブで確認：商品（商品、新しいタブで開きます）](https://demos.canvaswp.com/classic/shop/) [ドキュメントに記載の商品ブロック の設定](https://docs.canvaswp.com/block-woo-products) #### Related Products すべてのプランに含まれています 現在の商品に関連する WooCommerce 商品のグリッドを表示します。単一商品テンプレートでのみ表示されます。 [ライブで確認：Related Products（チェック柄のショートドレス、新しいタブで開きます）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [ドキュメントに記載のRelated Productsブロック の設定](https://docs.canvaswp.com/block-woo-related-products) #### Variation Swatches すべてのプランに含まれています 可変商品のバリエーションを選択する、カラーのドットやボタン型のピル。 [ライブで確認：Variation Swatches（ピンクのプリントドレス、新しいタブで開きます）](https://demos.canvaswp.com/classic/product/pink-printed-dress-colors/) [ドキュメントに記載のVariation Swatchesブロック の設定](https://docs.canvaswp.com/block-woo-variation-swatches) ### ヘッダー 22個のブロックが、ブロック挿入ツールの「ヘッダー」の下に一覧表示されます。 #### App Menu 無料 小型デバイスで画面下部に固定される、アプリ風のナビゲーションバーです。 [ライブで確認：App Menu（メニュー - App Style 1、新しいタブで開きます）](https://demos.canvaswp.com/classic/menu-app-1/) [ドキュメントに記載のApp Menuブロック の設定](https://docs.canvaswp.com/block-app-menu) #### Color Scheme Toggle 無料 訪問者向けのダークモード切り替えです。テーマオプション > Color Scheme > Dark Mode で Dark Mode Switch がオンになっていて、表示位置にヘッダーを含む設定の場合に、サイトに表示されます。 [ドキュメントに記載のColor Scheme Toggleブロック の設定](https://docs.canvaswp.com/block-color-scheme-toggle) #### Header Button 無料 作成したヘッダーに配置する、テーマのボタンクラスでスタイルを整えた行動喚起ボタン／リンクです。 [ライブで確認：Header Button（ホーム、新しいタブで開きます）](https://demos.canvaswp.com/hosting/) [ドキュメントに記載のHeader Buttonブロック の設定](https://docs.canvaswp.com/block-header-button) #### Header Cart 無料 作成したヘッダー用のWooCommerceミニカートアイコンとドロップダウン。WooCommerceが無効の場合は何も表示されません。 [ライブで確認：Header Cart（ホーム、新しいタブで開きます）](https://demos.canvaswp.com/classic/) [ドキュメントに記載のHeader Cartブロック の設定](https://docs.canvaswp.com/block-header-cart) #### Header Container 無料 ビルドしたヘッダーのルートです。ロゴ、ナビゲーションなどのヘッダーパーツをその中にドロップします。 [ライブで確認：Header Container（イタリアンレストラン、新しいタブで開きます）](https://demos.canvaswp.com/restaurant/) [ドキュメントに記載のHeader Containerブロック の設定](https://docs.canvaswp.com/block-header-container) #### Header Icon Link 無料 構築済みのヘッダー用の、アイコンのみの単一のリンクです（ウィッシュリスト、アカウント、ユーザー、カートトリガー、ログインモーダル）。.header-misc-icon のマークアップを使用します。 [ライブで確認：Header Icon Link（ヘッダーSaaS、新しいタブで開きます）](https://demos.canvaswp.com/classic/header-saas/) [ドキュメントに記載のHeader Icon Linkブロック の設定](https://docs.canvaswp.com/block-header-icon-link) #### Header Info 無料 作成したヘッダーで使用する、小さなインラインの情報・連絡先要素です。電話番号、メール、営業時間、テキストを表示でき、任意でアイコンとリンクを追加できます。 [ライブで確認：Header Info（Menu - Style 7、新しいタブで開きます）](https://demos.canvaswp.com/classic/menu-7/) [ドキュメントに記載のHeader Infoブロック の設定](https://docs.canvaswp.com/block-header-info) #### Header Logo 無料 構築したヘッダーのサイトロゴです。初期設定ではテーマオプションのサイトロゴを使用し、任意の画像で上書きすることもできます。 [ライブで確認：Header Logo（イタリアンレストラン、新しいタブで開きます）](https://demos.canvaswp.com/restaurant/) [ドキュメントに記載のHeader Logoブロック の設定](https://docs.canvaswp.com/block-header-logo) #### Header Navigation 無料 構築したヘッダーのメインナビゲーションメニューです。メニューと配置を選択します。 [ライブで確認：Header Navigation（イタリアンレストラン、新しいタブで開きます）](https://demos.canvaswp.com/restaurant/) [ドキュメントに記載のHeader Navigationブロック の設定](https://docs.canvaswp.com/block-header-navigation) #### Header Root 無料 構築したヘッダーの最も外側の要素です。バリエーション用のクラスと、テーマのスティッキーヘッダースクリプトが読み取る data-sticky-* 属性を保持します。#header-wrap グループ（およびその他のヘッダーコンテンツ）をこの内側に配置してください。 [ライブで確認：Header Root（ホーム、新しいタブで開きます）](https://demos.canvaswp.com/classic/) [ドキュメントに記載のHeader Rootブロック の設定](https://docs.canvaswp.com/block-header-root) #### Header Search 無料 ヘッダー検索の切り替えです。テーマの検索ドロップダウンに接続されている #top-search トリガーを出力します。 [ライブで確認：Header Search（ホーム、新しいタブで開きます）](https://demos.canvaswp.com/classic/) [ドキュメントに記載のHeader Searchブロック の設定](https://docs.canvaswp.com/block-header-search) #### Header Shop Search 無料 ヘッダー行に常に表示される商品検索フィールドです。ストアやディレクトリで、ヘッダー検索トグルの代わりに使えます。アイコンのみが表示された状態のシンプルなフィールド、または送信ボタン付きの入力グループから選択できます。 [ライブで確認：Header Shop Search（ヘッダーディレクトリ、新しいタブで開きます）](https://demos.canvaswp.com/classic/header-directory/) [ドキュメントに記載のHeader Shop Searchブロック の設定](https://docs.canvaswp.com/block-header-shop-search) #### Header Side Panel Trigger 無料 サイドパネルを開くヘッダーアイコンです。テーマオプションでサイドパネルが有効になっている間のみ表示されます。 [ドキュメントに記載のHeader Side Panel Triggerブロック の設定](https://docs.canvaswp.com/block-header-side-panel-trigger) #### Header Social 無料 構築済みヘッダー用の、ソーシャルまたは連絡先のアイコンリンクを一列に並べたものです。top-socialのマークアップとスタイルを使用します。 [ライブで確認：Header Social（オンラインファッションストア - ショップサイドバー、新しいタブで開きます）](https://demos.canvaswp.com/classic/shop-1-right-sidebar/) [ドキュメントに記載のHeader Socialブロック の設定](https://docs.canvaswp.com/block-header-social) #### Header Topbar 無料 構築済みヘッダーの上にある細いユーティリティ行（#top-bar）です。Top Links、Header Social、Header Info、Language Switcherのいずれかを内部に配置できます。 [ドキュメントに記載のHeader Topbarブロック の設定](https://docs.canvaswp.com/block-header-topbar) #### Header Wishlist 無料 ヘッダーに表示されるハートのアイコンで、ウィッシュリストへリンクし、保存されている商品数も表示します。 [ドキュメントに記載のHeader Wishlistブロック の設定](https://docs.canvaswp.com/block-header-wishlist) #### Header Zone 無料 Header Containerの行内に配置する配置用スロットです。ロゴ、ナビゲーション、またはヘッダー部品をまとめたものを内側にドロップし、配置・順序・表示設定のフィールドで位置を調整します。 [ライブで確認：Header Zone（イタリアンレストラン、新しいタブで開きます）](https://demos.canvaswp.com/restaurant/) [ドキュメントに記載のHeader Zoneブロック の設定](https://docs.canvaswp.com/block-header-zone) #### Icon Nav List 無料 オフキャンバスメニューパネルで使われる、縦方向のBootstrap .nav アイコンリンクリスト（nav-item > nav-link > アイコン + テキスト）。 [ライブで確認：Icon Nav List（ユーザープロフィール、新しいタブで開きます）](https://demos.canvaswp.com/classic/profile/) [ドキュメントに記載のIcon Nav Listブロック の設定](https://docs.canvaswp.com/block-icon-nav-list) #### Language Switcher 無料 構築したヘッダーに配置するコンパクトな言語ドロップダウン。現在の言語を表示し、他の言語を一覧表示します。primary-menu with-arrows のマークアップを使用します。 [ドキュメントに記載のLanguage Switcherブロック の設定](https://docs.canvaswp.com/block-language-switcher) #### Mega Menu Column すべてのプランに含まれています 1つのメガメニュー列（.mega-menu-column）には、見出しとリンクリスト、フラットなリンク、自由なウィジェットコンテンツのいずれかを入れられます。1つ以上をRowブロックの中に配置して、メガメニューのコンテンツとして使用します（外観 > メニュー > メガメニューでは、外側のパネルの種類とスタイルを引き続き設定します）。 [ライブで確認：Mega Menu Column（メガメニュー、新しいタブで開きます）](https://demos.canvaswp.com/classic/mega-menu/) [ドキュメントに記載のMega Menu Columnブロック の設定](https://docs.canvaswp.com/block-mega-menu) #### Page Menu 無料 固定表示やサイドドット表示のバリエーションを備えた、サブヘッダー用のページナビゲーションバーです。1ページ内のアンカースクロールまたは通常のリンクを使用できます。1ページに1つだけ使用してください。 [ライブで確認：Page Menu（サブメニュー付きページ、新しいタブで開きます）](https://demos.canvaswp.com/classic/page-submenu/) [ドキュメントに記載のPage Menuブロック の設定](https://docs.canvaswp.com/block-page-menu) #### Top Links 無料 トップバーのリンクメニュー。任意で1階層のドロップダウンを追加でき、.top-linksのマークアップとスタイルを使用します。 [ライブで確認：Top Links（オンラインファッションストア - ショップサイドバー、新しいタブで開きます）](https://demos.canvaswp.com/classic/shop-1-right-sidebar/) [ドキュメントに記載のTop Linksブロック の設定](https://docs.canvaswp.com/block-top-links) ### レイアウト 19個のブロックは、ブロックインサーターの「レイアウト」に一覧表示されます。 #### カラム 無料 レスポンシブグリッドの列（.col-*）。ブレークポイントごとに幅を設定し、任意のコンテンツを配置できます。 [ライブで確認：カラム（カラムとグリッド、新しいタブで開きます）](https://demos.canvaswp.com/classic/columns-grids/) [ドキュメントに記載のカラムブロック の設定](https://docs.canvaswp.com/block-column) #### コンテナ 無料 レスポンシブ対応の.containerラッパーです。内側に行と列を配置して、セクションのレイアウトを組み立てます。 [ドキュメントに記載のコンテナブロック の設定](https://docs.canvaswp.com/block-container) #### Copyrights 無料 フッターの著作権バーの一部です。リンク付きの著作権表示行、またはインラインのリンクメニューのいずれかです。両方を並べて配置するには、Wrapperの「Copyrights Bar」バリエーションを挿入します。 [ライブで確認：Copyrights（フッター - レイアウト2、新しいタブで開きます）](https://demos.canvaswp.com/classic/footer-2/) [ドキュメントに記載のCopyrightsブロック の設定](https://docs.canvaswp.com/block-copyrights) #### Footer About 無料 ロゴ、説明、（任意）住所を含むフッターの「About」列です。.footer-logoのマークアップを使用します。 [ライブで確認：Footer About（フッター - レイアウト2、新しいタブで開きます）](https://demos.canvaswp.com/classic/footer-2/) [ドキュメントに記載のFooter Aboutブロック の設定](https://docs.canvaswp.com/block-footer-about) #### フッター連絡先 無料 ラベル/値の形式の大きな連絡先行。.footer-big-contactsのマークアップとスタイルを使用します。 [ライブで確認：フッター連絡先（フッター - レイアウト3、新しいタブで開きます）](https://demos.canvaswp.com/classic/footer-3/) [ドキュメントに記載のフッター連絡先ブロック の設定](https://docs.canvaswp.com/block-footer-contacts) #### Footer Instagram 無料 フッターのInstagram/フォトストリームウィジェット：任意でリンクを設定できる画像のメーソンリーグリッドを表示します。マークアップには.masonry-thumbsを使用します。 [ライブで確認：Footer Instagram（フッター - レイアウト4、新しいタブで開きます）](https://demos.canvaswp.com/classic/footer-4/) [ドキュメントに記載のFooter Instagramブロック の設定](https://docs.canvaswp.com/block-footer-instagram) #### Footer Widget Area 無料 フッターウィジェットの行を組み立てるルート要素です。Footer About、Widget Links、Footer Contacts、Subscribe、Footer Instagramの各ブロックをドラッグして内側に配置できます。 [ライブで確認：Footer Widget Area（フッター - レイアウト2、新しいタブで開きます）](https://demos.canvaswp.com/classic/footer-2/) [ドキュメントに記載のFooter Widget Areaブロック の設定](https://docs.canvaswp.com/block-footer-widget-area) #### Grid Filter すべてのプランに含まれています Isotope でフィルター可能なグリッドを制御する、カテゴリーフィルターバー（.grid-filter）。項目はタクソノミーまたは手動リストから取得します。 [ライブで確認：Grid Filter（ポートフォリオフィルタースタイル、新しいタブで開きます）](https://demos.canvaswp.com/classic/portfolio-filter-styles/) [ドキュメントに記載のGrid Filterブロック の設定](https://docs.canvaswp.com/block-grid-filter) #### Hero 無料 各ページの Hero パネルで割り当てられた Hero、または選択した1つの Hero を表示します。Hero は Canvas → Heroes で作成します。 [ライブで確認：Hero（セクション、新しいタブで開きます）](https://demos.canvaswp.com/classic/sections/) [ドキュメントに記載のHeroブロック の設定](https://docs.canvaswp.com/block-hero-slot) #### Image Element 無料 図版やキャプションで囲まれていない素の画像です。ロゴやバッジなど、ほかのコンテンツと並べて配置するインライン画像に使います。 [ライブで確認：Image Element（ホーム、新しいタブで開きます）](https://demos.canvaswp.com/modern-blog/) [ドキュメントに記載のImage Elementブロック の設定](https://docs.canvaswp.com/block-image-element) #### Inline Contact 無料 アイコンとテキストからなる連絡先項目（メール、電話、Skypeなど）を、中黒（・）区切りでフラットに並べたインライン表示です。#copyrightsバーの連絡先行に使います。 [ライブで確認：Inline Contact（お問い合わせ、新しいタブで開きます）](https://demos.canvaswp.com/classic/contact/) [ドキュメントに記載のInline Contactブロック の設定](https://docs.canvaswp.com/block-inline-contact) #### Inline Text 無料 コンテナ内に直接置かれ、独自の段落やspanを持たないテキストのまとまりです。インライン要素のみが対象です。 [ライブで確認：Inline Text（全幅レイアウト、新しいタブで開きます）](https://demos.canvaswp.com/classic/full-width/) [ドキュメントに記載のInline Textブロック の設定](https://docs.canvaswp.com/block-inline-text) #### Line Break 無料 スペーシングに使う単一の改行。詳細パネルでレスポンシブ用のクラスを追加すると、特定の画面サイズでのみ行を改行できます。 [ライブで確認：Line Break（Hover Parallax、新しいタブで開きます）](https://demos.canvaswp.com/classic/hover-parallax/) [ドキュメントに記載のLine Breakブロック の設定](https://docs.canvaswp.com/block-line-break) #### ページタイトル 無料 各ページでヘッダーの下に表示されるページタイトルのバンドを表示します。ページごとのページタイトルパネルとテーマオプションで設定した内容が反映されます。バンド自体はページタイトルのテンプレートパーツです。 [ライブで確認：ページタイトル（ページタイトル左揃えレイアウト、新しいタブで開きます）](https://demos.canvaswp.com/classic/page-title/) [ドキュメントに記載のページタイトルブロック の設定](https://docs.canvaswp.com/block-page-title-slot) #### Quantity Input 無料 .quantity ステッパー：マイナス・プラスボタンで挟まれた数値入力欄です。商品に依存しない汎用的な部品で、「カートに入れる」の行を作るにはボタンと組み合わせて使います。 [ライブで確認：Quantity Input（カート数量、新しいタブで開きます）](https://demos.canvaswp.com/classic/cart-quantity/) [ドキュメントに記載のQuantity Inputブロック の設定](https://docs.canvaswp.com/block-quantity-input) #### Row 無料 グリッドの行です。内部に Canvas Column ブロックを配置すると、レスポンシブなグリッドでコンテンツをレイアウトできます。 [ライブで確認：Row（カラムとグリッド、新しいタブで開きます）](https://demos.canvaswp.com/classic/columns-grids/) [ドキュメントに記載のRowブロック の設定](https://docs.canvaswp.com/block-row) #### Page Slider 無料 各ページのSliderパネルで割り当てたスライダー、または選択した1つのスライダーを表示します。スライド、エフェクト、高さはスライダー自体で設定します。 [ライブで確認：Page Slider（Canvas Slider、新しいタブで開きます）](https://demos.canvaswp.com/classic/slider-canvas/) [ドキュメントに記載のPage Sliderブロック の設定](https://docs.canvaswp.com/block-slider-slot) #### Widget Links 無料 フッターのリンクリスト列です。.widget_links のマークアップとスタイルを使用します。 [ライブで確認：Widget Links（ウィジェット、新しいタブで開きます）](https://demos.canvaswp.com/classic/widgets/) [ドキュメントに記載のWidget Linksブロック の設定](https://docs.canvaswp.com/block-widget-links) #### Wrapper 無料 指定したクラスのみを持ち、他のブロックを内包する素のHTML要素です。エディター用の余分なクラスを付けずに、正確なラッパー要素が必要なデザインで使用します。 [ライブで確認：Wrapper（セクション、新しいタブで開きます）](https://demos.canvaswp.com/classic/sections/) [ドキュメントに記載のWrapperブロック の設定](https://docs.canvaswp.com/block-wrapper) ### イベント 16 個のブロック。ブロックインサーターの「Events」に一覧表示されます。 #### Conference Program すべてのプランに含まれています イベントのレコードから作成される、日別タブ付きのセッションアジェンダ、または今後のイベントカードの一覧。 [ライブで確認：Conference Program（Canvas 開発カンファレンス、新しいタブで開きます）](https://demos.canvaswp.com/conference/) [ドキュメントに記載のConference Programブロック の設定](https://docs.canvaswp.com/block-conference-events) #### Event Archive Grid すべてのプランに含まれています メインクエリ（アーカイブ + カテゴリ）用のイベントグリッドです。event-entry-gridパーシャルと共通のページネーションを使用します。 [ライブで確認：Event Archive Grid（イベント、新しいタブで開きます）](https://demos.canvaswp.com/classic/events/) [ドキュメントに記載のEvent Archive Gridブロック の設定](https://docs.canvaswp.com/block-event-archive) #### Event Categories すべてのプランに含まれています 現在のイベントに割り当てられたカテゴリーを表示します。テキスト、バッジ、ピルの各スタイルに対応しています。canvas_event投稿タイプでのみ表示されます。 [ドキュメントに記載のEvent Categoriesブロック の設定](https://docs.canvaswp.com/block-event-categories) #### Event Content すべてのプランに含まれています 現在のイベントの投稿コンテンツ全体を、the_contentフィルターを通して表示します。canvas_event投稿タイプでのみ表示されます。 [ライブで確認：Event Content（Event Single、新しいタブで開きます）](https://demos.canvaswp.com/classic/event-single/) [ドキュメントに記載のEvent Contentブロック の設定](https://docs.canvaswp.com/block-event-content) #### Event Date すべてのプランに含まれています イベントの開始日と終了日を、任意で時刻とカレンダーアイコン付きで表示します。canvas_eventの投稿タイプでのみ表示されます。 [ドキュメントに記載のEvent Dateブロック の設定](https://docs.canvaswp.com/block-event-date) #### Event Excerpt すべてのプランに含まれています 現在のイベントの短縮された抜粋を表示します。 [ドキュメントに記載のEvent Excerptブロック の設定](https://docs.canvaswp.com/block-event-excerpt) #### Event Image すべてのプランに含まれています 現在のイベントのアイキャッチ画像を表示します。canvas_event投稿タイプでのみ表示されます。 [ライブで確認：Event Image（Event Single、新しいタブで開きます）](https://demos.canvaswp.com/classic/event-single/) [ドキュメントに記載のEvent Imageブロック の設定](https://docs.canvaswp.com/block-event-image) #### Event Location すべてのプランに含まれています イベント会場の名称と住所を表示します。任意でGoogle マップへのリンクと位置情報アイコンを追加できます。canvas_event 投稿タイプでのみ表示されます。 [ドキュメントに記載のEvent Locationブロック の設定](https://docs.canvaswp.com/block-event-location) #### Event Meta すべてのプランに含まれています イベントのメタデータ（日付、場所、主催者、料金）を表示します。各項目は個別に表示・非表示を切り替えられます。canvas_eventの投稿タイプでのみ表示されます。 [ライブで確認：Event Meta（イベント詳細 | 両側サイドバー、新しいタブで開きます）](https://demos.canvaswp.com/classic/event-single-both-sidebar/) [ドキュメントに記載のEvent Metaブロック の設定](https://docs.canvaswp.com/block-event-meta) #### Event Navigation すべてのプランに含まれています 前後のイベントへのナビゲーションリンクを表示します。ラベルは設定でき、サムネイルは任意で表示できます。canvas_eventの投稿タイプでのみ表示されます。 [ライブで確認：Event Navigation（イベント詳細 | 両側サイドバー、新しいタブで開きます）](https://demos.canvaswp.com/classic/event-single-both-sidebar/) [ドキュメントに記載のEvent Navigationブロック の設定](https://docs.canvaswp.com/block-event-navigation) #### Event Organizer すべてのプランに含まれています イベント主催者を表示します。主催者のWebサイトへのリンク（任意）と人物アイコンが付きます。canvas_event 投稿タイプでのみ表示されます。 [ドキュメントに記載のEvent Organizerブロック の設定](https://docs.canvaswp.com/block-event-organizer) #### Event Posts すべてのプランに含まれています canvas_event投稿を、レスポンシブなカードグリッドで取得して表示します。開催予定、過去、またはすべてのイベントでの絞り込みに対応します。任意のページに配置できます。 [ライブで確認：Event Posts（イベント一覧、新しいタブで開きます）](https://demos.canvaswp.com/classic/events-list/) [ドキュメントに記載のEvent Postsブロック の設定](https://docs.canvaswp.com/block-event-posts) #### Event Price すべてのプランに含まれています イベントの価格を表示します。価格が未設定の場合は、設定で変更できる無料ラベルを表示します。テキストとバッジのスタイルに対応しています。canvas_event 投稿タイプでのみ表示されます。 [ドキュメントに記載のEvent Priceブロック の設定](https://docs.canvaswp.com/block-event-price) #### Related Events すべてのプランに含まれています 共通のカテゴリに基づいて関連イベントのグリッドを表示します。canvas_event投稿タイプでのみ表示されます。 [ライブで確認：Related Events（Spring Music Fest、新しいタブで開きます）](https://demos.canvaswp.com/classic/events/spring-music-fest/) [ドキュメントに記載のRelated Eventsブロック の設定](https://docs.canvaswp.com/block-event-related) #### Event Title すべてのプランに含まれています 現在のイベントタイトルを、設定可能な見出しタグの中に表示します。パーマリンクへのリンクを任意で付けられます。canvas_event投稿タイプでのみ表示されます。 [ドキュメントに記載のEvent Titleブロック の設定](https://docs.canvaswp.com/block-event-title) #### Events Calendar すべてのプランに含まれています イベントを月単位のグリッドで表示するカレンダーです。前月・翌月・今日に移動するコントロールがあり、各日付から、その日に開催されるイベントにリンクできます。 [ライブで確認：Events Calendar（Events Calendar、新しいタブで開きます）](https://demos.canvaswp.com/classic/events-calendar/) [ドキュメントに記載のEvents Calendarブロック の設定](https://docs.canvaswp.com/block-events-calendar) ### ポートフォリオ 8個のブロックが、ブロック挿入ツールの「Portfolio」の下に一覧表示されます。 #### Portfolio Archive Grid すべてのプランに含まれています メインクエリ（アーカイブとカテゴリー）用のポートフォリオグリッド。portfolio-entry-gridパーシャルと#portfolioオーバーレイグリッドを使用します。 [ライブで確認：Portfolio Archive Grid（ポートフォリオ、新しいタブで開きます）](https://demos.canvaswp.com/classic/projects/) [ドキュメントに記載のPortfolio Archive Gridブロック の設定](https://docs.canvaswp.com/block-portfolio-archive) #### Portfolio Categories すべてのプランに含まれています 現在のポートフォリオ案件に割り当てられたタクソノミーカテゴリーを表示します。ポートフォリオの個別テンプレート内で使用してください。 [ライブで確認：Portfolio Categories（Meridian Brand Identity、新しいタブで開きます）](https://demos.canvaswp.com/media-agency/portfolio/meridian-brand-identity/) [ドキュメントに記載のPortfolio Categoriesブロック の設定](https://docs.canvaswp.com/block-portfolio-categories) #### Portfolio Content すべてのプランに含まれています 現在のポートフォリオのプロジェクトの全コンテンツを表示します。ポートフォリオの個別テンプレート内で使用します。 [ライブで確認：Portfolio Content（Imagination を開く、新しいタブで開きます）](https://demos.canvaswp.com/classic/projects/open-imagination/) [ドキュメントに記載のPortfolio Contentブロック の設定](https://docs.canvaswp.com/block-portfolio-content) #### Portfolio Image すべてのプランに含まれています 現在のポートフォリオ案件のメディア領域を表示します。注目画像、ギャラリースライダー、案件動画、サムネイルグリッドのいずれかを表示します。ポートフォリオの個別テンプレート内で使用してください。 [ライブで確認：Portfolio Image（Imagination を開く、新しいタブで開きます）](https://demos.canvaswp.com/classic/projects/open-imagination/) [ドキュメントに記載のPortfolio Imageブロック の設定](https://docs.canvaswp.com/block-portfolio-image) #### Portfolio Meta すべてのプランに含まれています ポートフォリオのプロジェクト詳細（クライアント、日付、スキル、URL）を表示します。ポートフォリオの個別テンプレート内で使用します。 [ライブで確認：Portfolio Meta（Imagination を開く、新しいタブで開きます）](https://demos.canvaswp.com/classic/projects/open-imagination/) [ドキュメントに記載のPortfolio Metaブロック の設定](https://docs.canvaswp.com/block-portfolio-meta) #### Portfolio Navigation すべてのプランに含まれています 前後のポートフォリオ案件へのナビゲーションリンクを表示します。ポートフォリオの個別テンプレート内で使用します。 [ライブで確認：Portfolio Navigation（Imagination を開く、新しいタブで開きます）](https://demos.canvaswp.com/classic/projects/open-imagination/) [ドキュメントに記載のPortfolio Navigationブロック の設定](https://docs.canvaswp.com/block-portfolio-navigation) #### Portfolio Related すべてのプランに含まれています 共通のカテゴリーに基づいて、関連するポートフォリオのプロジェクトを表示します。ポートフォリオの個別テンプレート内で使用します。 [ライブで確認：Portfolio Related（Imagination を開く、新しいタブで開きます）](https://demos.canvaswp.com/classic/projects/open-imagination/) [ドキュメントに記載のPortfolio Relatedブロック の設定](https://docs.canvaswp.com/block-portfolio-related) #### Portfolio Title すべてのプランに含まれています 現在のポートフォリオプロジェクトのタイトルを表示します。ポートフォリオの個別テンプレート内で使用してください。 [ライブで確認：Portfolio Title（Meridian Brand Identity、新しいタブで開きます）](https://demos.canvaswp.com/media-agency/portfolio/meridian-brand-identity/) [ドキュメントに記載のPortfolio Titleブロック の設定](https://docs.canvaswp.com/block-portfolio-title) ### フォーム 5個のブロックがブロックインサーターの「Forms」に表示されます。 #### Form すべてのプランに含まれています 動作するフォームです。内部にForm Fieldブロックと Form Submit Buttonブロックを配置してください。送信内容は検証、保存、メール送信されます。 [ライブで確認：Form（フォームスタイル、新しいタブで開きます）](https://demos.canvaswp.com/classic/forms-styles/) [ドキュメントに記載のFormブロック の設定](https://docs.canvaswp.com/block-form-container) #### Form Embed すべてのプランに含まれています フォームIDを選択することで、Canvasのフォームをサイト内の任意の場所に埋め込めます。 [ライブで確認：Form Embed（ショップ一覧、新しいタブで開きます）](https://demos.canvaswp.com/classic/index-shop/) [ドキュメントに記載のForm Embedブロック の設定](https://docs.canvaswp.com/block-form-embed) #### Form Field すべてのプランに含まれています 単一のフォーム入力欄です。Canvas Formの内部で使用し、ユーザーの入力を収集します。 [ライブで確認：Form Field（フォーム要素、新しいタブで開きます）](https://demos.canvaswp.com/classic/form-elements/) [ドキュメントに記載のForm Fieldブロック の設定](https://docs.canvaswp.com/block-form-field) #### Form Submit Button すべてのプランに含まれています Canvas フォームの送信ボタンです。スタイルのバリエーション、サイズ、全幅表示、アイコンに対応しています。 [ライブで確認：Form Submit Button（フォームスタイル、新しいタブで開きます）](https://demos.canvaswp.com/classic/forms-styles/) [ドキュメントに記載のForm Submit Buttonブロック の設定](https://docs.canvaswp.com/block-form-submit) #### Quick Contact すべてのプランに含まれています 「Quick Quotation」のコンパクトなお問い合わせフォームのウィジェットです（名前／メール／メッセージ）。Canvas のフォーム CSS でスタイル設定されています。 [ライブで確認：Quick Contact（ウィジェット、新しいタブで開きます）](https://demos.canvaswp.com/classic/widgets/) [ドキュメントに記載のQuick Contactブロック の設定](https://docs.canvaswp.com/block-quick-contact) デモ専用ブロック ## デモとともに導入される105ブロック 一部のデザインには、そのデザイン内でしか意味を持たないブロックが必要です。これらのブロックは常に登録されるため、インポートしたデモは今後もずっと表示され続けますが、必要としていないサイトではブロックインサーターに表示されません。 ### 投稿 72 Academic Posts, Album Tiles, Architecture Projects, Architecture Team, Arrangement Gallery, Artist Bubbles, Bakery Menu, Barber Items, and 64 more. **72件の Posts ブロックをすべて見る** 学術投稿、アルバムタイル、建築プロジェクト、建築チーム、アレンジメントギャラリー、アーティストバブル、ベーカリーメニュー、バーバーアイテム、ビューティーキット、バイクレンタル、記帳代行サービス、ボットテンプレート、ブランディングエージェンシー制作実績、ブランディングスタジオ制作実績、カフェメニュー、キャンペーン、強みグリッド、ケアサービス、活動、チャンネル動画、クリーナーチーム、クリーニングサービス、カンファレンススピーカー、カンファレンススポンサー、コワーキングスペース、クリエイターショーケース、クロスフィットクラス、クロスフィットワークアウト、歯科チーム、歯科施術、医師、不動産物件、イベントスケジュール、イベントスピーカー、イベントスピーカー、フェスティバルラインナップ、フードトラックメニュー、サッカークラブニュース、ゲーミング試合、ヘッドフォン製品、ヘッドフォンストア、ホステルルーム、保険補償、幼稚園ニュース、幼稚園プログラム、ライフスタイルエピソード、ライフスタイル投稿、ローンプログラム、武道の種目、医療の診療科、医療の専門分野、医療の医師、メニューアイテム、引っ越し業者の投稿、引っ越しサービス、NFTアイテム、ペットサービス、フォトグラファーのショット、プラットフォームモジュール、ポッドキャストエピソード、レシピアイテム、レジデンス、個人建築家の制作実績、スパ施術、テニスニュース、テニストーナメント、セラピー施術、トラックコレクション、旅行ホテル、旅行パッケージ、ワインテイスティング、ヨガクラス。 ### WooCommerce 10 Channel Merch, Event Passes, Fashion Cart Part, Fashion Product Part, Fashion Products, Gear Products, Illustrator Prints, Lifestyle Picks, Store Products, eCommerce Products. ### コンテンツ 7 記事カード、ファイナンス計算機、フォーラムのディスカッション、フォーラムメンバー、フォーラムのトピック、レシピカテゴリー、賃貸計算機。 ### インタラクティブ 6 オーディオプレーヤーバー、設定オプション、ドメイン検索、ホスト価格、ホストスライダー、トラック再生ボタン。 ### Canvas 4 歯科FAQ、ドットグリッド背景、ライブ取引フィード、バーチャルカード。 ### ヘッダー 3 Forum Header Dropdown, Forum Search Overlay, Photographer Menu. ### ポートフォリオ 3 Motion Works, Portfolio Grid, Videographer Works. テーマオプションには、Canvas が登録するすべてのブロックが、デモ専用のものを含めて一覧表示されます。各ブロックには切り替えスイッチがあり、オフにするとブロック挿入ツールから除外され、フロントエンドのアセットの読み込みも停止します。 デモをインポートすると、そのブロックが作成されたページに表示され、完全に編集可能になります。他のCanvasブロックと同じ設定パネルも使えます。デモを元に戻すと、ブロックも一緒に削除されます。 共通コントロール ## すべてのブロックに共通する項目 Canvasが登録するすべてのブロックには7つの設定があり、そのうち最初の4つは、当社のブロックだけでなく、WordPressのコアブロックやサードパーティ製ブロックにも設定されます。エディターに追加されるためです。 選択したブロックのサイドバーです。訪問者に見えるものはすべてここで調整できるため、開くコードビューはありません。 ### アニメーション ブロックがビューポートに入ると表示され、速度、遅延、任意の退場アニメーションを設定できます。モーションは、訪問者の「動きを減らす」設定を尊重します。 ### カスタムCSS コアの設定項目で希望の表現ができない場合は、個々のブロックインスタンスに対してCSSを記述できます。そのCSSはそのブロックにのみ適用され、ページに出力される前にフィルタリングされます。 ### カスタム属性 サイドバーから、ブロックのルート要素にデータ属性やARIA属性を追加できます。これにより、サードパーティのスクリプトやテストハーネスから要素を見つけられるようになります。 ### 表示条件 ログイン状態、ユーザー権限、デバイスの画面サイズ、テーマオプションの値によって、ブロックの表示と非表示を切り替えられます。そのため、1つのページで複数の対象者に対応できます。 ### ブロックの初期設定 ブロックを好みの設定で一度構成し、その設定を、以降このサイトに挿入するすべてのブロックのデフォルトとして保存できます。 - [エディターの仕組み](https://canvaswp.com/ja/editor/) ### グローバルスタイルプリセット 名前を付けてスタイルを保存し、サイト内のどのブロックにも適用できます。後からプリセットを変更すると、それを使用しているすべてのブロックも一緒に変わります。 ### ブロックごとのアセット読み込み ページは実際に表示するブロックのCSSとJavaScriptだけを読み込むため、スライダーのないページはスライダー用スクリプトをダウンロードしません。 - [パフォーマンス](https://canvaswp.com/ja/performance/) セクションから始める ## 183種類のブロックパターン パターンは、完成したセクションを通常のブロックとしてページに追加し、そのあとで編集できます。内部に生のHTMLはないため、見出し、画像、アイコン、リンクはすべてサイドバーで操作できる項目のままです。 パターンは挿入ツール内で17個のカテゴリーに分けられています： - ヘッダー - コンテンツ - フォーム - フッター - ブログ - Hero - Gallery - コールトゥアクション - 料金 - ページ - 機能 - イベント - ポップアップ - ソーシャル - Testimonials - ポートフォリオ - よくある質問 パターンはロックされるのではなくラベルで区別されます。プレミアムパターンはラベル付きでインサーターに表示され、内部のブロックが無料のものであれば、そのまま完全に表示されます。テーマに同梱されている173件のブロックテンプレートと4件のスタイルバリエーションも、サイトエディターで同じように動作します。