AFFINGERには、「SWELLのフルワイド」のような、横幅いっぱいに広げられるブロックがありません。
「フルワイド」は、トップページやランディングページで、背景色を画面いっぱいに広げたり、目立つCTAを作ったりするのに便利なブロックです。
AFFINGERでは、HTMLやCSSを設定して作っていたのですが、面倒だったので、簡単に使える「ワイドブロック」プラグインを作成しました。
この記事では、ワイドブロックプラグインの使い方を紹介します。
目次
ワイドブロックとは？
「ワイドブロック」とは、コンテンツ幅を超えて、画面いっぱいに広げられるブロックのことです。
SWELLの「フルワイド」ブロックに似ています。
基本的に、「サイドメニュー」を表示しない1カラムやLPで利用します。
例えば、
- 背景色付きのセクション
- ヒーローエリア
- CTAエリア
- サービス紹介エリア
などを作るときによく利用できます。
背景を画面全体に広げられるため、重要な情報を目立たせやすくなり、メリハリのあるデザインが作れます。
WPORZトップページにも利用しています。
ワイドブロックをプラグイン化してみた
通常だとCSSを作って対応するのですが、面倒なのでプラグイン化しました。
プラグインでできること
このプラグインを導入すると、ワイドブロックを簡単に追加できます。
主な特徴は次のとおりです。
- フルワイドエリアを簡単に作成
- 背景色を変更可能
- 背景画像を設定可能（透過可）
- 余白を調整可能
- コンテンツ幅を調整可能
CSSを直接編集しなくても、管理画面から設定できます。
プラグインの使い方
プラグインをインストールする
ZIPファイルをそのままDLしてインストールして有効化。
ブロックパターンから「ワイドブロック」を選択する
投稿や固定ページの編集画面を開いて、ブロック追加画面から「ワイドブロック」を選択。
右側パネルで設定する
ワイドブロックを選択すると、右側の設定パネルから各種設定を変更できる。
- 背景色
- 背景画像（透過）
- 上下余白
- コンテンツ幅
などを自由に調整できる。
AFFINGERのトップで利用するとき
AFFINGERのトップページで利用する時は、サイドメニューを表示しないように設定が必要です。
固定ページ、投稿ページの場合
右パネルの「カラム変更」で「1カラムに変更する」または「LP化する」を選択。
トップページの場合
AFFINGER管理の「トップ/記事一覧」を選択し、「トップページのレイアウト」からサイドメニューがないレイアウトを選択。
プラグインのカスタマイズは自由
このプラグインは自由に改変できます。
再配布も自由です。
- 個人サイト
- クライアントサイト
- 商用サイト
などでも自由に利用できます。
まとめ
ワイドブロックは「横幅いっぱいまで広げて使えるブロック」です。
トップページでランディングページを利用する時にデザインの幅を広げるのに使えます。
AFFINGERなどの一部のテーマでは、ワイドブロックがないため、プラグインを作成しました。
トップページやLP風のデザインを作りたい方は、ぜひ活用してみてください。
