# 57件のShortcodesと要素

URL: https://canvaswp.com/ja/templates/shortcodes/
Updated: 2026-11-03

テンプレート

Canvasに同梱されるすべてのコンテンツ要素を、それぞれ専用ページで紹介します。各要素のバリエーションはすべてまとめて掲載しているので、構築前にオプションを確認できます。

[ライブショーケースを開く](https://demos.canvaswp.com/classic/) [デモサイトを閲覧](https://canvaswp.com/ja/demos/)

更新日：2026年11月3日

- [アニメーション （新しいタブで開きます）](https://demos.canvaswp.com/classic/animations/)
- [ボタン （新しいタブで開きます）](https://demos.canvaswp.com/classic/buttons/)
- [カルーセル （新しいタブで開きます）](https://demos.canvaswp.com/classic/carousel/)
- [クライアント （新しいタブで開きます）](https://demos.canvaswp.com/classic/clients/)
- [カラム （新しいタブで開きます）](https://demos.canvaswp.com/classic/columns-grids/)
- [カウンター （新しいタブで開きます）](https://demos.canvaswp.com/classic/counters/)
- [Read More （新しいタブで開きます）](https://demos.canvaswp.com/classic/read-more/)
- [Ticker （新しいタブで開きます）](https://demos.canvaswp.com/classic/ticker/)
- [カート数量 （新しいタブで開きます）](https://demos.canvaswp.com/classic/cart-quantity/)
- [パララックス要素 （新しいタブで開きます）](https://demos.canvaswp.com/classic/parallax-elements/)
- [区切り線 （新しいタブで開きます）](https://demos.canvaswp.com/classic/dividers/)
- [アイコンボックス （新しいタブで開きます）](https://demos.canvaswp.com/classic/featured-boxes/)
- [ギャラリー （新しいタブで開きます）](https://demos.canvaswp.com/classic/gallery/)
- [見出しスタイル （新しいタブで開きます）](https://demos.canvaswp.com/classic/headings-dropcaps/)
- [アイコンリスト （新しいタブで開きます）](https://demos.canvaswp.com/classic/icon-lists/)
- [グラデーション （新しいタブで開きます）](https://demos.canvaswp.com/classic/gradients/)
- [ライトボックス （新しいタブで開きます）](https://demos.canvaswp.com/classic/lightbox/)
- [アイテムオーバーレイ （新しいタブで開きます）](https://demos.canvaswp.com/classic/item-overlays/)
- [フォーム要素 （新しいタブで開きます）](https://demos.canvaswp.com/classic/form-elements/)
- [ファイルアップロード （新しいタブで開きます）](https://demos.canvaswp.com/classic/component-uploads/)
- [Circle Stack （新しいタブで開きます）](https://demos.canvaswp.com/classic/circle-stack/)
- [Video Facade （新しいタブで開きます）](https://demos.canvaswp.com/classic/video-facade/)
- [スクロール要素 （新しいタブで開きます）](https://demos.canvaswp.com/classic/scroll-elements/)
- [Lists & Cards （新しいタブで開きます）](https://demos.canvaswp.com/classic/lists-cards/)
- [マップ （新しいタブで開きます）](https://demos.canvaswp.com/classic/maps/)
- [メディア埋め込み （新しいタブで開きます）](https://demos.canvaswp.com/classic/media-embeds/)
- [モーダルボックス （新しいタブで開きます）](https://demos.canvaswp.com/classic/modal-popovers/)
- [通知 （新しいタブで開きます）](https://demos.canvaswp.com/classic/notifications/)
- [ページネーション （新しいタブで開きます）](https://demos.canvaswp.com/classic/pagination-progress/)
- [進捗・スキル （新しいタブで開きます）](https://demos.canvaswp.com/classic/progress-skills/)
- [Shape Dividers （新しいタブで開きます）](https://demos.canvaswp.com/classic/shape-dividers/)
- [Cascading Images （新しいタブで開きます）](https://demos.canvaswp.com/classic/cascading-images/)
- [コードハイライター （新しいタブで開きます）](https://demos.canvaswp.com/classic/code-highlighter/)
- [メディアアクション （新しいタブで開きます）](https://demos.canvaswp.com/classic/media-actions/)
- [料金ボックス （新しいタブで開きます）](https://demos.canvaswp.com/classic/pricing/)
- [Process Steps （新しいタブで開きます）](https://demos.canvaswp.com/classic/process-steps/)
- [Promo Boxes （新しいタブで開きます）](https://demos.canvaswp.com/classic/promo-boxes/)
- [ブロッククォート （新しいタブで開きます）](https://demos.canvaswp.com/classic/quotes-blockquotes/)
- [画像スライダー （新しいタブで開きます）](https://demos.canvaswp.com/classic/image-sliders/)
- [セクション （新しいタブで開きます）](https://demos.canvaswp.com/classic/sections/)
- [Social Icons （新しいタブで開きます）](https://demos.canvaswp.com/classic/social-icons/)
- [ホバーアニメーション （新しいタブで開きます）](https://demos.canvaswp.com/classic/hover-animations/)
- [AJAX Button （新しいタブで開きます）](https://demos.canvaswp.com/classic/ajax-button/)
- [条件付きフォーム （新しいタブで開きます）](https://demos.canvaswp.com/classic/conditional/)
- [プリローダー （新しいタブで開きます）](https://demos.canvaswp.com/classic/preloaders/)
- [アラートボックス （新しいタブで開きます）](https://demos.canvaswp.com/classic/style-boxes/)
- [スタイル付きアイコン （新しいタブで開きます）](https://demos.canvaswp.com/classic/styled-icons/)
- [テーブル （新しいタブで開きます）](https://demos.canvaswp.com/classic/tables/)
- [タブ （新しいタブで開きます）](https://demos.canvaswp.com/classic/tabs/)
- [Testimonials （新しいタブで開きます）](https://demos.canvaswp.com/classic/testimonials-twitter/)
- [Thumbnails （新しいタブで開きます）](https://demos.canvaswp.com/classic/thumbnails-slider/)
- [トグル （新しいタブで開きます）](https://demos.canvaswp.com/classic/toggles-accordions/)
- [遅延読み込み （新しいタブで開きます）](https://demos.canvaswp.com/classic/lazy-loading/)
- [Flip Cards （新しいタブで開きます）](https://demos.canvaswp.com/classic/flip-cards/)
- [モード切り替え （新しいタブで開きます）](https://demos.canvaswp.com/classic/color-mode-switcher/)
- [カスタムカーソル （新しいタブで開きます）](https://demos.canvaswp.com/classic/custom-cursor/)
- [Image Compare （新しいタブで開きます）](https://demos.canvaswp.com/classic/image-compare/)

各リンクは、お客様がインストールするのと同じテーマとブロックで作られた、ライブショーケースの実際のページを開きます。

どのブロックを使うか

## 各要素を支えるブロック

各要素のページには、1つ以上のCanvas ブロックとそのバリエーションが並んで表示されます。目的の要素を見つけ、その下に記載されたブロックを挿入すると、バリエーションはブロックのパネルの設定で切り替えられます。

- **ボタン**
   Button, Page Title Buttons
- **カルーセル**
   Carousel, Product Carousel
- **クライアント**
   クライアント
- **カラム**
   Column, Row
- **カウンター**
   Countdown, Counter
- **Read More**
   Read More
- **Ticker**
   Ticker
- **カート数量**
   Quantity Input
- **パララックス要素**
   Parallax Image
- **区切り線**
   Divider
- **アイコンボックス**
   Icon Box
- **ギャラリー**
   Gallery
- **見出しスタイル**
   Dropcap, Heading, Text Rotator
- **アイコンリスト**
   Icon List
- **アイテムオーバーレイ**
   Overlay Content, Overlay Item
- **フォーム要素**
   Form Field
- **Circle Stack**
   Circle Stack
- **Lists & Cards**
   Link Tiles, Lists & Cards
- **マップ**
   Map
- **メディア埋め込み**
   Media Embed
- **モーダルボックス**
   Modal
- **通知**
   通知
- **ページネーション**
   ページネーション
- **進捗・スキル**
   Progress Bar
- **Shape Dividers**
   Plain Image, Shape Divider
- **Cascading Images**
   Cascading Images
- **コードハイライター**
   Code Highlight
- **メディアアクション**
   Background Video / Audio
- **料金ボックス**
   Inline SVG, Pricing Switcher, Pricing Table
- **Process Steps**
   Process Steps
- **Promo Boxes**
   Promo Box
- **ブロッククォート**
   引用
- **画像スライダー**
   Image Slider
- **セクション**
   Hero, Wrapper
- **Social Icons**
   Social Icons
- **AJAX Button**
   AJAX Button
- **プリローダー**
   Preloader
- **アラートボックス**
   Alert
- **スタイル付きアイコン**
   Styled Icon
- **タブ**
   タブ
- **Testimonials**
   Testimonials
- **トグル**
   アコーディオン、トグル
- **Flip Cards**
   Flip Card
- **Image Compare**
   Image Compare

共通設定

## 各要素が備えている機能

### 詳細設定パネル

Canvasは、サイト上のすべてのブロックタイプ（コアブロックや他のプラグインのブロックを含む）に、同じ高度なパネルを追加します。このパネルでは、表示時と非表示時のアニメーション、そのブロックだけに適用されるカスタムCSS、カスタム属性、ロールやデバイスによる表示条件を設定できます。アニメーションページは、このパネルの実際の使用例です。

### デフォルトとグローバルスタイル

ボタンをブランドに合わせて設定し、その設定をデフォルトとして保存できます。次に挿入するボタンは、この設定から始まります。グローバルスタイルは、サイト全体に適用し、後から一箇所で変更できる設定のまとまりに付けた名前です。

### 無料とプレミアム、同じプラン

Canvasブロック314個のうち228個は無料で、86個はプレミアムです。すべてのプランですべてのブロックが使えるため、このページの要素をアップグレードしないと使えない、ということはありません。

- [ブロックライブラリ全体](https://canvaswp.com/ja/blocks/)

### メニューに「ショートコード」と表示される理由

このショーケースでは、これらのページの元になっているCanvas HTMLのメニュー名をそのまま使っています。メニューでは要素ページを「Shortcodes」と呼んでいるため、HTMLテンプレートで制作した方なら、どのページも期待する場所に見つかります。WordPress版のCanvasでは、これらはどれもショートコードではありません。各要素は登録済みのブロックで、オプションはサイドバーで設定し、標準のブロックマークアップとして保存されます。角括弧のタグを覚えておく必要はありません。

- [Canvas HTMLから引き継がれるもの](https://canvaswp.com/ja/canvas-html-to-wordpress/)

その他のテンプレート

## ライブラリのその他すべて

- [ページテンプレート 13](https://canvaswp.com/ja/templates/page-templates/)
- [ポートフォリオレイアウト 27](https://canvaswp.com/ja/templates/portfolio/)
- [ブログレイアウト 35](https://canvaswp.com/ja/templates/blog/)
- [ショップレイアウト 9](https://canvaswp.com/ja/templates/shop/)