WordPressテーマ「AFFINGER（アフィンガー）」では、管理画面やカスタマイザーを使ってサイト全体のデザインや表示幅を柔軟に調整できます。
1カラム構成で企業サイトやポートフォリオサイトを作成することも可能ですが、PCブラウザで画面いっぱいに画像やブロックを表示したい というケースもあるでしょう。
ただし、AFFINGERではヘッダー画像以外の部分を全幅表示にするには、管理画面での設定やブロックの配置に少し工夫が必要です。
この記事では、AFFINGERでヘッダー以外のブロックや背景を全幅（ワイド）表示にする設定方法 を解説します。
トップページやランディングページなどをよりダイナミックに見せたい方は、ぜひ参考にしてください。
Before
AFFINGERの１カラムでブロックを使ったトップページを作成してみました。
PC閲覧時のサイトの幅は1200pxにしてあります。
AFFINGER PC閲覧時のサイトの幅設定
デフォルトは1060px、960px以上で設定を推奨
WordPressメニュー「AFFINGER管理」→「全体設定」
画面上部全幅表示の画像は、カスタマイズで設定しています。
AFFINGER ヘッダー画像設定
WordPressメニュー「外観」→「カスタマイズ」→「ヘッダー画像」
ヘッダー画像の横幅を100%にするにチェック
ヘッダー画像推奨サイズ： 2200 × 900px
画像切り抜き、ヘッダー高さ調整可能
ページの幅を全体的に広げる
ヘッダー下の「サービス」と「LINEスタンプ」のブロックを全幅表示してみました。
AFFINGER LP・1カラム時を全てワイド化する
WordPressメニュー「AFFINGER管理」→「全体設定」→「サイト全体のレイアウト一括設定」
「LP・1カラム時を全てワイド化する（β）」にチェックを入れる
ヘッダー画像やメニューを表示させたい場合は、「LP時にヘッダー（headerエリア）を表示する 」にチェックを入れる
この設定をしておかないと、PC閲覧時のサイトの幅までしか対応できず、記事作成画面のブロックで「全幅」を選択しても、反映されません。
ブロックは、グループ化して「全幅」表示にしておきます。
ブロックが全幅で表示されるようになりました。
ブロックの表示選択で「幅広」にすると、全幅にならず、両端に余白が設けられます。
「LP・1カラム時を全てワイド化する（β）」を選択することによって、画像サイズが違うとレイアウトが崩れて表示されたりするので、後で整えていきましょう。
画像を選択し、設定で幅や高さを調整できますので、カラムを使う場合は、ここで整えましょう。
全幅で背景を設定する
画像のように、テキストを中央に配置し、背景パターンや色をつけて全幅で表示する方法について。
まずテキスト（段落）やボタンを作成、上下にスペースが欲しい場合は「スペーサー」を配置します。
全選択してグループ化にしておきます。
グループの配置設定で「中央揃え」を選択します。
グループの背景を設定します。
AFFINGERでは、グループのスタイルとして、7種用意されています。
- 斜線
- グリッド
- ドット
- ライン
- ライン（太）
- 角括弧
- かぎ括弧
※このテキストの下の背景はグリッドです。
グループの色選択で「背景」をクリックすると、単色、またはグラデーションで設定できます。
全幅で背景画像を設置する
画像のように背景を画像にしたい場合は、グループ化ではなく、ブロックで「カバー」を選択します。
「カバー」を選択すると画像を選択できるようになるので、アップロードするか、メディアライブラリから選択します。
「タイトルを入力」が表示されるので、テキストやボタンなどを配置します。
テキストなどの位置は左右・中央が選べます。
カバー設定では、画像を固定・繰り返しの設定や、表示する画像位置を選択できます
スタイルの設定では、色やフィルターの設定ができます。
カバー画像を最初選択すると、暗めに見えますが「オーバーレイの不透明度」を0にすると、本来の画像色になります。
背景を暗めにすると、白テキストが見やすくなります。
カバーの表示設定で「全幅」を選択します。
まとめ
設定後は必ずモバイル表示も確認し、画像の配置やテキストの改行などチェックしましょう。
ブログタイプの２カラムですと、あまり使わない機能ですが、AFFINGERでは１カラムで作れるサイト作りに役立つ機能が揃っています。
ヘッダーや、全幅に関しては「AFFINGER管理」での設定をしておかないと反映されない部分があるので、思ったような表示にならない時には、管理画面もチェックしてみてください。