【デモサイト付き】SWELLでランディングページを作る方法|LP機能は超便利!

【レビュー】XWRITEでブログと企業サイトのデモサイトを作ってみた感想
初心者

SWELLで会社のランディングページを作りたい
SWELLのLP機能ってどんな設定があるの?
デモサイトがあれば見てみたい
作り方も教えて欲しい…

そんな疑問に答えます。

WordPress有料テーマ「SWELL」にはオシャレなランディングページを作成できるLP機能があります!この記事ではSWELLのLP機能の紹介と、LP機能を使ってランディングページを作る方法を解説していきます。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

【デモサイト】SWELLのランディングページを見てみよう!

【デモサイト】SWELLのランディングページを見てみよう!

SWELLのLP機能でサンプルサイトを作成しました。

SWELLランディングページのサンプル

SWELLのLPサンプルサイト

サンプルサイトの作成時間は2時間~3時間です。本記事ではこのランディングページの作り方を解説していきます。

【備考】ランディングページ以外にも企業サイトが作成できる

デモサイトはクリックすると別ウィンドウで開きます。

旅行代理店
建築設計事務所
転職・求人ポータルサイト
士業:法律事務所
不動産業者
キャンプ用品メーカー
不動産会社
歯科医院
SWELL企業デモサイト
旅館
レストラン
SWELLスピリチュアル心理カウンセラー
スピリチュアル心理カウンセラー
茶葉農園
茶葉農園
SWELLデモサイト
企業サイト
企業サイト
SWELlデモサイト(飲食店)
カフェ
鍼灸院
SWELLデモサイト(美容サロン)
美容サロン
アーティスト
不動産
バー
税理士事務所
スポーツクラブ
SWELLデモサイト学習塾
学習塾
SWELLデモサイト(企業サイト)
コーポレート
IT企業
フォトグラファー
クラブDJ
バレリーナ
カフェ

【基礎知識】SWELLのLP機能ってどんな感じなの?

SWELLのランディングページはワードプレス標準のブロックエディターで作成する仕組みです。難しいプログラムの知識はなくても直感的な操作でサクサクページを作れます

動画の通りWordPressの機能やSWELL固有の機能で各パーツを埋め込んでいく流れです。HTML+CSSなどのプログラムコードは一切変更しなくてもオシャレなサイトが作れます!

かんた

もちろん自分好みにアレンジするならCSSのスキルがあった方が色々できます!

ランディングページの作り方

SWELLでランディングページを作る手順

サンプルサイトのようなランディングページを作る方法をステップごとに解説します。

全体の流れ

  1. ページの大枠を作る(必須)
  2. ヘッダーを作る(任意)
  3. メインビジュアルを作る(任意)
  4. コンテンツエリアを作る(必須)
  5. フッターを作る(任意)

【LP】ランディングページの大枠の作り方

操作内容

LP」→「新規追加」をクリック。

SWELLでランディンページを新規作成

ダッシュボード上に「LP」の管理機能が表示されていない場合は次の設定を見直してください。
ダッシュボードのメニュー一覧から「SWELL設定」→「機能停止」をクリック。

LPを停止のチェックを外す」にオプションにチェックが入っているとLPはダッシュボードに表示されません。

操作内容

タイトルに任意の名前をつけて保存。

右側のLP関連のオプションは初期設定のままでOKです。

ページが作成できたら各パーツを作るステップです。

ランディンページのパーツ

  • ヘッダー
  • メインビジュアル
  • コンテンツエリア
  • フッター

【LP】へッダーの作り方

このステップは任意です。必須ではありません。

下の図の赤線のエリアのことを「ヘッダー」と呼びます。

SWELLのLP機能でヘッダーを作る方法
SWELLのLPデモサイト

サンプルサイトではサイトの名称をテキストとして表示して、その右にグローバルナビゲーションを表示しています。

ヘッダーで表示できるパーツの一例

  • ロゴ(テキスト、画像)
  • グローバルナビゲーション
  • SNSアイコン
  • キャッチフレーズ

ランディングページの豆知識

ランディングページの目的はコンバージョンです。商品の購入や問い合わせをしてもらうことがゴールなので、他のページに移動させるメニューなどは設置しなくてもOKです。

ヘッダーはLP機能のデフォルト使用で非表示になっています。何も設定をしなればヘッダーは表示されません。ヘッダーを表示するには次の設定が必要です。

操作内容

LP設定」→「SWELLのヘッダーを表示する」にチェックを入れる。

ヘッダー部分はサイト全体で共通です。

フックを使いLP単位でロゴ画像と、メニューを変更する方法があります。フックを使うとロゴ画像、グロナビフッター部分もページ単位で変更可能です。

かんた

LPページごとにメニューを変更する方法は次の記事で紹介しています。

かんた

LPページだけ、ロゴ画像の変更方法は次の記事で解説しています。

グローバルナビゲーション

グローバルナビゲションの設定方法についてです。

ヘッダーを表示しない場合は次のステップに進みましょう。

操作内容

外観」→「メニュー」をクリック。

SWELLのLP機能でヘッダーにメニューを追加する方法

LPページのグローバルナビゲーションの設定画面はいわゆる一般のテーマと変わりません。操作が不明な人は次の解説を参考にグローバルナビゲーションを作成してください。

既存のメニューがある場合はランディングページでもメニューは表示されますので新たに作る必要はありません。

操作内容

新しいメニューを作成しましょう」をクリック。

メニューを新規作成
操作内容

メニュー名」に適当な名前を入力。

グローバルナビ」と「スマホ開閉メニュー内」をチェック。

メニューを作成」をクリック。

グロナビを作成
操作内容

左側の「メニュー項目を追加」から任意のメニューを選択し追加。

メニューの詳細な設定方法は、SWELL公式サイトで解説しています(参考:グローバルナビの設定方法)。

操作内容

位置を管理」をクリック。

先程作成したメニューを「グローバルナビ」と「スマホ開閉メニュー内」に指定。

変更を保存」をクリック。

かんた

以上の設定でランディングページのヘッダーにグローバルナビゲーションが表示されます。

ロゴマーク

ヘッダーにロゴマークを設定する手順です。

ロゴ部分は標準でサイトの名称がテキストで表示されます。

操作内容

外観」→「カスタマイズ」をクリック。

LPのロゴ設定
操作内容

ヘッダー」→「ロゴの設定」からロゴ画像をアップロード。

ヘッダーロゴとメニューの位置も自由に変更できます。設定画面はロゴ画像を設置したページです。

操作内容

外観」→「カスタマイズ」→「ヘッダー」の順にクリック。

カスタマイザーで表示形式を確認しながら自分の好みのデザインでアレジンできます。

SWELLのLPヘッダー設定動画
かんた

以上でヘッダーの設定は完了です。
SWELLのランディンページのヘッダーの調整はカスタマイザーの中の「ヘッダー」。これを覚えましょう!

【LP】メインビジュアルの作り方

メインビジュアルはランディングページの印象を決める大事な要素です。

操作内容

LP」→作成したLPページをクリック。

作成したLPを開く

ランディングページのメインビジュアルに動画を設置し、その上にキャッチコピーを表示していきます。

操作内容

+のアイコン」→「カバー」をクリック。

LPにカバーブロックを入れる

メインビジュアルとして表示する動画をアップロードます。

デモサイトでは動画をメインビジュアルに指定していますが静止画を設定することも可能です。

操作内容

カバーブロックを選択し「メディアを追加」をクリック。

任意の動画を選択しアップロード。

画像ファイルにも対応

メインビジュアルの上に表示するキャッチコピー部分は、テキスト以外にも画像を設置することもできます。

動画の「横幅」を画面いっぱいに広げます。

操作内容

配置変更」→「全幅」をクリック。

カバーブロックの横幅を調整

動画の「高さ」を調整します。

操作内容

カバーブロックオプションの「サイズ」で任意の値を設定。

メインビジュアル動画エリアの高さは、数値+「PX、VH、VH」のいずれかを選択できます。

メインビジュアル動画にオーバーレイ(フィルター)を付ける作業です。

キャッチコピーが目立つよう動画を少し暗めにするといった設定が管理画面上から行えます。

操作内容

カバーブロックを選択し「オーバーレイ」の値を調整。

カバーブロックのオーバーレイを調整

オーバーレイの「色」「透明度」「単色・グラデーション」を自由にアレンジできます。

オーバーレイを調整する様子

メインビジュアル動画の上にキャッチコピーを入力します。

操作内容

カバーブロック上の「タイトルを入力」を選択しキャッチコピーを入力。

メインビジュアルのキャッチコピー

キャッチコピーのフォントサイズ調整などを自由に行いましょう。

フォントスタイルを変更

キャッチコピーに独自のCSSを適用させる方法を紹介します。

操作内容

高度な設定」→「追加CSSクラス」にCSSクラスを記載します。
CSSクラス名の「.」は不要です。

CSSのコードはLPページ編集画面の下に表示されるカスタムCSSの「CSS」に記載すると他のページには読み込まれません(自分の管理しやすい場所でOKです)。

カスタムCSSの追加

【LP】コンテンツエリアの作り方

メインビジュアルの下からフッターまでの間にあるコンテンツエリアの作り方を解説します。

ランディングページのコンテンツエリアを入力

ランディングページのコンテンツエリアはメインビジュアルと同様にエディターで作成します。

かんた

先程の手順で作成したメインビジュアルの下にコンテンツを入力していきます。

コンテンツエリアをオシャレに作るテクニック

  • 各セクションをフルワイドブロックで作る
  • フルワイドブロックに画像・色を入れてメリハリを付ける(単調にしない)

デザインをワンランクアップさせるテクニック

ランディングページをオシャレに仕上げたい人は「フルワイドブロック」の使い方をマスターしましょう!

まずはフルワイドブロックを使っている様子です↓

フルワイドブロックを使う様子

フルワイドブロックは名前の通り横幅いっぱいにレイアウトを広げるレイアウト系のブロックです。背景に色や画像を設置し、その上に文章や画像などのコンテンツを設置するのが主な使い方です。

フルワイドブロックの機能・役割

  • レイアウトエリアの幅を画面いっぱいに拡張できる。
  • 背景に色を指定できる
  • 背景に画像を設置できる
  • 背景に設置した画像に透明度を設定できる
  • フルワイドブロック上下の境界線をオシャレにアレンジできる

サンプルサイトではこのフルワイドブロックを各セクション単位で設定し背景を工夫しています。

かんた

サイトの背景が白だとします。ランディングページは縦長でちょっと単調なデザインになりがち。フルワイドブロックを使い背景に色を加えるだけで印象はガラリと変わります。

①フルワイドブロックの例

フルワイドブロックに画像を設置しテキストを載せた利用例です。サンプルサイトで使っているテクニックです。

フルワイドブロックの実例

②フルワイドブロックの例

フルワイドブロックにテクスチャ画像を設定し、カラムブロックを載せたセクションです。写真のような強画像をあえて使わず、主張の弱いテクスチャ系画像でコンテンツが引き立つよう工夫しています。こちらもサンプルサイトで使っているテクニックです。

フルワイドブロックの実例②

フルワイドブロックの使い方を解説します。

操作内容

+アイコン」→「フルワイド」をクリック。

フルワイドブロックを追加する方法

フルワイドブロックをクリックすると、右側にフルワイドブロックのオプションが表示されます。

背景の色や画像の設置はここから行えます。

フルワイドの背景に「色」を指定する方法を紹介します。

操作内容

フルワイドブロックオプションの「背景色」のカラーパレットから好みの色を設定。

フルワイドブロックの背景に画像を設置する方法です。

操作内容

フルワイドブロックオプションの「背景画像の設定」→「メディアから選択」をクリック。

メディアを指定

画像をアップロード後は、画像の上に表示するテキストが読みやすいよう画像の「透明度」を調整するのがポイントです。

横並びに配置する方法

サンプルサイトの次のエリアのように横並びに配置する方法です。レイアウトにはWordPress標準機能の「リッチカラムブロック」を使っています。

リッチカラムブロックレイアウト例①

リッチカラムブロックでカラムを4つ並べて配置しているレイアウトです。

カラムブロックの設置例

リッチカラムブロックレイアウト例②

リッチカラムブロックでカラムを2つ使っているレイアウトです。

リッチカラムブロックレイアウト例③

リッチカラムブロックでカラムを2つ使っているレイアウトです。

リッチヵラムブロックはかなり便利なブロック。ノーコードで横並びにデザインできます。

かんた

どんな感じでカラムブロックを使っているか動画をご覧ください↓

カラムブロックを使っている様子

カラムブロックの基本的な操作方法を解説します。

まずはカラムブロックをエディター上に表示する作業です。

操作内容

+アイコン」→「カラム」をクリック。

カラムブロックを設置

カラムの設置数オプションが表示されます。カラム数は後で変更できます。

どれか1つ」を選択をクリック。

カラム数を指定

カラムブロックの数やスタイルを調整します。

操作内容

カラムブロックを選択すると、画面右側にカラムブロックのオプションが表示されます。

カラムの数」「スタイル」を選択し、自由にアレンジしましょう。

カラムブロックのオプション

慣れていないとカラムブロックがなかなか選択できません。そんな時は次の操作を行ってください。

操作内容

適当なカラムの「+アイコン」をクリック。

ページ下の「カラム」をクリック。

カラムブロックオプションでカラムの数とスタイルを設定したら、各カラムの中身を入力します。

操作内容

編集したいカラムの「+アイコン」をクリック。

カラムの編集

カラム内に表示したいブロックを追加しカラムを完成させます。

カラムの中には複数のブロックを追加できます。テキスト(段落ブロック)・画像(メディアブロック)など自由に組み合わせてください。

サンプルサイトではカラムの中に「画像」+「キャッチコピー」+「説明文」を入力しています。

カラムの操作している様子です↓

カラムにブロックを追加する様子

背景に動画を表示するカスマイズ

サンプルサイトの次のパーツのようにコンテンツエリアの背景に動画を設置するカスタマイズ方法です。

動画を設置

このカスマイズ方法はメインビジュアル同様に「カバーブロック」を使っています。

操作内容

+アイコン」→「カバー」をクリック。

LPにカバーブロックを入れる

表示したいメディアを指定後、テキストなどを載せてアレンジしましょう。

カバーブロックを使っている様子です↓

カバーブロックを使っている様子

【LP】フッターの作り方

このステップは任意です。必須ではありません。

ランディングページの一番下に表示されるのがフッターです。

ランディングページのフッター

フッターエリアは3種類の選択肢があります。

フッターの選択肢

  1. 何も表示しない
  2. サイト共通のフッターを表示する
  3. ランディングページ専用のフッターを表示する
かんた

順番に解説します。

①何も表示しない

SWELLのランディングページのデフォルトの設定は「何も表示しない」です。フッターエリアに表示するものがない場合やその必要性がなければ何もしなくてOKです。

意図しない内容がフッターエリアに表示されている場合はランディングページの編集画面で次の操作を行ってください。

操作内容

LP設定」→「SWELLのフッターを使用する」のチェックを外す。

LPオプションのフッターのチェックを外す

②サイト共通のフッターを表示する

ランディングページ以外で表示している共通のフッターパーツを表示する場合の手順です。ランディングページ編集画面で次の設定を行ってください。

操作内容

LP設定」→「SWELLのフッターを使用する」にチェックを入れる。

LPオプションのフッターのチェックを外す

③ランディングページ専用のフッターを表示する

ランディングページ専用のフッターを作る場合は、コンテンツエリアの下にブロックを追加してテキストや画像を自由に設置しましょう。

操作内容

任意のブロックを追加」→「表示したい内容を記載

フッターにブロックを追加する

フルワイドブロックを追加して、サイト名等のテキストをセンタリングするといった表示がランディングページの定番です。

ランディングページのフッターを表示する様子

ランディングページ向けプラグイン

ランディングページ向けプラグイン

今回のランディングページ制作に使ったプラグイン3つと、おまけでもう1つ便利なプラグインを紹介します。

ランディングページ向けプラグイン

  • 問い合わせフォームプラグイン
  • アニメーション系プラグイン
  • OGP設定プラグイン
  • 【おまけ】背景にYoutube動画を埋め込むプラグイン

問い合わせフォームプラグイン

問い合わせフォーム

デモサイトの末尾のフォームは、問い合わせフォーム定番プラグイン「WPForms Lite」で作成しています。デモサイトではプラグインの基本機能だけで簡単なフォームを設置しています。

WPForms LiteはWordPress公式ディレクトリーに登録されている無料プラグインです。プラグインを有効化するとサンプルのフォームが1つ出来上がっています。そのまま貼り付けるだけでSWELLのランディングページ上で動作します。

フォームの入力オプションは管理画面上からマウスをポチポチ操作するだけで増やせます。SWELL同様にノーコードで設置できるので初心者向けのプラグインといえます。

WPForms Liteフォームの入力オプションの一例

  • テキスト
  • ドロップダウン
  • チェックボックス
  • メール
  • CAPTCHA
  • スライダー

ランディングページでフォームを導入する際のポイントを紹介します。

「ランディングページの最終目的はコンバージョン」。そのためにコンバージョンに結びつきやすい基本テクニックがあります。

ポイント

  • 入力オプションの数を最小限にする
  • 入力例を提示する

入力項目の数をできるだけ少なくする

「お名前」「電話番号」など、フォームの入力オプションはできるだけ少なくするのポイントです。

自分が問い合わせする側の立場になって考えてみましょう。入力項目が30個以上あるフォームに入力したいと思いますか?では10個ではどうですか?30個と比べると楽な印象がありますよね?

フォームを見ただけでやる気がなくなるぐらいの入力オプション数はコンバージョン率が下がります。

かんた

ランディングページの入力フォームのオプション数は最小限にしましょう。

入力例を提示する

入力オプションにはプレースホルダーなどを使い入力例がひと目でわかるようにしましょう。

初心者

ここ何を書けばいいだろ?
面倒だから入力するのやめよ

こいった離脱を避ける目的です。

WPForms Liteプラグインにはプレースホルダーを設定できるオプションがあるので活用しましょう。入力オプションに何を入力すべきか分かると離脱率がグッと下がります。

プレースホルダーを設定する

アニメーション系プラグイン

デモサイト上でテキストや画像をフンワリ動かしているのはBlocks Animation: CSS Animations for Gutenberg Blocksプラグインです。

名前がとっても長いので「Blocks Animation」と略します。

Blocks Animationプラグインでアニメーションを使っている様子

Blocks Animationプラグインを有効化するとブロック単位でアニメーションを設定できるオプションが表示されます。このプラグインの凄いところは、とにかくアニメーションのエフェクトのバリーエーションが豊富な点と、設定したアニメーションを編集画面で確認できる点です。

かんた

専門知識はいりません。自分のセンスで選ぶだけ!

OGP設定プラグイン

ランディングページのOGP設定をするプラグイン

SEO SIMPLE PACKはheaderに出力されるメタ情報を調整するプラグインです。

TwitterなんかのSNSでランディングページをリンク付き紹介されたときにアイキャッチ付きで表示されたら目立ちますよね?SEO SIMPLE PACKはSNSで共有される時のアイキャッチ画像をコントロールしてくれます!

Twitterでシェアされたときに表示される画像はOGPで管理

ランディングページのコンバージョン数をあげるには、分母となるサイト訪問者数はとても重要です。

かんた

SNS経由の流入数を増加させるためにOGPで画像を設置できるようにしましょう。

【おまけ】背景にYoutube動画を埋め込むプラグイン

Advanced WordPress Backgroundsプラグインで背景に動画を設置

Advanced WordPress Backgroundsプラグインを使うとAWBブロックが追加されます。

AWBブロックはAdvanced WordPress Backgroundsの頭文字から命名されています。

AWBブロックはレイアウト系のブロックでフルワイドブロックに似ていますが最大の特徴はYouTube動画を背景に設定できる点です

カバーブロックは動画ファイルを背景に設定できますが、動画はサーバーにアップロードしたファイルのみサポートしています。動画はファイルサイズ大きいと読み込みに時間がかかるというデメリットがあり気軽に使えません。

動画のファイルサイズが大きい場合は「AWBブロック+YouTube動画」がおすすめの構成です。

ブロックの背景

ブロック静止画動画ファイルYouTube動画
フルワイドブロック
カバーブロック
AWBブロック
各ブロックが背景に設置できるメディアの違い

プラグインの導入はほどほどに

プラグインを紹介しましたがプラグインをアレコレ導入するのはおすすめしません。プラグインを入れれば色んな機能をランディングページに実装できますが、機能が多いからといってコンバージョンに直結するわけではありません。

プラグインを導入する場合はトラブルでプラグインが使えなくなっても「プラグインの代替え」「プラグインの停止」でサイト運営が継続的できるかを考慮するのが大事です。

プラグイン名トラブル時の対処
WPForms LiteContact Form7など別の問い合わせフォームに切り替える
Blocks Animation停止してもサイト運営に影響なし
SEO SIMPLE PACKAll in One SEOなど別のプラグインに切り替える
Advanced WordPress Backgroundsカバーブロックで代用する
プラグインが使えなくなった場合の対応例

【備考】SWELLとの相性
今回紹介したプラグインは本記事作成時に利用できるSWELL最新バージョンで動作することを確認しています。SWELLのバージョンアップ、プラグインのバージョンアップで所定の動作をしない場合があるのでご注意ください。

【備考】自作したJSコードをランディングページに埋め込む方法

自作したJSコードを使う場合

ランディングページに自作したJavaScript、jQueryコードを設置する場合の方法を解説します。

ちょっとレベルが上がりますがデモサイトでは自作したJSコードは使っていません。難しそうだなと感じる人はスルーでOKです。

かんた

独自カスタマイズに興味がある人のみ参考にしてください。

今回のランディングページでは自作JSコードは使っていません。

カスタムJSコードフィールドに貼るだけ

カスタムJSをランディングページに設置する設置

ランディングページ編集画面の下にスクロールすると、カスタムCSS&JSというカスタムフィールドがあります。自作したJSコードはここに貼り付けるだけでOKです。

「CSS」ではなくその下の「JS」のフィールドに入力しましょう。

このカスタムフィールドに入力したカスタムJSは、編集しているランディングページでの読み込まれます。他のページ、他のランディングページでは読み込まれません。

SWELLのカスタムJSは他の投稿でも同じ仕様です。「特定の固定ページ」「特定の投稿記事」のみにJSを埋め込む場合はカスタムJSを活用しましょう。

コードのサンプルと出力場所

カスタムJSフィールドに入力するjQueryのサンプルコードです。

jQuery(function(){
jQuery('body').addClass('test');
});

<script></script>タグは要りません。

サンプルコードをカスタムJSフィールドに入力した場合、LPページのHTMLソースの</body>直前に次の通りが出力されます。

<script id="swell_custom_js">jQuery(function(){
jQuery('body').addClass('test');
});
</script>

外部ファイル化で読み込んでもOK

自作したJSコードを外部ファイル化してランディングページだけで読み込んでもOKです。

SWELLのLP機能はカスタム投稿(lp)です。ランディングページだけで外部ファイルを読み込みたい場合はheader.phpやfooter.phpあたりのテンプレートファイル上で条件分岐してください。

if( is_singular( 'lp' ) ) {
}

FAQ:WordPressテーマSWELLとLP機能について

FAQ:WordPressテーマSWELLとLP機能について

FAQ形式でSWELLとLP機能について解説します。

SWELLの公式サイトは?

「SWELL」という名前のテーマは複数あります。今回紹介したSWELLの公式サイトは次のアドレスです。

https://swell-theme.com/

セール、セルフバックの情報はコチラを御覧ください。

SWELLって無料テーマ?

いいえ。有料です。

価格は17,600円です。

SWELLを購入前に少し試してみたい。お試し版はあるの?

ありません。

テーマを購入したら、複数サイトで追加料金なしで使える?

使えます。

クライアントのサイト制作時でも、追加料金なしの利用規約です(GPL)。

SWELL公式サイト:複数サイトでの利用についての規約

テーマの開発者は日本人?ダッシュボードは日本語?

SWELLの開発者は日本人です。WordPressダッシュボード内も日本語です。

ランディングページのURLはどうなるの?

パーマリンク設定で「投稿名」を指定している場合は「ドメイン名/lp/任意の文字列」という形式です。

ランディングページのURL例

https://example.com/lp/product
https://example.com/lp/sales-page
https://example.com/lp/new-product

かんた

URLから「lp」を削除するカスタマイズは次の記事で解説しています。

ランディングページはいくつ作れる?

作成できる数に制限はありません。

利用しているサーバーのディスク領域内であればいくらでも作成できます。

ランディングページはクラシックエディターでも編集できる?

できます。

クラシックエディターで編集するにはClassic Editorプラグインが必要です。

ランディングページはスマホやタブレットでも見れる?

見れます。

LP機能でリビジョンが表示されません

SWELLのLP機能で作成したページではリビジョンは保存されません。

ランディングページのリビジョンを保存するカスタマイズは次の記事をご覧ください。

SWELLのLPでリビジョンを有効化するカスタマイズ

カバーブロックの動画のループは停止できる?

独自カスタマイズが必要です。カバーブロックの動画を一度きりにするカスタマイズは次の記事で解説しています。

カバーブロックのループを停止する方法

新規に作成したLPが表示されない…

WordPressではLPなどのカスタム投稿を作成しただけでは表示されないことがよくあります。

その場合は次の設定をしましょう↓

ダッシュボード左手のメニューから「設定」→「パーマリンク」と進み、設定を何も変更せずに「変更を保存」をクリック。

ランディングページをトップページに設定するカスタマイズ

ランディングページをトップページに設定するカスタマイズ
初心者

SWELLのLP機能で作ったページをトップページに表示したい。
会社のHPをSWELLの機能でペライチで表示したい。

そんな人向けのテクニックを紹介します。

LP機能のページはトップページには表示できません

SWELLの標準機能ではLP機能で作成したページをトップページに指定することはできません

ですが、次の方法だとペライチのHPが作成できます。

かんた

ページの作り方も今回紹介したLP機能とまったく同じです。

STEP
固定ページで新規作成

トップページ用のページを固定ページで作成します。

LP機能で作成したページがある場合はコードをそのままコピーして中身を貼り付ければOKです。

STEP
固定ページのページオプション

固定ページのSWELL設定で次の設定を行います。

  1. サイドバー→非表示
  2. 「コンテンツ下の余白をなくす」にチェックを入れる
STEP
固定ページ上限の余白を消す

固定ページの上下に表示される不要な余白を消すステップです。カスタマイザーで次の設定をを行います。

  1. トップページ→その他→余白なし
  2. メインビジュアル→表示しない
  3. 記事スライダー→設置しない
STEP
トップページに指定する

作成したトップページをサイトのトップページに表示するステップです。

設定」→「表示設定」の順にクリック。

ホームページの表示」で固定ページにチェックを入れ、ホームページに作成した固定ページを指定して変更を保存。

STEP
ヘッダーとフッターを消す

デフォルトで表示されるヘッダーをフッターを削除するステップです。

HTMLが苦手な初心者向けの方法です。次のサンプルコードをカスタマイザーの追加CSSに貼り付けてください。

header{
display:none;
}

footer{
display:none;
}

このコードはヘッダーとフッターを表示しない(隠す)CSSコードです。
実際にHTML上にヘッダーとフッターのソースコードは表示されますが、CSSで画面に表示しないようにするカスタマイズです。

※注意
上記のサンプル個コードをカスタマイザーに設置すると全ページでヘッダーとフッターが非表示になります投稿や固定ページで他のページを作る場合は、非表示にするページを限定しましょう。

PHPファイルのカスタマイズが楽ちんだ!という上級者の方はテーマファイル上からヘッダーとフッターのコードを削除してください。

かんた

以上で作業は完了です!

SWELLでペライチ化する方法を紹介しました。ぜひSWELLでペライチの会社HP作りにチャレンジしてみてください!

まとめ

人気WordPressテーマ「SWELL」でランディングページを作る方法を紹介しました。

SWELLはテーマ標準機能でLP機能というランディンページをカスタム投稿として作成・管理できる機能があります。

SWELLはブロックエディターが非常に使いやすく、難しいHTML+CSSコードを使わずオシャレなランディングページを作ることができるテーマです。

ぜひSWELLでランディングぺージ作りにチャレンジしてみてください!

かんた

SWELLのLP機能の詳細について公式ページをご覧ください。

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