コンポーネント一覧
コンポーネントは汎用テンプレート内で使用することができます。
基本ブロック
メディア（画像/動画/複数画像）、見出し、本文、リンクがセットになったブロックです。
基本_1カラム
-
-
画像キャプション
-
キャプションが入ったり入らなかったりする場合もあります
-
タイトル（画像下パターン）
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
pが連続すると上にマージンが空きます。（文章を分けたいときに使います）
- 汎用リンク（ノーマル）
- リンク先の拡張子がpdfのとき/.pdfクラスがついているときに自動でPDFアイコンになります※別窓アイコンは付きません
- aタグにtarget="_blank"がついているとき自動で別窓アイコンがつきます
- aタグにaタグにdownload属性がついているとき / .downloadクラスを付けたとき / 拡張子.zip、.jpg、.pngのときにダウンロードアイコンがつきます
- .excelクラスをつけたとき/拡張子.xlsxもしくは.xlsのときにエクセルアイコンがつきます
- .powerpointクラスをつけたとき/拡張子.pptもしくは.pptxのときにパワポアイコンがつきます
- .wordクラスをつけたとき/拡張子.docもしくは.docxのときにワードアイコンがつきます
-
-
タイトル（画像上パターン）
-
画像キャプション
-
キャプションが入ったり入らなかったりする場合もあります
-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-
基本_2カラム
-
-
画像キャプション
タイトル（画像下パターン）
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-
-
画像キャプション
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-
タイトル（画像上パターン）
-
画像キャプション
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-
-
タイトル（画像上パターン）
画像キャプション
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
基本_3カラム
-
-
画像キャプション
-
画像キャプション
-
画像キャプション
タイトル（ここにはリンクは入りません）
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-
-
-
画像キャプション
-
画像キャプション
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-
-
タイトル（ここにはリンクは入りません）
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-
基本_4カラム
-
-
画像キャプション
タイトル
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
-
-
-
画像キャプション
-
画像キャプション
-
画像キャプション
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
-
-
-
画像キャプション
タイトル
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
-
-
-
画像キャプション
-
-
-
画像キャプション
-
-
-
画像キャプション
タイトル
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
-
基本_6カラム
-
画像キャプション
タイトル
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-
タイトル
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-
画像キャプション
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-
タイトル
-
画像キャプション
-
カテゴリブロック
下層ページへの移動など、ページ遷移する際の導線として使用するブロックです、
カテゴリ_1カラム
タイトル（リンクのみ）
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
カテゴリ_2カラム
タイトル（別窓リンク）
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
カテゴリ_3カラム
Dummy title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Dummy title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Dummy title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Cate_col 4 / カテゴリ_4カラム
Dummy title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Dummy title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Dummy title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Dummy title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
メディアブロック
メディア（画像/動画/複数画像）とテキスト（見出し、本文、リンク）を横並びにしたブロックです。
メディア_左
-
ここにキャプションが入ります
ここにはタイトルがはいります
このコンポーネント（.mod-cp-img-text-lt）はモバイルのときにメディアが上に表示されます。このコンポーネント（.mod-cp-img-text-lt）はモバイルのときにメディアがテキストの上に表示されます。このコンポーネント（.mod-cp-img-text-lt）はモバイルのときにメディアがテキストの上に表示されます。
画像キャプション
ここにはタイトルがはいります
このコンポーネント（.mod-cp-img-text-lb）はモバイルのときにメディアがテキストの下に表示されます。このコンポーネント（.mod-cp-img-text-lb）はモバイルのときにメディアがテキストの下に表示されます。
メディア_右
-
ここにキャプションが入ります
ここにはタイトルがはいります
このコンポーネント（.mod-cp-img-text-rt）はモバイルのときにメディアが上に表示されます。このコンポーネント（.mod-cp-img-text-rt）はモバイルのときにメディアがテキストの上に表示されます。このコンポーネント（.mod-cp-img-text-rt）はモバイルのときにメディアがテキストの上に表示されます。
-
ここに1枚目のキャプションが入ります
-
ここに2枚目のキャプションが入ります
-
-
ここにキャプションが入ります
ここにはタイトルがはいります
このコンポーネント（.mod-cp-img-text-rb）はモバイルのときにメディアが上に表示されます。このコンポーネント（.mod-cp-img-text-rb）はモバイルのときにメディアがテキストの上に表示されます。このコンポーネント（.mod-cp-img-text-rb）はモバイルのときにメディアがテキストの上に表示されます。
見出しブロック
H2見出し（ノーマル）
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
H2見出し（ラージ）
H3見出し
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
H4見出し
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
本文ブロック
本文_汎用
これは本文テキストです。このテキストはダミーです。文中リンクはこうなります。別窓リンク。PDFリンク。
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
本文_大
これは本文テキスト（ラージ）です。使用する際は本文のコンポーネントに.largeのクラスをつけます。
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
本文_キャプション
これはキャプション用テキストです。このテキストはダミーです。
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
本文_太字
これは本文テキスト（ボールド）です。使用する際は本文のコンポーネントに.boldのクラスをつけます。
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
リンクブロック
リンク_汎用
- 汎用リンク（ノーマル）
- リンク先の拡張子がpdfのとき/.pdfクラスがついているときに自動でPDFアイコンになります※別窓アイコンは付きません
- aタグにtarget="_blank"がついているとき自動で別窓アイコンがつきます
- aタグにaタグにdownload属性がついているとき / .downloadクラスを付けたとき / 拡張子.zip、.jpg、.pngのときにダウンロードアイコンがつきます
- .excelクラスをつけたとき/拡張子.xlsxもしくは.xlsのときにエクセルアイコンがつきます
- .powerpointクラスをつけたとき/拡張子.pptもしくは.pptxのときにパワポアイコンがつきます
- .wordクラスをつけたとき/拡張子.docもしくは.docxのときにワードアイコンがつきます
リンク_ボタン
リンク_ボタン_3カラム
※3つより少ないのときは中央寄せになります
リンク_ページ内
※数はliの数によって可変
リンク_スライダー
リンク_サムネイル
-
タイトルCaption
-
リンクでない場合
リストブロック
リスト_順序なし
-
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
-
このテキストはダミーです。このテキストはダミーです。
-
このテキストはダミーです。このテキストはダミーです。
-
このテキストはダミーです。このテキストはダミーです。
-
このテキストはダミーです。このテキストはダミーです。
リスト_順序なし_2カラム
-
このテキストはダミーです。
-
このテキストはダミーです。
リスト_順序なし_3カラム
-
このテキストはダミーです。
-
このテキストはダミーです。
リスト_順序あり
-
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
-
このテキストはダミーです。このテキストはダミーです。
-
このテキストはダミーです。このテキストはダミーです。
-
このテキストはダミーです。このテキストはダミーです。
-
このテキストはダミーです。このテキストはダミーです。
リスト_順序あり_2カラム
-
このテキストはダミーです。
-
このテキストはダミーです。
リスト_順序あり_3カラム
-
このテキストはダミーです。
-
このテキストはダミーです。
リスト_QA
-
18px Regular Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-
18px Regular Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-
18px Regular Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
メディア_画像小
-
ここにはタイトルがはいります
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy t
-
ここにはタイトルがはいります
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy t
-
ここにはタイトルがはいります
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy t
-
ここにはタイトルがはいります
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy t
装飾ブロック
ボックス_汎用_1カラム
-
ここにキャプションが入ります
ここにはタイトルがはいります
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
ボックス_本文
このテキストはダミーです
このテキストはダミーです
このテキストはダミーです
このテキストはダミーです
ボックス_本文_背景
このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。
このテキストはダミーです。このテキストはダミーです。
表組みブロック
Single
| 見出し | SIze 16px Regular |
|---|---|
| 見出し | SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular, |
| 見出し |
SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular, |
|
|
|
※キャプションが入る場合 |
| 見出し | SIze 16px Regular | SIze 16px Regular |
|---|---|---|
| 見出し | SIze 16px Regular | SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular, |
| 見出し | SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular, | SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular, |
Multi
※theadがある場合はmultiをつかってください
| 見出し1 | 見出し2 | 見出し2 |
|---|---|---|
| 見出し1 | SIze 16px Regular | SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular, |
| 見出し1 | SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular, | SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular, |
| 見出し1 | 見出し2 | 見出し3 | 見出し4 | 見出し5 |
|---|---|---|---|---|
| 内容内容 | 内容内容 | 内容内容 | 内容内容 | 内容内容 |
| 内容内容 | 内容内容 | 内容内容 | 内容内容 | 内容内容 |
| 見出し1 | 見出し2 | 見出し3 | 見出し4 | 見出し5 |
|---|---|---|---|---|
| みだし | 内容内容 | 内容内容 | 内容内容 | 内容内容 |
| みだし | 内容内容 | 内容内容 | 内容内容 | 内容内容 |
その他
チェックボックス
トグル
Title Text Lorem ipsum dummy text 24px
Free Area
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Free Area
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.