単体パーツ一覧

前提:

  • 下記デザインパーツは各カテゴリー別にフォント関連のベースデザイン設定ができます。
    • テキストパーツ…フォントファミリー、フォントサイズ、文字色、文字間、行間
    • 見出しパーツ…フォントファミリー、フォントサイズ、文字色、文字間、行間
    • ボタンパーツ…フォントサイズ、文字色 (※テキストパーツのフォントファミリー、文字間、行間が紐づけられています。)
    • タグパーツ…文字色 (※テキストパーツのフォントファミリーが紐づけられています。)
  • このページの余白は「標準」で設定しています。
  • 備考に記載している内容は、ベースデザイン設定でカスタマイズできないものです。
  • fO編集画面でフォントサイズを設定したら、SP時は一定のサイズにリサイズ調整されます。

パーツ一覧

ベースデザイン設定

複合パーツ

セクションパーツ

ー 単体パーツ ー

見出しパーツ(ベースデザイン設定内で設定できる箇所)

  • 見出し用のフォントカラー
  • 見出し用のフォントファミリー
  • 見出し用のフォントサイズ (見出しh1〜h5)
  • 見出し用の文字間
  • 見出し用の行間
  • 見出し下余白 (32px ※カラムとコンポネントの余白20pxを含む)
  • 下線・破点 (メインカラーがあたる)
  • 左線見出し&横幅100%下線見出し:ボーダーカラーは編集画面より変更可

備考:

見出しテキストから下線・破点の余白は固定

デフォ見出し

下線見出し

破点

左線見出し

横幅100%下線見出し

テキストパーツ

  • テキスト用のフォントカラー
  • テキスト用のフォントサイズ
  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • テキストの2行目から余白上16px付与
  • ホバー時の挙動 (下線・太字・反転・透過・なし)

デフォルト時

サンプルテキストサンプルテキストサンプルテキスト

サンプルテキストサンプルテキストサンプルテキスト

サンプルテキストサンプルテキストサンプルテキスト

shift + enterの改行時
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト

テキストパーツ(数字デザイン1)

  • テキスト用のフォントカラー
  • テキスト用のフォントサイズ
  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • テキスト下余白 (16px)
  • 配色 (メインカラーがあたる)

備考:

  • 数字の背景色はfO編集画面で変更可能(※塗り潰しのみで、枠線は不可)
  • 数字の丸枠は幅35px・高さ35pxの固定
  • リッチテキストのテーブルで作成されている
POINT 01

テキストパーツ(数字デザイン2)

  • テキスト用のフォントカラー
  • テキスト用のフォントサイズ
  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • 見出し下余白 (16px)
  • 配色 (メインカラーあたる)

備考:

  • 数字は42pxに設定
01 FEATURES

テキスト(表デザイン1)パーツ

  • テキスト用のフォントカラー
  • テキスト用のフォントサイズ
  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • 配色 (タイトルの下線: メインカラー)

備考:

  • ボーダーカラー、背景カラー、テキストカラー変更可、文字の太さも変更可能です。
  • 線の太さは変更不可。ボーダーの太さは2px固定、色は#eeeです。
  • 今までの表デザイン1がリニューアルしたパーツです。
 会社名 株式会社〇〇〇〇
 所在地 〒000-0000 東京都◯◯区◯◯町 0-00-0
 TEL 00-0000-0000
 FAX 00-0000-0000
 事業内容 ・ここに事業内容が入ります。
・ここに事業内容が入ります。
・ここに事業内容が入ります。
 設立  1990年11月
 資本金  1,234万円
 従業員数  56,700名(2022年1月現在)
 代表取締役  田中太郎

テキスト(表デザイン2)パーツ

  • テキスト用のフォントカラー
  • テキスト用のフォントサイズ
  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • 配色 (タイトル背景: メインカラーあたる)

備考:

  • 各セルの枠線はcssでのみ変更可能、また枠線の色は #eee で固定
  • タイトルのセルの背景はfO編集画面で変更可能
給与 月額00万円~000万円(能力によって設定)[想定年収:00万~0,000万円]
雇用形態 正社員
勤務形態 勤務時間
9:30~18:30(実働8時間、休憩1時間)
■土日祝日休み
■年間休日120日以上
試用期間 試用期間3ヶ月
福利厚生 ・各種社会保険完備(雇用、労災、厚生年金、関東ITソフトウェア健康保険組合)
・団体医療保険
・企業型確定拠出年金制度
・住宅補助2万円(会社指定範囲30分圏内で支給)
・交通費支給 (月100,000円まで)

ボタン1・2のパーツ

  • ボタン用のフォントカラー
  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • ボタン用のフォントサイズ
  • ボタンの形状 (両端が平円・角丸・角あり)
  • 塗り (塗りつぶし・縁取り・グラデーション)
  • ボックスシャドウ
  • ボタンの最小幅 (大・中・小)
  • ホバー時の挙動 (反転・透過・拡大・なし)
  • ボタン上余白 (64px ※カラム・コンポネントの余白20pxも含む)

備考:

  • 「縁取り」のデザインは背景色が透明なので、セクションの背景に依存する
  • ボタンのボックスシャドウはベースデザイン設定の「シャドウ」設定が反映される為、「なし」にしたい場合は別途CSSの調整が必要
  • アイコンは文字の色が反映される

ボタン3のパーツ

  • ボタン用のフォントカラー
  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • ボタン用のフォントサイズ
  • ボタンの形状 (両端が平円・角丸・角あり)
  • 塗り (塗りつぶし・縁取り・グラデーション)
  • ボタンの最小幅 (大・中・小)
  • ホバー時の挙動 (反転・透過・拡大・なし)
  • ボタン上余白 (64px ※カラム・コンポネントの余白20pxも含む)

備考:

  • ボタン3は1・2と違いボックスシャドウが設定されていないデザイン
  • 「縁取り」のデザインは背景色が透明なので、セクションの背景に依存する
  • アイコンは文字の色が反映される

TELボタンパーツ

  • テキスト用のフォントファミリー
  • ボタン用のフォントサイズ
  • ボタン上余白 (64px ※カラム・コンポネントの余白20pxも含む)

備考:

  • 他のボタンと同じフォントサイズが反映される
  • アイコンは文字の色が反映される
  • ホバー時の挙動は、透過:0.4 / 拡大:1.05倍 で固定
    • ボタン1〜3とは異なり、CSSで固定

ボタン(枠線白)パーツ

  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • ボタン用のフォントサイズ
  • ボタン1の形状 (両端が平円・角丸・角あり)
  • ボックスシャドウ
  • ボタンの最小幅 (大・中・小)
  • ボタン上余白 (64px ※カラム・コンポネントの余白20pxも含む)

備考:

  • 形状はベースデザイン設定のボタン1が反映される
  • ホバー時の挙動は、透過:0.4 / 拡大:1.05倍 / 枠線:白 / 文字色:白で固定
    • ボタン1〜3とは異なり、CSSで固定
  • 「縁取り」デザインは背景色が透明なので、セクションの背景に依存する
  • ボタンのボックスシャドウはベースデザイン設定の「シャドウ」設定が反映される為、「なし」にしたい場合は別途CSSの調整が必要
  • アイコンは文字の色が反映される

ボタン(白塗り)パーツ

  • 文字色(メインカラーがあたる)
  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • ボタン用のフォントサイズ
  • ボタン1の形状 (両端が平円・角丸・角あり)
  • ボックスシャドウ
  • ボタンの最小幅 (大・中・小)
  • ボタン上余白 (64px ※カラム・コンポネントの余白20pxも含む)

備考:

  • 形状はベースデザイン設定のボタン1が反映される
  • ボタン背景色は#fffが固定
  • ホバー時の挙動は、透過:0.4 / 拡大:1.05倍 / 文字色:メインカラー / 枠線:白 / 背景色:白で固定
    • ボタン1〜3とは異なり、CSSで固定
  • ボタンのボックスシャドウはベースデザイン設定の「シャドウ」設定が反映される為、「なし」にしたい場合は別途CSSの調整が必要
  • アイコンは文字の色が反映される

ナビ用ボタン

  • ボタン用のフォントカラー
  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • ボタン用のフォントサイズ
  • ボタンの形状 (両端が平円・角丸・角あり)
  • 塗り (塗りつぶし・縁取り・グラデーション)
  • ボックスシャドウ
  • ボタンの最小幅 (大・中・小)
  • PCのときホバー時の挙動 (反転・透過・拡大・なし)

注意点:

  • このボタンは、ナビ用です。コンテンツ、サイドバー、フッター、フッターエリアでの使用を推奨しません。
  • SP時は、メインカラーのアイコンに変更されます。ホバー時の挙動はありません。
  • お問い合わせはボタン2の設定が当たります。
  • それ以外のボタンは、ボタン1が当たります。

備考:

  • 「縁取り」のデザインは背景色が透明なので、セクションの背景に依存する
  • ボタンのボックスシャドウはベースデザイン設定の「シャドウ」設定が反映される為、「なし」にしたい場合は別途CSSの調整が必要
  • アイコンは文字の色が反映される

グラデボタン

  • ボタン用のフォントカラー
  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • ボタン用のフォントサイズ
  • ボタンの形状 (両端が平円・角丸・角あり)
  • ボックスシャドウ

備考:

  • 左から右のグラデーション
  • 方向は固定です
  • 左はメインカラー100%、右は30%(動く際に、一番濃い状態を再現しています)
  • アイコンはつきません 
  • ボタンのボックスシャドウはベースデザイン設定の「シャドウ」設定が反映される為、「なし」にしたい場合は別途CSSの調整が必要
  • ホバー時は0.4透過されます。

矢印動くボタン

テキスト:

  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • 文字色テキストカラー

備考:
矢印の色は、#fffで固定
円の色はテキストカラー
矢印とテキストの間は最大文字数(6文字)を入れると20pxになります。
最小幅はSサイズは147px、Mサイズが173px、Lサイズが218pxで、文字数が少ない場合は、最小幅を保つため、余白が広がります

イメージ(メインカラー)パーツ

  • ボックスシャドウ (シャドウ幅は16px, メインカラーがあたる)

イメージ(サブカラー)パーツ

  • ボックスシャドウ (シャドウ幅は16px, サブカラーがあたる)

イメージ(アクセントカラー)パーツ

  • ボックスシャドウ (シャドウ幅は16px, アクセントカラーがあたる)

イメージ(陰あり)パーツ

  • ボックスシャドウ

備考:

  • ボックスシャドウのカラー以外の数値は固定

ギャラリー

  • 編集中

スライドパーツ

  • 編集中

区切り線パーツ(各種)

  • 配色 (メインカラー・サブカラー・アクセントカラー)



アイコンパーツ

  • 配色 (メインカラー・サブカラー・アクセントカラー)

備考:

  • アイコンカラーはベースデザイン設定の配色3つと白黒の5色展開
  • フォントサイズは大:80px / 中:56px / 小:32pxで固定

背景カラー①

ニュース用記事リストパーツ

各カード:

  • 背景色 (背景カラー①があたる)

見出し(h3):

  • テキスト用のフォントファミリー
  • テキスト用のフォントサイズ
  • テキスト用のフォントカラー
  • テキスト用の文字間
  • テキスト用の行間

日付(h4):

  • テキスト用のフォントファミリー
  • テキスト用のフォントカラー
  • テキスト用の文字間

タグ:

  • タグ用の背景色 (タグカラー)
  • タグ用のフォントカラー
  • タグの形状(両端が平円・角丸・角あり)
  • 縁取りカラー

備考:

  • 最大幅955px
  • 見出し・日付のフォントウェイトはノーマルで固定
  • タグはフォントサイズ12pxで固定
  • 区切り線は幅1px / 色:#eee固定
  • 各記事の余白は上下:15px / 左右:10pxで固定

ニュースリスト(縦バージョン)パーツ

備考:

  • タグの複数表示に対応するためのパーツ。基本設定は「ニュース用記事リストパーツ」同様

記事リスト(サムネイルあり)パーツ

各カード:

  • 背景色 (背景カラー①があたる)
  • ボックスシャドウ

見出し(h3):

  • 見出し用のフォントファミリー
  • 見出し用のフォントカラー
  • 見出し用の文字間
  • 見出し用の行間

日付(h4):

  • テキスト用のフォントファミリー
  • テキスト用のフォントカラー

テキスト:

  • テキスト用のフォントサイズ
  • テキスト用のフォントカラー
  • テキスト用の文字間
  • テキスト用の行間

タグ:

  • タグ用の背景色 (タグカラー)
  • タグ用のフォントカラー
  • タグの形状 (両端が平円・角丸・角あり)
  • 縁取りカラー

ページネーション:

  • フォントカラー(メインカラーがあたる)
  • 枠線 (メインカラーがあたる)

備考:

  • 見出し(h3)のフォントサイズは20pxで固定
  • タグはフォントサイズ12pxで固定
  • ページネーションの色はアクティブ時に設定されている色で反転する( ※アクティブ時の文字は白色で固定)
  • ページネーションのフォントサイズは10pxで固定
  • 記事リストは角丸不可

記事リスト(行制限)パーツ

備考:

  • テキスト量を下記の通り制限
    • 見出し(h3)
      • PC=1行
      • SP=2行
    • ディスクリプション
      • PC=3行
      • SP=5行
  • その他基本設定は「記事リスト(サムネイルあり)パーツ」同様

タグ記事リストパーツ

各カード:

  • 背景色 (背景カラー①があたります。)
  • ボックスシャドウ

見出し(h3):

  • 見出し用のフォントファミリー
  • 見出し用のフォントカラー
  • 見出し用の文字間
  • 見出し用の行間

日付(h4):

  • テキスト用のフォントファミリー
  • テキスト用のフォントカラー

テキスト:

  • テキスト用のフォントサイズ
  • テキスト用のフォントカラー
  • テキスト用の文字間
  • テキスト用の行間

タグ:

  • タグ用の背景色 (タグカラー)
  • タグ用のフォントカラー
  • タグの形状 (両端が平円・角丸・角あり)
  • 縁取りカラー

ページネーション:

  • フォントカラー (メインカラーがあたる)
  • 枠線 (メインカラーがあたる)

備考:

  • 見出し(h3)は20pxで固定
  • タグはフォントサイズ12pxで固定
  • ページネーションの色はアクティブ時に設定されている色で反転する( ※アクティブ時の文字は白色で固定)
  • ページネーションのフォントサイズは10pxで固定
  • 記事リストは角丸不可

記事リスト横スクロール

各カード:

  • 背景色 (背景カラー①があたります。)
  • ボックスシャドウ

見出し(h3):

  • 見出し用のフォントファミリー
  • 見出し用のフォントカラー
  • 見出し用の文字間
  • 見出し用の行間

日付(h4):

  • テキスト用のフォントファミリー
  • テキスト用のフォントカラー

テキスト:

  • テキスト用のフォントサイズ
  • テキスト用のフォントカラー
  • テキスト用の文字間
  • テキスト用の行間

タグ:

  • タグ用の背景色 (タグカラー)
  • タグ用のフォントカラー
  • タグの形状 (両端が平円・角丸・角あり)
  • 縁取りカラー

備考:

  • スクロールバーの色は変更できません
  • ベージネーションは使えません。
  • このパーツで、リスト型を指定した場合は、スクロールバーは表示されずに、通常の記事リストパーツになります。
  • 記事の数は、1カラム、2カラム、対応可能です。

タグ一覧パーツ

  • テキスト用のフォントファミリー
  • タグ用の背景色 (タグカラー)
  • タグ用のフォントカラー
  • タグの形状 (両端が平円・角丸・角あり)
  • 縁取りカラー

備考:

  • フォントサイズは12pxで固定
  • タグ
    • 間の余白は10pxで固定
    • 下の余白は20pxで固定

リンクリストパーツ(各種)

  • テキスト用のフォントカラー
  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • リンク間の余白 (40px)

備考:

  • フォントサイズは20pxで固定
  • 下矢印は配色で設定した色が反映される

絞り込み検索(改行制限あり)

  • テキスト用のフォントファミリー
  • タグ用の背景色 (タグカラー)
  • タグ用のフォントカラー
  • タグの形状 (両端が平円・角丸・角あり)
  • 縁取りカラー

 絞り込みテキスト見出し(h2)

  •  ベースデザイン設定のh2のサイズ

 タググループ見出し 

  •  ベースデザイン設定のテキストサイズ、カラー、行間、文字間
  • ボーダーは、メインカラー
  • チェックカラーは、メインカラー

絞り込みタグテキスト

  •  ベースデザイン設定のテキストサイズ、カラー、行間、文字間

記事リストパーツ内のタグ

  • 選択された場合、タグの色がタグデザインに対して反転

備考:

  • カード型のみ、一番高いパーツに全てのカードが揃います。なお、リスト型は画像の持っている高さに依存する。画像幅は35%固定です。
  • キスト量を下記の通り制限
    見出し(h3)
    PC=1行
    SP=2行
    ディスクリプション
    PC=3行
    SP=5行

絞り込み検索

見出しテキスト1

検索結果

絞り込み検索(改行制限なし)

  • テキスト用のフォントファミリー
  • タグ用の背景色 (タグカラー)
  • タグ用のフォントカラー
  • タグの形状 (両端が平円・角丸・角あり)
  • 縁取りカラー

 絞り込みテキスト見出し(h2)

  •  ベースデザイン設定のh2のサイズ

 タググループ見出し 

  •  ベースデザイン設定のテキストサイズ、カラー、行間、文字間
  • ボーダーは、メインカラー
  • チェックカラーは、メインカラー

絞り込みタグテキスト

  •  ベースデザイン設定のテキストサイズ、カラー、行間、文字間

記事リストパーツ内のタグ

  • 選択された場合、タグの色がタグデザインに対して反転

備考:

  •  カード型のみ、一番高いパーツに全てのカードが揃います。なお、リスト型は画像の持っている高さに依存する。画像幅は35%固定です。

絞り込み検索

見出しテキスト1

検索結果

区切り線付リンクリスト

  • テキスト用のフォントカラー(編集画面で変更可)
  • テキスト用のフォントファミリー
  • テキスト用の文字間
  • テキスト用の行間
  • テキスト用のフォントサイズ(SP時はベースデザイン設定マイナス2px)
  • ボーダーカラーはテキストカラーを継承(編集画面でフォントカラーを変更すると連動して変更される。ただし編集画面上では反映されないので要注意)

備考:

  •  「横並び」「縦並び」両方使用可
  • 横並びの場合、SP時は最初と最後にもボーダーが付く
  • ホバー時の挙動は0.4透過で固定
  • ボーダーのサイズ(長さ)は固定(テキストが二行になっても伸縮しない)
  • その他、以下編集画面では対応不可
    • テキストのbold設定
    • 中央or右寄せ
    • ボーダーにテキストとは異なるカラーを設定

記事ランキングパーツ

各カード:

  • 背景色 (背景カラー①があたる)

数字:

  • 背景色 (メインカラーがあたる)
  • 枠線 (メインカラーがあたる)

見出し(h3):

  • テキスト用のフォントサイズ

テキスト:

  • テキスト用のフォントファミリー

備考:

  • 数字は3位までが白文字 / 4位からは配色のメインカラーに固定
  • 詳細テキストの
    • フォントサイズは14pxで固定
    • 行間は1.5で固定

フォームパーツ

  • テキスト用のフォントカラー
  • テキスト用のフォントファミリー
  • テキスト用のフォントサイズ
  • テキスト用の文字間
  • テキスト用の行間

リンク:

  • リンクカラー

送信ボタン:

  • 背景色 (メインカラーがあたる)
  • 枠線 (メインカラーがあたる)
  • 形状 (両端が平円・角丸・角あり)
  • ボックスシャドウ

備考:

  • ラベルの色は設定不可
  • 送信ボタンの
    • フォントサイズは20pxで固定
    • フォントウェイトはBoldに設定
    • 最小幅は280pxで固定
    • ホバーは透過:0.4で固定
会社でお使いのメールアドレスをご記入ください。
当社の個人情報の取扱について

1. 当社は、当社のホームページにアクセスしてきた方の個人情報に関して、ご本人の同意なく無断で収集・利用する事はありません。
2. 同意を得た場合でも、同意を得た範囲でのみ使用します。
3. さらに、収集した個人情報は適正な管理の下で安全に蓄積・保管します。

個人情報の利用目的について

お客様の個人情報は下記の目的に使用させていただきます。下記の目的以外で個人情報を使用する場合は、改めて目的をお知らせし、お客様の同意を得た上で使用いたします。また、お客様が個人情報の提供を拒否された場合は、弊社が提供するサービスがお受けできなくなる場合がございます。

1. メールによる商品のご案内・ご提案
2. 案内資料・請求書等の送付
3. 商品・サービスの正確な提供