サイトレイアウト設定

Apuraでは、サイト全体の骨格となるレイアウト設定をカスタマイザーの「General Layout」セクションから調整できます。表示スタイルの切り替えからコンテナ幅・コンテンツ幅・サイドバー幅の数値設定まで、ここの設定がサイト全体の見た目の基準になります。

この記事では、General Layout セクションにある各設定項目を順番に解説します。

設定の場所

WordPressの管理画面から 外観 → カスタマイズ を開き、General Options → General Layout に進みます。

Display Style: 表示スタイル

Display Style は、コンテンツエリアとサイト背景を「一体化して見せるか」「分離して見せるか」を切り替える設定です。

選択肢	見た目の特徴
Wide（デフォルト）	コンテンツエリアとサイト背景が同じ色で一体化し、幅広いフラットなレイアウトになる
Separate	コンテンツエリアに独自の背景色が付き、サイト背景と分離したカード風のレイアウトになる

Separate を選択すると、追加で「Contents Background（コンテンツ背景色）」と「Contents Drop-Shadow（コンテンツ影）」の設定が表示されます。

Contents Background（Separate 時のみ）

コンテンツエリアの背景色を設定します。デフォルトは白（#ffffff）です。サイト背景をグレーや淡い色にして、コンテンツエリアを白で浮かせると、ブログやコーポレートサイトによく使われるカード感のある見た目を作れます。

Contents Drop-Shadow（Separate 時のみ）

コンテンツエリアに影を付けるかどうかを切り替えます。有効にすると、コンテンツエリアがサイト背景から浮き上がって見えます。Separate スタイルと組み合わせることで、より立体感のあるデザインにできます。

Layout: サイドバーの位置

Layout では、サイト全体のデフォルトのサイドバー位置を設定します。選択肢はアイコン付きで表示されます。

選択肢	説明
Content / Sidebar	コンテンツが左、サイドバーが右に配置される（デフォルト）
Sidebar / Content	サイドバーが左、コンテンツが右に配置される
No Sidebar	サイドバーなしの全幅レイアウト

ここで設定するのはサイト全体のデフォルトです。投稿ページや固定ページごとに上書きしたい場合は、各ページの設定（Single / Page）で個別に変更できます。

Main Container Width: コンテナ幅

Main Container Width は、サイト全体の最大横幅を設定します。デフォルトは 75rem（一般的な環境では約 1200px）です。

設定した値は CSS変数 --container-width として出力され、テーマ全体に反映されます。単位は px・rem・em から選択できます。

単位	特徴
px	画面サイズに関わらず固定幅。0〜2000px で指定
rem	ルートフォントサイズ基準の相対値。レスポンシブに有利
em	親要素のフォントサイズ基準の相対値

全幅デザインにしたい場合は 100% を指定するのではなく、十分に大きな px 値（例: 1920px）を設定してください。

Content Width: コンテンツ幅

Content Width は、メインコンテンツエリアの幅をコンテナに対するパーセンテージで設定します。デフォルトは 100% です。

この設定は サイドバーなしのレイアウト（No Sidebar）を選択した場合にのみ表示されます。サイドバーありのレイアウトでは、コンテンツエリアはサイドバー幅を除いた残り幅に自動的に広がるため、この設定は非表示になります。

設定した値は CSS変数 --content-width として出力されます。単位は % のみ使用できます（30〜100%）。

Sidebar Width: サイドバー幅

Sidebar Width は、サイドバーの幅をコンテナに対するパーセンテージで設定します。デフォルトは 25% です。

この設定は サイドバーありのレイアウト（Content / Sidebar または Sidebar / Content）を選択した場合にのみ表示されます。

設定した値は CSS変数 --sidebar-width として出力されます。単位は % のみ使用できます（10〜100%）。サイドバーを広めに取りたい場合は 30〜35% 程度、ウィジェットが少ない場合は 20〜25% 程度が目安です。

サイト背景の設定

General Layout セクションには、WordPressの標準「背景」設定も含まれています。サイト全体の背景画像や背景色を設定したい場合は、このセクション内の背景設定から調整できます。

設定項目	説明
Background Image	背景に画像を設定する
Background Position	背景画像の表示位置（左上・中央など）
Background Size	背景画像のサイズ（カバー・収まるサイズ・実寸など）
Background Repeat	背景画像のタイル繰り返し設定
Background Attachment	スクロール時に背景を固定するかどうか

背景色だけ変えたい場合は、Separate スタイルと組み合わせて「サイト背景をグレー、コンテンツエリアを白」とすると、コンテンツが浮き上がって見える定番のデザインが作れます。

設定の組み合わせ例

シンプルな全幅ブログ

設定項目	値
Display Style	Wide
Layout	No Sidebar
Main Container Width	75rem
Content Width	100%

カード風のサイドバーありブログ

設定項目	値
Display Style	Separate
Contents Background	#ffffff（白）
Contents Drop-Shadow	ON
Layout	Content / Sidebar
Main Container Width	75rem
Sidebar Width	25%

まとめ

General Layout では、サイトの骨格となる表示スタイル・サイドバー位置・各エリアの幅をまとめて設定できます。設定値はすべてCSS変数に出力されるため、他のカスタムCSSからも参照できます。まずはDisplay StyleとLayoutを決めてから、各幅を微調整する流れで進めると、最終的な見た目がイメージしやすくなります。

各パネルの詳細については、以下の関連記事も参照してください。

• Apuraカスタマイザー設定の全体像
• グローバルカラー設定の使い方
• タイポグラフィ設定の使い方