> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://con-one.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# カラムをタブで切り替えて表示する方法（タブモード）

カラムを「タブモード」にすると、見る人がタブをクリックして、表示する内容を切り替えられるようになります。
同じ場所に複数の内容をまとめられるので、情報が多くてもページがすっきりします。
**こんなときに**
* 料金プランを「月額」「年額」で切り替えて見せたいとき
* コースやサービスごとに、内容を分けて紹介したいとき
* よくある質問を、カテゴリーごとにまとめたいとき
### スライダーモードとの違い
|  | 切り替え方 | 向いている内容 |
| タブモード | 見る人がタブを**クリック**して切り替える | 見る人が自分で選びたい内容（プラン、コース別など） |
| スライダーモード | 矢印や**自動**でスライドして切り替わる | 順番に見てほしい内容（お客様の声、事例など） |
### ① タブモードをオンにする
1. タブにしたいカラムにマウスを乗せると、上に「カラム」のラベルが表示されます。
2. ラベルの**歯車**をクリックします。
3. 「行設定を編集」が開きます。下に「スライダーモード」と「タブモード」の2つのスイッチがあります。
4. 「**タブモード**」をオンにします。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_p5uzii.png)

オンにすると、カラムの下にタブを編集するためのメニューが表示されます。
最初はタブが「Tab 1」の1つだけなので、「＋」でタブを追加していきます（→②）。
※スライダーモードとタブモードは、どちらか一方だけ選べます。タブモードをオンにすると、スライダーモードのスイッチは表示されなくなります。
※タブモードは、カラムごとに設定します。オンにしたカラムだけがタブ表示になります。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_1jdp758.png)

### 公開ページでの見え方
公開ページでは、カラムの上にタブが並びます。見る人がタブをクリックすると、下の内容が切り替わります。
選ばれているタブは白く表示されるので、今どのタブを見ているかがひと目で分かります。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_otnuqk.png)

### ② タブメニューの使い方
| ボタン | できること |
| **Tab 1・Tab 2…（タブの名前）** | クリックすると、そのタブに切り替わって中身を編集できます |
| **＋** | 新しいタブを追加します |
| **複製（四角が重なったアイコン）** | 表示中のタブを複製します |
| **ゴミ箱** | 表示中のタブを削除します（タブが2つ以上のときに表示されます） |
| **歯車** | タブの設定画面を開きます |
**おすすめの作り方**
1つ目のタブのデザインを整えてから「複製」で増やし、文章や画像だけ差し替えると、デザインのそろったタブを早く作れます。
### ③ タブの名前とデザインを設定する
1. タブメニューで、設定したいタブをクリックして選びます。
2. タブメニューの**歯車**をクリックします。
3. タブの設定画面が開きます。
※設定画面の上には「**スライダーの設定**」と表示されますが、これはタブの設定画面です。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_x0urjl.png)

設定画面の項目は、**タブごとの設定**と**すべてのタブ共通の設定**に分かれています。
#### タブごとの設定
ここは、タブ1つずつに設定します。2つ目以降のタブも、タブメニューでタブを選び直してから歯車を開いて設定してください。
* **タブスタイル**：タブの形を選びます（例：ピル＝丸みのあるボタン型、下線＝文字の下に線が付く型）
* **タブタイトル**：タブに表示する名前です。ここで名前を変えます。
* **タブアイコン**：「＋」から、タブの名前の横にアイコンを付けられます。
* **バッジピル**：タブに小さなラベルを付けられます（例：「人気」「おすすめ」）。入力は任意です。
※名前を変えないままだと、公開ページには「Tab 1」「Tab 2」と英語で表示されます。必ず中身に合った名前に変えましょう。
（例：「月額プラン」「年額プラン」、「初心者向け」「経験者向け」）
※タブスタイルもタブごとの設定です。見た目をそろえたいときは、すべてのタブで同じスタイルを選んでください。

#### すべてのタブ共通の設定
ここを変えると、すべてのタブに反映されます。
**色**
* **タブ背景**：選ばれていないタブの背景色
* **アクティブタブの背景**：選ばれているタブの背景色
* **タブテキスト**：選ばれていないタブの文字の色
* **アクティブタブのテキスト**：選ばれているタブの文字の色
* **タブホバー時の背景色**：マウスを乗せたときの背景色
* **タブホバー時のテキストの色**：マウスを乗せたときの文字の色
**文字**
* **フォントサイズ**：タブの文字の大きさ
* **ボールド**：チェックを入れると、タブの文字が太字になります
* **タブフォント**：タブの文字のフォント
**タブモード**
設定画面の一番下からも、タブモードのオン・オフを切り替えられます。
### ④ 保存する
設定が終わったら、画面右上の「保存」をクリックして完了です。
### ポイント
* **タブモードは、カラムごとに設定できます。**
* **最初に表示されるのは1つ目のタブです。** いちばん見てほしい内容を、1つ目に置きましょう。
* **タブの数は2〜4つくらいがおすすめです。** 多すぎると、スマホでタブが並びきらず、選びにくくなります。
* **「アクティブタブ」の色は、ほかのタブとはっきり違う色にしましょう。** 今どのタブを見ているかが分かりやすくなります。
* **おすすめのプランには「バッジピル」で「人気」などのラベルを付けると、目に留まりやすくなります。**
* 公開前に、プレビュー（目のアイコン）でタブが切り替わるか、パソコンとスマホの両方で確認しましょう。





# ページビルダー一覧


[ページビルダー概要](/ja/article/44oa44o844k444ot44or44oa44o85qac6kab-uugfod/)

[ページの追加方法](/ja/article/44oa44o844k444gu6l95yqg5pa55rov-ngabyy/)

[ブロックの活用方法](/ja/article/44ow44ot44od44kv44gu5rs755so5pa55rov-wddhzi/)

[ウィジェット追加方法](/ja/article/44km44kj44k344kz44kn44od44oi6l95yqg5pa55rov-uypahx/)

[SEOの設定方法](/ja/article/seo-12zy0jh/)

[スマホサイズのデザイン設定方法](/ja/article/44k544oe44ob44k144kk44k644gu44oh44k244kk44oz6kit5a6a5pa55rov-79dyz5/)

[購入者限定ページの作成手順](/ja/article/6lo85ywl6icf6zmq5a6a44oa44o844k444gu5l2c5oiq5oml6acg-5ohl1f/)

[ポートフォリオ機能で商品一覧・顧客の声を作成！](/ja/article/44ob44ka44o844oi44ov44kp44oq44kq5qmf6io944gn5zwg5zob5lia6kan44o76agn5a6i44gu5aow44ks5l2c5oiq77yb-gdxfxi/)




[ヘッダーを活用してホームページのメニューを最適化しよう！](/ja/article/44oy44od44k44kz44o844ks5rs755so44gx44gm44ob44o844og44oa44o844k444gu44oh44ol44ol44o844ks5pya6ygp5yyw44gx44ki44gg77yb-1bx306j/)

[コピー（複製）の仕方（ウィジェットやブロック）](https://con-one.crisp.help/ja/article/44kz44ou44o877yi6ksh6ko977yj44gu5luv5pa577yi44km44kj44k444kn44od44oi44ke44ow44ot44od44kv77yj-khqvln/)

[フッターを活用してユーザーを誘導しよう！](https://con-one.crisp.help/ja/article/44ov44od44k44o844ks5rs755so44gx44gm44om44o844k244o844ks6kqy5bco44gx44ki44gg77yb-hy2apq/)

[ページへのアクセス設定](https://con-one.crisp.help/ja/article/44oa44o844k444g444gu44ki44kv44k744k56kit5a6a-1b5nciv/)

[AIで作ったLPやウェブサイトをコネワンに表示させる方法](https://con-one.crisp.help/ja/article/ailp-1silgif/)

[ファビコンとSNS共有画像](https://con-one.crisp.help/ja/article/sns-xf0jub/)

[ファイルマネージャー](https://con-one.crisp.help/ja/article/44ov44kh44kk44or44oe44on44o844k444oj44o8-14r6elu/)

[ブロックをスライダーで表示する方法（スライダーモード）](https://con-one.crisp.help/ja/article/44ow44ot44od44kv44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-jvpdc5/)

[ブロックの表示設定（見る人・日時・国などで表示を切り替える）](https://con-one.crisp.help/ja/article/44ow44ot44od44kv44gu6kgo56s66kit5a6a77yi6kal44kl5lq644o75pel5pmc44o75zu944gq44gp44gn6kgo56s644ks5yih44kk5pu44gi44kl77yj-1qrodnx/)

[カラムの基本設定](https://con-one.crisp.help/ja/article/44kr44op44og5z65pysjuocsoodreodvoodkoodqocqodqeodooiorewumg-bf216w/)

[グローバルカラムの設定](https://con-one.crisp.help/ja/article/44kw44ot44o844oq44or44kr44op44og44gu6kit5a6a-6l3pnn/)

[カラムをタブで切り替えて表示する方法（タブモード）](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k44ow44gn5yih44kk5pu44gi44gm6kgo56s644gz44kl5pa55rov77yi44k44ow44oi44o844oj77yj-570b6r/)

[カラムをスライダーで表示する方法（スライダーモード）](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-vrz6u/)