---
title: "コードコンポーネントの扱い方"
slug: "working-with-code-components"
abstract: "コードコンポーネントおよびそのバリエーションは、ページ内のウェブページを作成するためにコンテンツエディターで作成・設定されます。"
---
# コードコンポーネントの扱い方

コードコンポーネントは、ページビルダーでウェブページを作成するためにContent Editorで作成されます。一部のコードコンポーネントはバリアントをサポートしています。バリアントはコンポーネントの見た目を変えたり、異なるコンテンツを表示したりします。

このトピックでリストアップされているコードコンポーネントは、Page builderの左側のペインで箱から出して提供できます。以下の表で、**Variant**列に **「yes**」がある場合、そのコンポーネントがバリアントをサポートしていることを意味します。

コードコンポーネントはコンテンツエディターやページビルダーで設定できます。開発者はコンテンツエディターで追加のカスタムコードコンポーネントを作成できます。

## メディア

**構成要素**

**バリアント**

**概要**

[画像](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/add-an-image-to-a-page.html)

はい

メディアライブラリから選択した画像をページに追加します。画像にはキャプション、オルタナティブテキスト、リンクとして使う設定も可能です。

## ナビゲーション

**構成要素**

**バリアント**

**概要**

[リンクリスト](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/structuring-a-page/manage-items,-rows,-and-columns-settings.html)

はい

タイトル、リンク、テキストを含むアイテムリストを表示します。

ナビゲーション

いいえ

ナビゲーションメニューを生成します。

## ページ内容

**構成要素**

**バリエーション**

**概要**

[ページ内容](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/creating-webpages/edit-a-page-s-content.html)

はい

ページの特定のフィールドを表示します。

プロモーション

はい

画像[、](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/add-an-image-to-a-page.html)[リンク](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/add-a-link-to-a-page.html)、[テキスト](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/add-rich-text-to-a-page.html)要素で構成されています。

[リッチテキスト](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/add-rich-text-to-a-page.html)

はい

ページ上にフォーマット済みのテキストを追加します。HTMLタグを使ってテキストを書くことができます。

[タイトル](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/creating-webpages/edit-a-page-s-content.html)

はい

現在のページのタイトルまたは副題を表示します。

## ページ構造

**構成要素**

**バリアント**

**概要**

[コンテナ](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/add-a-background-to-a-page.html)

いいえ

追加のCSSスタイリングや背景画像を追加できる他のコンポーネントのラッパーです。

[ロウスプリッター](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/structuring-a-page/divide-your-page-content-into-rows.html)

いいえ

ページをx行数に分割し、他のコンポーネントのプレースホルダーとして機能します。

[コラムスプリッター](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/structuring-a-page/divide-your-page-content-into-columns.html)

いいえ

ページをx列に分割し、他のコンポーネントのプレースホルダーとして機能します。