モジュールリストページ

サイトで使用できる共通モジュールをまとめたページです。
ページ作成の際にご活用ください。
※ページ固有のモジュールについては、このページに掲載しておりません。
 
page--title

各ページのタイトルです。

タイトル

page--hero

メインビジュアルなどで使用します。

キャッチコピーが入ります。

キャッチコピーが入りますキャッチコピーが入ります。

背景画像
section

ここからは、ページにコンテンツを追加する際に使用する「section」関連モジュールの説明をします。

フブキが提供するサイトの多くのモジュールは、この「section」モジュールを元に作成されております。

まずは、基本的な「section」モジュールです。

タイトル

リード文章が入りますリード文章が入りますリード文章が入りますリード文章が入りますリード文章が入りますリード文章が入りますリード文章が入りますリード文章が入りますリード文章が入りますリード文章が入りますリード文章が入ります。

ここからがコンテンツの内容になります。

シンプルなレイアウトであれば、リッチテキストで表現可能です。

複雑なレイアウトの場合はソースコードでの編集も可能です。

 

「section--〇〇〇〇」モジュールについて

「section--〇〇〇〇」モジュールとは、この「section」モジュールを含む、「section」モジュールを元にしたモジュール。

「セクションヘッダー」と「オプション」は共通項目です。

共通項目以外が「section--〇〇〇〇」のコンテンツで、「section--〇〇〇〇」毎に表現が変わってきます。

 

セクションヘッダーについて

セクションヘッダーは「section-〇〇〇〇」モジュールの基本的な機能で、「タイトル」「リード文」の設定が可能です。

この項目を非表示にする場合は、「タイトル」は未入力に、「リード文」は「タイトルの下にリード文を表示する」を「表示しない」にする事で可能です。

 

オプションについて

オプションも「section-〇〇〇〇」モジュールの基本的な機能になります。

背景に色や写真の追加、上下余白の調整、コンテンツ幅の調整、タイトルの色や飾りの調整などが可能です。

「セクションタグ選択」については、開発者用の項目です。特に変更の必要はありません。

section--banners

バナーが二つ並ぶ「section」関連モジュールです。

section--buttons

ボタンが横に2に並ぶ「section」関連モジュールです。

section--card

画像と文章が縦に並ぶコンテンツが横三列（PC）、横二列（SP）に並ぶ「section」関連モジュールです。

タイトル

<div>私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を</div>のサムネイル

私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を

<div>私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を</div>のサムネイル

私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を

<div>私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を</div>のサムネイル

私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を

section--check-list-board

チェックアイコン付きリストの「section」関連モジュールです。

タイトル

  • ✓ テキスト01
  • ✓ テキスト02
  • ✓ テキスト03
  • ✓ テキスト04
section--feature

アイコン、タイトル、テキストをひとつのブロックとする「section」関連モジュールです。

背景と左右幅はオプションで設定してます。

タイトル

タイトルが入ります。のアイコン

タイトルが入ります。

テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります。

タイトルが入ります2。のアイコン

タイトルが入ります2。

テキストが入りますテキストが入りますテキストが入りますテキストが入ります。

section--images

画像が4つ並ぶ「section」関連モジュールです。

タイトル

mission01@2x
mission02@2x
mission03@2x
mission04@2x
foot--products

タブでコンテンツを切り替えます。

ページコンテンツとフッターの間に配置する「foot--〇〇」共通モジュールです。

編集はこちらから

foot--tab-nav

タブでコンテンツを切り替えます。

ページコンテンツとフッターの間に配置する「foot--〇〇」共通モジュールです。

編集はこちらから

foot--interview

インタビュー記事を表示します

ページコンテンツとフッターの間に配置する「foot--〇〇」共通モジュールです。

編集はこちらから

foot--contact

お問い合わせへのボタンを表示します

ページコンテンツとフッターの間に配置する「foot--〇〇」共通モジュールです。

編集はこちらから

お問い合わせ

製品、サービスについてのお問い合わせを受け付けています。お気軽にお問い合わせください。

お問い合わせ