「タブコンテンツ」の設定方法について

タブ形式でコンテンツを表示する

「タブコンテンツ」は、長くなってしまったコンテンツをタブに分けて整理する事のできるパーツです。
特にコンテンツの量が多いサイトの場合、縦に異常に長いページになってしまいがちです。
このようなサイトでは、せっかくのコンテンツが最後まで読まれず、別のサイトにされやすい傾向にあります。

このような問題を解決しい場合「タブコンテンツ」を使って、長いコンンツをタブ形式でまとめてみてください。
タブを切り替えるだけで複数の情報を見ることができるため、
訪問者が目的の情報に辿り着きやすくなり、結果的に成果も上がりやすくなります。

ページのコンテンツ量が多いサイトを「ユーザーフレンドリー」に仕上げたい場合に効果を発揮する機能です。

パーツメニュー内の「画像レイアウト」→「画像スライダーの新規追加」を選択する

ページ内に「タブコンテンツ」を設置したい場合、文字装飾メニュー3段目にある「パーツ」メニューを開き、
タブコンテンツ→「タブコンテンツーの追加」を選択してください。

タブのタイトル入力する

下図のようなタブの設定画面が表示されます。こちらからでタブコンテンツの設定を行います。

デフォルトでは、3つのタブが設定できるようになっていますが、画面右上にある「+」マーク、「-」マークでタブの増減を行うことができ、最大で5つのタブまで設定することが可能です。

タブのタイトルを指定する

最初にタブのタイトル部分を指定します。
ここで指定したテキストは、下図の赤丸部分に表示されますので、簡潔なテキストにするのが適切です。

タブのコンテンツを入力する

タイトルを指定した後は、コンテンツを指定していきます。
記事本文と同じ様に文字装飾メニューを利用しながら、タブページ内に表示コンテンツを入力してください。

コンテンツ内はHTMLタグを自由に指定することができます。

コンテンツが指定されていない場合、そのタブページは表示されません。

(必要に応じて)アイコン画像を設定する

タブのヘッダー部分にアイコン画像を指定したい場合は、画面右上の「アイコン画像」の項目で設定を行います。
右側にある「画像」ボタンまたは▼をクリックしてアイコン画像を設定してください。

同様の操作でコンテンツ2以降の設定を行う

設定したいタブを選択し、同様にタイトル、コンテンツ等の設定を行ってください。

前述した通り、表示するアイテムは最大で5個まで設定することが可能です。
アイテムの増減を行いたい場合は右上の「＋」、「－」ボタンを選択してください。
また、表示順を変更したい場合は「←」、「→」ボタンを選択してください

(必要に応じて)レイアウトの調整を行う

タブのデザインやカラーなどを変更したい場合は、上部の「オプション」タブから変更可能です。

デザイン	タブ全体のデザインを変更することが可能です。デザイン一覧はこちらのページにまとめていますのでご確認ください。
角丸	タブのヘッダー部分を角丸にしたい場合は、こちらをオンの状態にしてください。

配色	タブ全体のカラーを変更することが可能です。デフォルトの場合は「ブルー」が適用されますが、全12色のカラーバリエーションから選択することができます。
淡色	「配色」で選んだカラーを淡い色合いに変更したい場合、こちらの項目をオンの状態にしてください。

プレビューでレイアウトを確認する

各種設定が完了したら、「プレビュー」を選択することでタブコンテンツのレイアウトを確認することができます。
デザインやレイアウト等を確認し、適宜調整を行って下さい。