SWELLのフルワイドブロック機能を解説|WordPressでLPを作るのに便利!

WordPressでLPを作るのに便利!SWELLのフルワイドブロック機能を解説

ブログサイトだと基本的には記事コンテンツを作成すると思いますが、特定の商品サービスのプロモーション強化のためにLPを作りたいという場面もあると思います。

そんなときSWELLのフルワイドブロック機能を使えば簡単にLP向けのデザインコンテンツを作成することが可能です。

この記事のSWELL公式マニュアルはこちら

【SWELL専用ブロック】フルワイドブロックの使い方 | 【公式サイト】WordPressテーマ SWELL

この記事の目次

フルワイドブロックの設置方法

「ブロックを追加」から「フルワイド」を選択します。

SWELL フルワイドブロックの設置方法

選択すると「見出し」と表示されたグレー背景のブロックが設置されます。

この状態から好きなブロックを追加していきます。

SWELL フルワイドブロック 初期設定

フルワイドブロックの設定項目

エディター上でフルワイドブロックを選択すると、右サイドメニューにフルワイドブロックの設定項目が表示されます。

SWELL フルワイドブロック 設定項目

コンテンツサイズ

SWELL フルワイドブロック コンテンツサイズ

コンテンツの横幅

フルワイドブロックの横幅を指定します。

赤いボックスの表示幅にご注目ください。

記事:設置したページのコンテンツと同じ幅で表示
SWELL フルワイドブロック コンテンツの幅(記事)
サイト幅:サイト全体のコンテンツ最大幅と同じ幅で表示
SWELL フルワイドブロック コンテンツの幅(サイト幅)
フルワイド:ブラウザの最大幅と同じ幅で表示
SWELL フルワイドブロック コンテンツの幅(フルワイド)

上下の余白

フルワイドブロックの上下の余白(padding)を指定します。

PCとスマホそれぞれ5段階で指定可能です。

SWELL フルワイドブロック 上下の余白

padding量 0にすると…

SWELL フルワイドブロック 上下の余白(Padding 0)

カラー設定

SWELL フルワイドブロック カラー設定

テキストカラー

フルワイドブロック内のテキストカラーを設定します。

ブロックに個別にテキストカラーを指定している場合は、個別ブロックで指定したカラーが優先されます。

SWELL フルワイドブロック テキストカラー

背景色

初期値でグレーの背景色の変更ができます。

スライダーで不透明度の指定も可能です。

SWELL フルワイドブロック 背景色

背景画像の設定

SWELL フルワイドブロック 背景画像

フルワイドブロックの背景に画像を設定することができます。

画像を設定すると背景色で設定していた色でオーバーレイの調整ができるようになります。

テキストが読みづらいときの調整に便利です。

SWELL フルワイドブロック 背景画像 オーバーレイ
背景画像を設定すると点線枠の項目が出現

また背景画像の見せ方に効果をつけることができます。

SWELL フルワイドブロック 背景効果設定

背景効果を適用したフルワイドブロックを作成したのでご覧ください。

Fixed Background

背景効果 Fixed Background

なんとなくコアラさんにしてみました!

スクロールすると背景画像が固定された状態でスクロールします。

パララックス効果をつける

背景効果 パララックス効果

ちょっとわかりにくいかもしれませんが、どうでしょう?

コアラさんの背景画像とテキストでスクロールするスピード(スクロール量)が若干違います。

奥行きが出る感じです。

これだけでちょっとイケてるサイトになった気分です!

上下の境界線の形状

SWELL フルワイドブロック 上下の境界線の形状

フルワイドブロックでは上下の境界線の形状を設定できます。

上下の境界線の形状 斜線

斜線のみ逆向きにできます。

上下の境界線の形状 円

上下の境界線の形状 波

上下の境界線の形状 ジグザグ

  • 境界線の形状は上部と下部それぞれで設定可能です。
  • 背景画像を設定している場合は形状を変更できません

見出しはセクションを使う

フルワイドブロック内で通常の見出しスタイルを用いるとかなりごちゃっとした見栄えになります。

SWELL公式サイトでもおすすめしているのですが、フルワイドブロックで見出しを使う場合は、「セクション用」スタイルを用いるようにしましょう。

WordPressでブログもLPも簡単に作りたいならSWELLがおすすめ

SWELLはブログを書くのにとってもおすすめのテーマですが、フルワイドブロックを使えば、簡単にLPコンテンツを作ることができます。

さらにSWELLには投稿記事や固定ページとは別に「LP機能」が提供されています。

実際にLPを作りたい場合は、「LP」からページを新規作成して、フルワイドブロックでコンテンツを作っていくやり方がおすすめです。

SWELLにはその他にも素敵なオリジナルブロックが沢山あります。

オリジナルブロックの一覧はこちらで確認できます。

もっと気軽に、楽しく記事を書こう。

WordPressでLPを作るのに便利!SWELLのフルワイドブロック機能を解説

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

satouのアバター satou 金融系Web広告担当

ブログ未経験でいきなりワードプレスからはじめました!金融業界で働くただのWeb広告担当者です。Web広告のことや生活を豊かにする情報をシェアしていきます。
最近はワードプレステーマ『SWELL』にどっぷりハマってます。しばらく『SWELL』についてばかり書くことになりそう。

この記事の目次