全ブロック共通サイドバー設定

最終更新: 2026-03-15

ブロック共通サイドバー設定 — マニュアル

全てのLiteWordカスタムブロックで共通して使えるサイドバーパネル。ブロック個別の設定とは別に、レイアウト・装飾・アニメーションをどのブロックにも適用できる。

設定手順

1. ブロックを選択してサイドバーを開く

エディター画面で設定したいブロックをクリックして選択する
画面右側に「サイドバー」が表示される（表示されない場合は右上の歯車アイコンをクリック）
サイドバー上部のタブで「ブロック」を選択する
ブロック固有の設定パネルの下に、以下の共通パネルが並んでいる

2. 各パネルの説明と使い方

以下のパネルは全てのLiteWordカスタムブロックに共通で表示される。パネル名をクリックすると開閉できる。

パネル	概要	よく使う場面
PC/SP表示切替	特定デバイスでのみブロックを表示する	PC用とスマホ用で別のブロックを用意する時
横幅設定	ブロックの最大横幅と配置を指定	コンテンツの幅を制限したい時
マージン	ブロックの外側余白（上下）を調整	セクション間の間隔を広げたい・詰めたい時
パディング	ブロックの内側余白（上下左右）を調整	ブロック内のコンテンツに余白を持たせたい時
背景設定	ブロックに背景色を追加	セクションを視覚的に区切りたい時
枠線	ボーダー（線のスタイル・色・太さ）を設定	カード風のデザインにしたい時
角丸	角の丸みを設定	柔らかい印象のデザインにしたい時
配置（ポジション）	CSSのposition制御	追従表示(sticky)や重ね合わせ(absolute)に
テキスト・段落	フォントサイズ・太さ・行間・文字間を調整	テキストの読みやすさを調整したい時
横スクロール	横スクロールの有効化	テーブルなど横に長いコンテンツがある時
アニメーション	表示時のアニメーション効果	重要なセクションに動きを付けたい時

3. 各設定の使い方（詳細）

横幅: 「最大横幅」で 100%（親要素に合わせる）、100vw（画面幅いっぱい）、またはカスタムpx値（200〜2400px）を選択。「配置」で左寄せ/中央/右寄せを指定（PC/TB/SP個別）
マージン: スライダーで上下の外側余白を 0〜80px の範囲で調整（4px刻み）。PC/TB/SPで異なる値を設定可能
パディング: スライダーで上下左右の内側余白を 0〜80px の範囲で調整（4px刻み）。PC/TB/SPで異なる値を設定可能
背景: ONにして色を選択（12色プリセットまたはHEXコード入力）。「フル幅背景」にチェックを入れると画面端まで背景が広がる。透明度は0〜100%で調整
枠線: 「全辺共通」か「個別設定（上/右/下/左）」を選び、スタイル（solid/dashed/dotted等）、色、太さ（0〜20px）を設定
角丸: スライダーで 0〜80px の範囲を調整（4px刻み）。PC/TB/SPで個別設定可能
配置: 通常は static のまま。追従表示には sticky、重ね合わせには absolute を使う。z-index で重なり順を制御（0〜100）
テキスト: フォントサイズ（0.1〜4.0倍）、ウェイト（100〜900）、行間（0.8〜3.0）、文字間（0〜0.3em）を調整。PC/SPで個別設定可能
横スクロール: ONにすると、はみ出すコンテンツに横スクロールバーが表示される。TB/SPそれぞれの最小横幅を設定
アニメーション: 発動条件（スクロール時/初回表示時）を選び、種類（フェードアップ/右/左/ダウン）、時間、移動距離を設定。おすすめは「フェードアップ + 0.5秒」
PC/SP切替: ツールバーの「PCのみ表示」「SPのみ表示」ボタンで切り替え。未設定時は両方で表示される

よくある質問

Q: サイドバーが表示されない
A: 画面右上の歯車アイコンをクリックしてサイドバーを表示してください。サイドバー上部のタブが「ブロック」になっていることも確認してください。

Q: PC/TB/SPで別の値を設定するには？
A: マージン・パディング・角丸などのパネルにはデバイス切替アイコンがあります。アイコンをクリックしてPC/タブレット/スマホを切り替え、それぞれに値を設定してください。

Q: 背景色をフル幅に広げたいが、コンテンツは中央に収めたい
A: 背景設定の「フル幅背景」をONにしてください。背景だけが画面端まで広がり、コンテンツの幅は横幅設定に従います。

Q: アニメーションが動かない
A: 発動条件が「無効」になっていないか確認してください。また、エディター上ではアニメーションは再生されません。プレビューまたは公開ページで確認してください。

Q: position を absolute にしたらブロックが消えた
A: absolute はブロックを通常のレイアウトフローから外すため、位置（上/左など）を明示的に指定する必要があります。通常は static のままにしてください。

PC/SP表示切替（ツールバー）

ブロックのツールバーに表示されるボタン。特定デバイスでのみ表示するように設定。

ボタン	効果
PCのみ表示	パソコンでだけ表示、スマホでは非表示
SPのみ表示	スマホでだけ表示、パソコンでは非表示

> 使いどころ: PC用の横長バナーとSP用の縦長バナーを別ブロックで用意する時。

横幅設定

設定	説明
最大横幅	100% / 100vw / カスタムpx（200〜2400px）
配置	左寄せ / 中央 / 右寄せ（PC/TB/SP別）

マージン（外側余白）

ブロックの外側の余白。上下それぞれ設定可能。

設定	範囲	刻み
上の外側余白	0〜80px	4px
下の外側余白	0〜80px	4px

PC / タブレット / スマホで個別設定可能。

パディング（内側余白）

ブロックの内側の余白。上下左右それぞれ設定可能。

設定	範囲	刻み
上の内側余白	0〜80px	4px
下の内側余白	0〜80px	4px
左の内側余白	0〜80px	4px
右の内側余白	0〜80px	4px

PC / タブレット / スマホで個別設定可能。

背景設定

ブロックに背景色を追加。

設定	説明
背景ON/OFF	背景色の有効/無効
背景色	12色プリセット + カスタムHEX入力
フル幅背景	画面幅いっぱいに背景を広げる（100vw）
透明度	0〜100%（1%刻み）

> 使いどころ: セクションの区切りに薄い背景色を敷く。フル幅ONで画面端まで広がる。

枠線（ボーダー）

設定	説明
モード	全辺共通 / 個別設定（上/右/下/左）
線のスタイル	none / solid / dashed / dotted / double / groove / ridge / inset / outset
線の色	10色以上のプリセット + HEX入力
線の太さ	0〜20px（PC/TB/SP別）

角丸（ボーダーラディウス）

設定	範囲	刻み
角丸	0〜80px	4px

PC / タブレット / スマホで個別設定可能。

配置（ポジション）

CSSのpositionプロパティを制御。高度なレイアウトに。

設定	説明
配置方法	static / relative / absolute / fixed / sticky
位置（上/下/左/右）	px / % / em / vw / auto から選択
重なり順（z-index）	0〜100
overflow制御	overflow:hiddenの無効化

全てPC / タブレット / スマホで個別設定可能。

> 注意: absolute/fixedは上級者向け。通常はstaticのままで問題ない。stickyは追従表示に便利。

テキスト・段落設定

ブロック内のテキストを詳細に調整。

設定	説明	デバイス別
最大横幅	テキストエリアの幅（px / %）	—
フォントウェイト	100（極細）〜 900（極太）	—
フォントサイズ	0.1倍〜 4.0倍	PC / SP
行間	0.8 〜 3.0	PC / SP
文字間	0 〜 0.3em	PC / SP

横スクロール設定

テーブルや横長コンテンツがはみ出す場合の横スクロール制御。

設定	説明
横スクロールON/OFF	横スクロールを有効化
タブレット最小横幅	TB時のスクロール開始幅（400〜1920px）
スマホ最小横幅	SP時のスクロール開始幅（200〜1200px）

> 使いどころ: 料金表や比較表など、スマホでは全体が表示しきれないブロックに。

アニメーション設定

ブロックの表示時にアニメーション効果を追加。

設定	説明
発動条件	スクロール時 / 初回表示時 / 無効
種類	フェードアップ / フェード右 / フェード左 / フェードダウン
時間	0.1秒〜 5.0秒
表示開始距離	10〜200px（スクロール時のみ）
移動距離	10〜200px（デフォルト40px）
遅延時間	0.1秒〜 5.0秒

> おすすめ: フェードアップ + 0.5秒 + 遅延なしが最も自然。多用すると逆効果なので、重要なセクションだけに使う。

設定のまとめ

パネル	よく使う場面	難易度
PC/SP切替	デバイス別コンテンツ	★☆☆
マージン/パディング	セクション間の余白調整	★☆☆
背景	セクション区切り	★☆☆
横幅	コンテンツの幅制御	★★☆
枠線/角丸	カード風デザイン	★★☆
テキスト	フォントサイズ/行間	★★☆
アニメーション	動きのある演出	★★☆
横スクロール	テーブル対応	★★☆
配置（position）	高度なレイアウト	★★★

最終更新: 2026-03-15 13:00