fbk-anchor

アンカーリンクを設置したいモジュールの上に配置

  • ヘッダーの下に隠れないようになります
  • 弊社作成「section系」モジュールにもアンカーリンクの機能があるので、現在はあまり使わない

fbk-page--blog_category

特定のブログのタグを全て表示

  • 主にブログで使用します

fbk-page--blog_category_static

上のモジュールと同じデザインで、自由にリンクを設定できる
特定のタグだけ表示したい場合に使用

  • 主にブログで使用します

fbk-page--bread

パンくずリスト

  • HOME      >      
  • module2026

fbk-page--title

ページタイトル

  • 背景設定可能(画像・色)
  • テキスト位置調整可能(左・中央・右)
  • リード文が未入力の場合は非表示になる

タイトル

リード文章

fbk-page--hero

リッチテキスト領域。

noimage@2x
noimage@2x

fbk-section

基本のモジュールで、以降に続く「fbk-section--〇〇」と名前がついているモジュールでは以下4つの共通の機能を持っている

  • オプション(上下余白。背景、設定など)
  • ヘッダー(タイトル、サブタイトル、リード文)
  • 追加コンテンツ(リッチテキスト、サブボタン)
  • フッター(ボタン)
  • タイトルとモジュールコンテンツ、もしくはモジュールコンテンツを枠で囲うことが可能
  • 上下余白、左右幅を設定可能
  • フッターでボタンを設置可能(cta設置可能)

また、ほとんどのリッチテキストには、追加でテキストリンク、ボタンリンク、ctaリンクが設定可能

タイトル

サブタイトル

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

見出し6

fbk-section--accordion

アコーディオン

  • 開く前 : リッチテキスト / 開いた後 : リッチテキスト

タイトル

リッチテキスト領域。

リッチテキスト領域。

fbk-section--accordion_table

アコーディオン

  • 開く前 : テキスト / 開いた後 : テーブル・リッチテキスト

タイトル

カテゴリタイトル

テキスト

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

fbk-section--accordion_text

アコーディオン

  • 開く前 : テキスト / 開いた後 : リッチテキスト

タイトル

カテゴリタイトル

テキスト

リッチテキスト領域。

fbk-section--banner_blocks

このデザインでリンク設定(画像も必要)

fbk-section--block_v2

テキストアイコン設定可能
右側はリッチテキスト

タイトル

アイコン

リッチテキスト領域。

アイコン

リッチテキスト領域。

fbk-section--card

画像とリッチテキストでのリンク設定

  • PCは2〜5カラムまで、SPは1〜3カラムまで変更可能

fbk-section--card_latest_post_multi_blogs

複数のブログを選んで各ブログの最新記事を表示

  • PCは2〜5カラムまで、SPは1〜3カラムまで変更可能

タイトル

fbk-section--card_modal

画像とリッチテキストをクリックするとモーダル/ポップアップが開く

  • PCは2〜5カラムまで、SPは1〜3カラムまで変更可能
  • モーダル内はリッチテキスト

タイトル

fbk-section--carousel

リッチテキストのカルーセル

  • PCは2〜4カラムまで設定可能、SPは1カラム

fbk-section--column

PCは横並び、SPは縦並びになる

  • PC時の左右のコンテンツはそれぞれ指定可能
  • PC時は左右余白、SP時は上下余白が設定可能
  • それぞれはリッチテキスト
  • 更に、左右のセットごと等倍2カラムまで変更可能
  • アイコン画像とテキストなどの表現にも使用可能

タイトル

リッチテキスト領域。

リッチテキスト領域。

fbk-section--comment

タイトル

fbk-section--directory_nav

リンクが設定可能

  • ページ内リンクや、ディレクトリ内リンクなどに使用想定

fbk-section--faq

FAQ用モジュール

  • カテゴリタイトルは非表示可能
  • Qはテキスト、Aはリッチテキスト

タイトル

カテゴリタイトル

Q.

質問テキスト

A.

リッチテキスト領域。

Q.

質問テキスト

A.

リッチテキスト領域。

fbk-section--flow

フロー用モジュール

  • 数字は自動付与
  • コンテンツ部分はリッチテキスト

タイトル

  • 01

    リッチテキスト領域。

  • 02

    リッチテキスト領域。

  • 03

    リッチテキスト領域。

  • 04

    リッチテキスト領域。

fbk-section--indent_icon_list

タイトル

fbk-section--interview_accordion

インタビュー想定アコーディオン

  • 左は画像、右はリッチテキスト、開いた中はリッチテキスト
  • インタビュー想定だが、他用途でも使用可能

タイトル

noimage@2x

リッチテキスト領域。

リッチテキスト領域。

fbk-section--loop_slider

5枚の画像がループでスライドする

  • コンテンツの幅を画面幅に変更する必要あり

タイトル

noimage@2x
noimage@2x
noimage@2x
noimage@2x
noimage@2x

fbk-section--responsive_image

PCとSPで違う画像を使用したい場合に使用

タイトル

fbk-section--row

リッチテキストの等倍カラム表示

  • PCは2〜5カラムまで、SPは1〜3カラムまで変更可能
  • それぞれのカラムに枠の付与可能(一括指定)

タイトル

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

fbk-section--scroll_table

リッチテキスト作成のテーブル表用モジュールで、SP時に左右スクロールで表示される

  • リッチテキストのテーブルは崩れやすいので、「fbk-section--table_pro」の使用推奨

タイトル

テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト

 

fbk-section--slider

画像スライダー

タイトル

  • noimage@2x
  • noimage@2x

fbk-section--slider_block

リッチテキストスライダー

タイトル

  • noimage@2x
  • noimage@2x

fbk-section--tab_navigation

タブ切り替え可能なボタンナビゲーション

fbk-section--table

シンプルテーブル用モジュール

  • 2カラムのテーブルが作成可能
  • 全ての入力要素はリッチテキスト

タイトル

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

fbk-section--table_pro

複雑なテーブルが作成可能

  • 2カラム以上のテーブル作成可能
  • 全ての入力要素はリッチテキスト
  • 全ての入力要素に対して、項目、内容の選択可能
  • テーブルヘッダー、テーブルボディーが設定可能

タイトル

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

リッチテキスト領域。

fbk-section--tags

ブログのタグが表示される

  • ブログを選択して使用