タブパネル設定
「weluka タブパネルウィジェット」では「タブパネル」の配置、各タブパネル内コンテンツの編集、表示スタイルに関する設定を行うことができます。
「ドラッグウィジェットメニュー」の「appsアイコン」クリック ⇒ 「タブパネル」をドラッグ＆ドロップで配置します。
配置された「タブパネルウィジェット」をクリックし表示される水色枠の「編集」をクリックすることで、「タブパネル設定画面」が表示されます。
一般設定
タブデザインに関する設定を行います。
- 「ナビタイプ」
- タブの表示を Tab / Button から選べます。
- その際、ナビを均等に表示する設定も選べます。
- 「表示形式」
- タブのデザインを 四角 / 角丸 で選べます。
- その際、パネルを枠線で囲みのする設定も選べます。
パネル設定
タブの追加や削除、編集の設定が行えます。
- 「Panels」
- ・作成されたタブは、ここに表示されてゆきます。
- ・ドラッグ＆ドロップで順番を入れ替えることができます。
- ・×をクリックすることで作成したタブを削除することができます。
- 「Tab Title」
- タブタイトルに表示を入力します。
- 「ヴィジュアルエディタ」
- タブ内容（お知らせ、告知、案内）などを入力してください。ヴィジュアルエディタでフォントサイズ、色等のスタイルを設定し、より魅力的な見映えにすることが可能です。
タブパネルを作成
- 「New」
- 新規にタブを作成します。作成されたタブは左枠に表示されてゆきます。
- 「登録」
- 作成、編集されたタブの内容は登録ボタンを押すことで更新されます。
高度な設定
- 「Margin(px)」
メニューコンテンツラッパーのマージン（上下左右）を設定します。単位はピクセルとなります。
例）TOP（上）に30pxのマージンを設定したい場合、「Top」に30と入力します。
- 「Padding(px)」
メニューコンテンツラッパーのパディング（上下左右）を設定します。単位はピクセルとなります。
例）TOP（上）に30pxのパディングを設定したい場合、「Top」に30と入力します。
- 「Css Selectors Class」
メニューコンテンツラッパーのcss class名を設定します。
Custom Cssに設定することで表示のカスタマイズが行えます。Custom Cssについては「welukaテーマ設定」を参照ください。
例）tabpanelというclass名を指定したい場合、tabpanelと入力します。複数のclassを設定する場合は半角スペースで区切ってください。
Custom Css 設定例
.tabpanel li { font-size : 30px; }
Responsive
設定画面終了
変更を加えた場合は必ず「保存」ボタンをクリックして、変更を確定してください。「保存」ボタンは、welukaビルダーに各種設定の変更を反映させるためのボタンです。変更を反映させたくない場合は「閉じる」ボタンをクリックしてください。なお、この「保存」ボタンでは、編集中のページデータ全体の保存は行われません。ページデータ全体の保存を行う場合は「ビルダーメニュー内「保存」もしくは「公開」ボタンをクリックしてください。
- 「保存」ボタン
- 画面を閉じる。設定内容をビルダー上に反映します。
- 「閉じる」ボタン
- 画面を閉じる。設定内容をビルダー上に反映しません。
