会社概要・プロフィールブロック
会社概要・プロフィール・メッセージ ブロック — 全種マニュアル
企業情報の表形式表示、個人プロフィール、代表挨拶メッセージを表示するブロック群。全7種。
設定手順
1. ブロックを挿入する
エディター画面で「+」ボタンをクリックし、使いたい会社概要ブロック（例：「会社概要 01」「会社概要 02」など）を検索して挿入する。
2. 会社情報を編集する（項目名 + 内容）
ブロック内のテーブル形式のエリアを直接クリックして編集する。
- 項目名（dt / title / term） — 「社名」「設立」「所在地」「代表者」など
- 内容（dd / text / desc） — 「株式会社〇〇」「2020年1月」「東京都渋谷区...」など
- 項目の追加・削除も可能。不要な項目は削除し、足りなければ追加する
- 会社概要 01はデフォルト11項目、会社概要 02はデフォルト4項目
3. レイアウトを調整する
右側のサイドバー（ブロック設定パネル）で表示を調整する。
- maxWidth — ブロック全体の最大幅（px）を設定
- dtWidthClass — 項目名カラムの幅を選択（
dt_width_s狭め /dt_width_m標準 /dt_width_l広め） - spFullDt — スマホ表示時に項目名をフル幅にするか（長い項目名がある場合は ON 推奨）
- dtBackgroundColor — 項目名の背景色を変更（会社概要 02は薄グレー、会社概要 03はメインカラーがデフォルト）
- borderColor — 行の区切り線の色を変更
4. フォント設定を調整する
サイドバーの各フォント項目を必要に応じて変更する。
- fontSizeClass — テキスト全体のサイズ（
font_size_s/font_size_m/font_size_l） - fontDt / fontWeightDt — 項目名のフォントと太さ
- fontDd / fontWeightDd — 内容テキストのフォントと太さ
- dtTextColor / ddTextColor — 項目名・内容の文字色
- lineHeight — 行間（1.4〜2.0の範囲で調整）
よくある質問
Q. 項目の数を増やしたり減らしたりできる？
A. はい。ブロック内で項目の追加・削除が可能です。デフォルトの項目数は目安であり、自由に増減できます。
Q. スマホで項目名と内容が重なって見にくい
A. サイドバーの spFullDt を ON にしてください。スマホ表示時に項目名が上、内容が下に縦積みで表示されるようになります。
Q. 項目名の幅が狭すぎて文字が折り返されてしまう
A. dtWidthClass を dt_width_l（広め）に変更してください。「主要取引先銀行」のような長い項目名がある場合に有効です。
Q. テーマカラーを変更したら会社概要ブロックの色も変わる？
A. var(--color-main) が設定されている項目（dtBackgroundColor、borderColor等）はテーマカラーに自動追従します。固定色（#FF0000 等）を指定した場合は追従しません。
Q. 会社概要 01, 02, 03 の違いは？
A. 会社概要 01 は罫線区切りのフォーマルなスタイル（デフォルト11項目）、会社概要 02 は背景色付きのコンパクトなスタイル（デフォルト4項目）、会社概要 03（有料）はメインカラー統一のスタイリッシュなデザインです。
共通クラス値リファレンス
fontSizeClass（フォントサイズクラス）
| クラス名 | 説明 |
|---|---|
font_size_s |
小さめ（13〜14px相当） |
font_size_m |
標準（15〜16px相当） |
font_size_l |
大きめ（17〜18px相当） |
dtWidthClass（項目名カラム幅クラス）
| クラス名 | 説明 |
|---|---|
dt_width_s |
狭め（約120px） — 項目名が短い場合 |
dt_width_m |
標準（約180px） — 一般的な会社概要向き |
dt_width_l |
広め（約240px） — 長い項目名がある場合 |
spFullDt（スマホ時の項目名フル幅表示）
false（デフォルト）の場合、スマホでもdt/ddが横並びのまま表示される。trueにすると、スマホ表示時にdt（項目名）がフル幅で上に表示され、dd（内容）がその下に回り込む縦積みレイアウトになる。項目名や内容が長い場合に有効。
無料ブロック — 会社概要（2種）
会社概要 01（lw-company-1）
定義リスト（dl/dt/dd）形式の会社情報テーブル。罫線で区切られたフォーマルなスタイル。項目数が多い本格的な会社概要に最適。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| maxWidth | number | 1600 |
ブロック全体の最大幅（px）。大きめの値なので実質フル幅に近い |
| fontSizeClass | string | "font_size_m" |
テキスト全体のフォントサイズクラス。上記リファレンス参照 |
| dtWidthClass | string | "dt_width_m" |
項目名（dt）カラムの幅クラス。上記リファレンス参照 |
| lineHeight | number | 1.6 |
テキストの行間。1.4〜2.0の範囲で調整 |
| spFullDt | boolean | false |
スマホ時にdt（項目名）をフル幅にするか。上記説明参照 |
| dtBackgroundColor | string | "" |
項目名カラムの背景色。空の場合は透明 |
| dtTextColor | string | "#111" |
項目名カラムの文字色 |
| fontDt | string | "" |
項目名のフォントファミリー。空の場合はテーマのデフォルト |
| fontWeightDt | string | "" |
項目名の太さ（"400", "600", "700" 等） |
| ddTextColor | string | "#111" |
内容カラム（dd）の文字色 |
| fontDd | string | "" |
内容カラムのフォントファミリー |
| fontWeightDd | string | "" |
内容カラムの太さ |
| borderColor | string | "#ddd" |
行の区切り線の色 |
| contents | array/query | 11項目 | 会社情報の項目データ（下記参照） |
contents 配列の各項目
| フィールド | 説明 |
|---|---|
| title | 項目名（例：「社名」「設立」「所在地」） |
| text | 内容テキスト（例：「株式会社〇〇」「2020年1月」） |
デフォルト11項目: 社名 / 設立 / 所在地 / 代表者 / 事業内容 / 資本金 / 従業員数 / 取引先 / 電話番号 / FAX / メール
使いどころ: 中〜大規模企業の会社概要ページ。項目が多い場合に最適。maxWidthが1600pxと大きいため、ワイドレイアウトにも対応。
会社概要 02（lw-company-2）
交互背景色（ストライプ）スタイルの会社情報テーブル。項目名に背景色が付き、視認性が高いコンパクトなデザイン。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| maxWidth | number | 1080 |
ブロック全体の最大幅（px） |
| fontSizeClass | string | "font_size_m" |
テキスト全体のフォントサイズクラス |
| dtWidthClass | string | "dt_width_m" |
項目名カラムの幅クラス |
| lineHeight | number | 1.6 |
テキストの行間 |
| spFullDt | boolean | false |
スマホ時にdtをフル幅にするか |
| dtBackgroundColor | string | "#f0f0f0" |
項目名カラムの背景色（薄グレー） |
| dtTextColor | string | "#000000" |
項目名カラムの文字色 |
| fontDt | string | "" |
項目名のフォントファミリー |
| fontWeightDt | string | "" |
項目名の太さ |
| ddTextColor | string | "#000000" |
内容カラムの文字色 |
| fontDd | string | "" |
内容カラムのフォントファミリー |
| fontWeightDd | string | "" |
内容カラムの太さ |
| borderColor | string | "#cccccc" |
行の区切り線の色 |
| items | array | 4項目 | 会社情報の項目データ（下記参照） |
items 配列の各項目
| フィールド | 説明 |
|---|---|
| dt | 項目名テキスト |
| dd | 内容テキスト |
| dtPlaceholder | 項目名の入力プレースホルダー（編集画面用） |
| ddPlaceholder | 内容の入力プレースホルダー（編集画面用） |
使いどころ: 個人事業主・小規模企業の概要ページ。デフォルト4項目とコンパクトで、dtBackgroundColorの薄グレーが最初から設定済み。すぐ使える手軽さが魅力。
有料ブロック — 会社概要（1種）
会社概要 03（paid-block-lw-company-3）
アクセントカラーをヘッダー背景に使ったスタイリッシュな会社情報テーブル。項目名がメインカラーで強調され、フォントもMurechoがデフォルト設定。デザイン性の高い会社概要に。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| maxWidth | number | 1080 |
ブロック全体の最大幅（px） |
| fontSizeClass | string | "font_size_m" |
テキスト全体のフォントサイズクラス |
| dtWidthClass | string | "dt_width_m" |
項目名カラムの幅クラス |
| lineHeight | number | 1.6 |
テキストの行間 |
| spFullDt | boolean | false |
スマホ時にdtをフル幅にするか |
| dtBackgroundColor | string | "var(--color-main)" |
項目名の背景色。テーマのメインカラーを使用 |
| dtTextColor | string | "" |
項目名の文字色。空の場合はテーマデフォルト（メインカラー背景に合わせて白等に自動調整） |
| fontDt | string | "Murecho" |
項目名のフォント。Google Fonts「Murecho」 |
| fontWeightDt | string | "600" |
項目名の太さ（セミボールド） |
| ddTextColor | string | "" |
内容カラムの文字色 |
| fontDd | string | "" |
内容カラムのフォントファミリー |
| fontWeightDd | string | "" |
内容カラムの太さ |
| borderColor | string | "var(--color-main)" |
行の区切り線の色。メインカラーに統一 |
| contents | array/query | 3項目 | 会社情報の項目データ（下記参照） |
contents 配列の各項目
| フィールド | 説明 |
|---|---|
| term | 項目名テキスト（company-1のtitleに相当） |
| desc | 内容テキスト（company-1のtextに相当） |
注意: company-1とフィールド名が異なる（title/text → term/desc）。
使いどころ: コーポレートサイトでメインカラーに統一感を持たせたい場合。Murechoフォントが洗練された印象を与える。有料ブロックのため購入が必要。
テンプレートブロック — 会社概要（1種）
会社概要 1 shin（shin-gas-station-01-company-01）
shinテンプレート専用の会社概要ブロック。メインカラーのアクセントラインが付いたミニマルなデザイン。属性数が少なくシンプル。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| colorOuter | string | "var(--color-main)" |
アクセントライン等の外枠カラー |
| colorDt | string | "#7C7C7C" |
項目名の文字色（グレー系） |
| fontDt | string | "" |
項目名のフォントファミリー |
| fontWeightDt | string | "600" |
項目名の太さ（セミボールド） |
| colorDd | string | "#111" |
内容カラムの文字色 |
| fontDd | string | "" |
内容カラムのフォントファミリー |
| fontWeightDd | string | "" |
内容カラムの太さ |
| contents | array/query | 11項目 | 会社情報の項目データ |
contents 配列の各項目
| フィールド | 説明 |
|---|---|
| title | 項目名テキスト |
| text | 内容テキスト |
特徴: maxWidth、fontSizeClass、dtWidthClass、spFullDt、borderColor等の共通属性がない。テンプレートのCSS側でレイアウトが固定されているため、設定項目が絞り込まれている。項目名がグレー（#7C7C7C）で控えめに表示される。
デフォルト11項目: company-1と同じ（社名 / 設立 / 所在地 / 代表者 / 事業内容 / 資本金 / 従業員数 / 取引先 / 電話番号 / FAX / メール）
無料ブロック — プロフィール（1種）
プロフィール 01（profile-1）
写真＋自己紹介テキストのシンプルなプロフィールカード。個人事業主の「About Me」セクションや、ブログの著者紹介に最適。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| imageUrl | string | Pixabayサンプル画像URL | プロフィール写真のURL |
| altText | string | "プロフィール画像" |
画像の代替テキスト（SEO・アクセシビリティ） |
| profileTitle | string | "PROFILE" |
セクション見出しテキスト |
| content | string | "名前：東京太郎n生年月日：..." |
自己紹介の本文。改行（n）対応 |
| backgroundColor | string | "#ebebeb" |
カード全体の背景色（薄グレー） |
| titleColor | string | "#000000" |
見出しの文字色 |
| contentColor | string | "#000000" |
本文の文字色 |
使いどころ: プロフィールページ、ブログの著者紹介セクション。設定7つのみで非常にシンプル。
入力のコツ:
- 本文はHTML不可。プレーンテキストのみで、改行は反映される
- 画像は正方形または縦長を推奨（カード内にフィットしやすい）
無料ブロック — メッセージ（1種）
メッセージ 01（lw-message-1）
代表挨拶やCEOメッセージのための本格的なセクション。写真＋リードテキスト＋本文＋肩書き/氏名を一つのブロックで構成。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| subTitle | string | "message" |
セクション上部の小見出し（英字表記等） |
| mainTitle | string | "代表あいさつ" |
セクションのメインタイトル |
| leadText | string | サンプルテキスト | リード文（本文の前に表示される導入テキスト） |
| bodyText | string | サンプルテキスト | 本文（代表の挨拶文） |
| imgUrl | string | Unsplashサンプル画像URL | 代表者の写真URL |
| imgAlt | string | "代表の写真" |
画像の代替テキスト |
| captionSub | string | "代表取締役" |
肩書き（写真下に表示） |
| captionMain | string | "山田太郎" |
氏名（肩書きの下に表示） |
| colorMain | string | "var(--color-main)" |
アクセントカラー（装飾要素に使用） |
| filterOpacity | number | 0.05 |
背景フィルターの透過度。0〜1の範囲。デフォルト0.05でほぼ透明 |
| maxWidth | number | "" |
最大幅。空の場合はテーマデフォルト |
使いどころ: 会社サイトの「代表挨拶」「社長メッセージ」ページ。leadText（導入文）とbodyText（本文）の2段構成で、長い挨拶文もきれいに収まる。
入力のコツ:
- subTitleは英語表記（"message", "greeting" 等）にするとデザイン性が上がる
- filterOpacityはメインカラーの薄い背景フィルター。デフォルト0.05で控えめだが、0.1〜0.2にすると色味が出る
テンプレートブロック — メッセージ（1種）
メッセージ 1 shin（shin-gas-station-01-message-01）
shinテンプレート専用のメッセージブロック。lw-message-1と比べてleadTextがなく、直接bodyTextに本文を記載するシンプル構成。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| subTitle | string | "代表挨拶" |
セクション上部の小見出し（日本語デフォルト） |
| mainTitle | string | "Message" |
セクションのメインタイトル（英字デフォルト） |
| bodyText | string | 長文サンプルテキスト | 本文（代表の挨拶文） |
| imgUrl | string | Unsplashサンプル画像URL | 代表者の写真URL |
| imgAlt | string | "代表の写真" |
画像の代替テキスト |
| captionSub | string | "代表取締役" |
肩書き |
| captionMain | string | "山田太郎" |
氏名 |
| colorMain | string | "var(--color-main)" |
アクセントカラー |
lw-message-1との違い:
- leadText（リード文）がない — 本文のみのシンプル構成
- filterOpacity、maxWidthの属性がない — テンプレートCSS側で制御
- subTitleのデフォルトが日本語（「代表挨拶」）、mainTitleが英字（「Message」）と、lw-message-1とは逆の構成
どれを使えばいい？
会社概要ブロックの選び方
| 用途 | おすすめブロック | ティア | 理由 |
|---|---|---|---|
| 法人の会社概要（項目が多い） | 会社概要 01（lw-company-1） | 無料 | デフォルト11項目。maxWidth 1600pxでワイドにも対応 |
| 個人・小規模事業の概要 | 会社概要 02（lw-company-2） | 無料 | デフォルト4項目のコンパクト設計。背景色付きで見やすい |
| デザイン重視のコーポレートサイト | 会社概要 03（paid-block-lw-company-3） | 有料 | メインカラー統一＋Murechoフォントで洗練されたデザイン |
| shinテンプレートを使用中 | 会社概要 1 shin | テンプレート | テンプレートのデザインに最適化された設定 |
プロフィール/メッセージの選び方
| 用途 | おすすめブロック | ティア |
|---|---|---|
| 個人の自己紹介・About Me | プロフィール 01（profile-1） | 無料 |
| 代表挨拶（導入文+本文の2段構成） | メッセージ 01（lw-message-1） | 無料 |
| shinテンプレートの代表挨拶 | メッセージ 1 shin | テンプレート |
入力の共通コツ
- 会社概要の項目は自由に増減できる — 不要な項目は削除、足りなければ追加
- spFullDtは項目名が長い場合にON推奨 — 「主要取引先銀行」のような長い項目名がスマホで潰れるのを防ぐ
- borderColorとdtBackgroundColorで印象が大きく変わる — まずデフォルトで試してから調整
- フォント指定（fontDt/fontDd）は空のままでOK — テーマのデフォルトフォントが使われる。変えたい場合のみ設定
- var(--color-main)を使うとテーマカラー変更時に自動追従する — 固定色（#FF0000等）だとテーマカラーを変えても追従しない点に注意
最終更新: 2026-03-15 13:00