WYSIWYG Editor は Responsive Table に対応し、さまざまな画面サイズにおいて表データを柔軟に表示できるようになりました。
エディターで表を作成する際、以下の 2 種類の表示形式を選択できます。
| Squish Table | 画面サイズが縮小された際に、各列の幅を自動的に調整するテーブル表示形式です。 テーブル全体が常に画面幅内に収まり、横スクロールは発生しません。 内容が比較的短く、レイアウトの一体感を維持したい表に適しています。 |
| Scroll Table | テーブルの最小幅を維持する表示形式です。 画面幅が不足する場合、横スクロールバーが表示され、ユーザーはスクロール操作で残りの内容を閲覧できます。 列数の多いデータ表や、表示構造の正確性を保ちたい場合に適しています。 |
Floating Banner（フローティングバナー）は、広告や重要なお知らせを固定表示するためのコンポーネントです。
ユーザーがページをスクロールしている間も常に画面上に表示され、視界から外れることはありません。
アクセス方法content_copycheck_circle
管理画面 ▶ カスタマイズ ▶ ウィジェット ▶ Floating Banner ▶ Add Banner
設定content_copycheck_circle
| Active | バナーの表示／非表示を切り替えます。 |
| Only HP | トップページのみにバナーを表示します。 |
| Close BTN | 閉じるボタンを表示します。 ユーザーが任意でバナーを閉じることが可能になります。 |
| ID | バナーにカスタム ID を設定します。 CSS や JavaScript による個別制御が必要な場合に有効です。 |
| Class | バナーにカスタム CSS クラスを設定します。 高度なデザイン調整に対応します。 |
| PC Banner | デスクトップ版に表示するバナー画像を設定します。 |
| SP Banner | モバイル版に表示するバナー画像を設定します。 PC とモバイルで同一バナーを使用する場合は、PC Banner のみ設定すれば全デバイスに適用されます。 |
| Type | バナークリック時の動作を指定します。現在、以下の 2 種類に対応しています。 |
| LINK : バナーをリンクとして動作させます。クリック時に、設定した URL へ遷移します。 | |
| AI-CHAT : クリック時に AI チャットウィンドウを開きます。 要件：本モードを利用するには、事前に NOMOCa AI Chat API との接続が必要です。 |
|
| Alignment | 画面上でのバナー表示位置を指定します。 |
| Width | バナーの横幅を設定します。 |
| Bottom | 画面下端からバナーまでの距離を設定します。 |
| Left | 画面左端からバナーまでの距離を設定します。 |
| Right | 画面右端からバナーまでの距離を設定します。 |
| URL | バナークリック時に開くリンク先 URL を設定します（Type が LINK の場合に適用）。 |
Author Box は、記事やコンテンツページに著者情報を表示するための機能です。
通常、このコンポーネントは記事の末尾に配置され、読者がコンテンツの作成者を確認できるようにします。これにより、Webサイトの透明性と信頼性の向上につながります。
- Wysiwygエディターのサポート OK !
設定content_copycheck_circle
| Author Avatar | 著者のプロフィール画像です。 Author Box 内に表示され、著者を視覚的に認識しやすくします。 |
| Author Name | 著者の名前を設定します。 |
| Author Position | 著者の役職または役割を設定します。 |
| Author Organization | 著者が所属する組織または会社名を設定します。 |
同じ Author Box を複数の記事やページで表示したい場合、または特定のカテゴリーに対して表示したい場合は、Repeated Contents 機能と組み合わせて使用することができます。
Carousel は、複数のコンテンツ（画像、カード、テキストなど）を同一領域内に表示し、ユーザーがスライドを切り替えながら閲覧できる UI コンポーネントです。
本機能は splide.jsライブラリをベースに構築されています。
設定content_copycheck_circle
| Assets : コンテンツ設定。Carousel に表示する画像一覧を追加します。 | |
|---|---|
| Media Type | 現在、以下の 2 種類を選択可能です。 Image : 単純な画像のみを表示する Carousel です。 |
| Image + Link: 各画像に URL を設定でき、クリックすると指定リンクへ遷移します。 | |
| General（基本設定） | |
| Fade | 通常の横スライドではなく、フェード（フェードイン・フェードアウト）でスライドを切り替えるモードです。 |
| Auto Play | 一定時間ごとに自動で次のスライドへ切り替わります。ユーザーの操作は不要です。
|
| Auto Scroll | スライドを途切れることなく連続的に自動スクロールします。 Auto Play とは異なり、1枚ずつ切り替わるのではなく、ベルトコンベアのように滑らかに流れ続けます。
|
| Thumbnail | メイン Carousel の下部にサムネイル一覧を表示します。 ユーザーは任意のスライドを直接選択できます。 |
| Arrows | 左右のナビゲーション矢印ボタンを表示します。 ユーザーが手動でスライドを切り替えられます。
|
| Pagination | 現在のスライド位置を示すドットナビゲーションを表示します。 総スライド数および現在位置が視覚的に分かります。 |
| Column PC / TAB / SP | デバイスごと（PC・タブレット・スマートフォン）に、1画面あたりの表示スライド数を指定します。 |
| Advanced（詳細設定） | |
| ID | Carousel にカスタム ID を設定します。 |
| Class | Carousel にカスタム CSS クラスを追加します。 |
| Fixed Width | 各スライドの固定幅を指定します。 この値を設定した場合、Column PC / TAB / SP の設定は無効になります。 単位は PX または % のいずれかで指定できます。 |
| Fixed Height | 各スライドの固定高さを指定します。 この値を設定した場合、Column PC / TAB / SP の設定は無効になります。 単位は PX または % のいずれかで指定できます。 |
| Gap | スライド間の余白を指定します。 単位は PX または % のいずれかで指定できます。 |
| PerMove | 一度の操作で移動するスライド枚数を指定します。 例：1ページに3枚表示しつつ、1枚ずつ移動させることも可能です。 |
| Interval | Auto play の切り替え間隔（ミリ秒）を指定します。 |
| Speed | スライドのトランジション速度（ミリ秒）を指定します。 この設定は Auto Scroll が有効な場合に適用されます。 |
Accordion は、項目ごとにコンテンツを展開・折りたたみできる UI コンポーネントです。
すべての内容を同時に表示するのではなく、ユーザーが操作しているセクションのみを展開する仕組みにより、以下の効果が得られます。
- 表示スペースの節約
- レイアウトの整理
- 主要コンテンツへの集中度向上
- Wysiwygエディターのサポート OK !
Accordion は、FAQ、操作ガイド、製品詳細説明、または明確なグルーピングが必要なあらゆるコンテンツに適しています。
設定content_copycheck_circle
| Display Style | Accordion の表示スタイルを選択できます。 現在は 2 種類のスタイルを用意しており、さまざまなレイアウトやデザインテイストに対応可能です。 |
| Content Type | Accordion 内に表示するコンテンツの種類を指定します。 主なモードは以下の 2 種類です： |
| Simple : 基本的なコンテンツ表示に適しています。 含まれる要素：
主な用途：
|
|
| Advanced : 複雑な内容や柔軟なレイアウトが必要な場合に適しています。 WYSIWYG エディターを使用し、以下の要素を挿入できます。
主な用途：
|
Simple と Advanced の使い分け
Q&A形式のシンプルな内容であれば、システムを軽量かつミニマルに保つために Simple の使用を推奨します。
マルチメディア要素や柔軟なレイアウト構築が必要な場合は、WYSIWYG エディターの機能を最大限活用できる Advanced を選択してください。