【SWELL】超初心者向け!サイト型ランディングページの作り方

ゆりか

こんにちは、ゆりかです。

目次

はじめに

最近、『また旅ブログ』のトップページの作り方を質問される機会が増えました。私も作成した当初は、色んな方に助けてもらったので、次は私の番!ということで。

今回は、SWELLの『サイト型ランディングページの作り方』を超初心者向けに解説します。

ゆりか

少し手間はかかりますが、とってもステキなトップページができますよ。



▼ 【デスクトップ版】2021年9月現在のトップページはこんな感じです。

Matatabi blogトップページ
Matatabi blogトップページ
Matatabi blogトップページ
Matatabi blogトップページ
Matatabi blogトップページ
Matatabi blogトップページ

SWELLの公式HPはこちら

トップページのカスタマイズについて

SWELLでは、ダッシュボードのカスタマイズからボタン一つでトップページが作成できます。

ですが、今回のサイト型ランディングページは、固定ページで作成をします!

ゆりかのダッシュボード

サイト型ランディングページって何?

そもそも『サイト型ランディングページ』って何かと言うと、

  • サイト型とは:ホームページのように、カテゴリーごとに分かれているデザイン!知りたい情報がすぐに見つかる、というメリットがあります!
  • ブログ型とは:新しい記事が順番に表示されるデザイン。

LP(ランディングページ)とは

検索結果やWeb広告を経由して、ユーザーが最初にアクセスするページです。縦長の1枚のみのレイアウトが人気!

【SWELL】超初心者向け!サイト型ランディングページの作り方

ではさっそく作成手順を解説します。

手順① 固定ページで新着記事を作成する

まずは、この新着記事の部分を作成します。

Matatabi blogの新着記事
STEP
ダッシュボードの固定ページ→新規追加
Matatabi blogのダッシュボード

ダッシュボードから固定ページ→新規追加を押して新しい固定ページを作ります。

STEP
タイトルを設定する
サイト型ランディングページの作り方

自分で分かれば、どんな名前でもOKです。

手順② 背景を設定する

タイトルをつけたら、次は背景を設定しましょう。

STEP
フルワイドを設定する
サイト型ランディングページの作り方
STEP
背景を編集する

写真では、もう記事が表示されていますが、記事の出し方は次の工程で解説します!

サイト型ランディングページの作り方
  1. この辺をクリックすると、右の背景を編集画面が出てきます。
  2. コンテンツの横幅は’’記事’’に設定。
  3. 上下のpadding量はPC=40SP(モバイル)=0に設定。
  4. 記事のタイトルや説明文の表示カラーです。好みのカラーに設定しましょう。
  5. 背景色を設定します。後ほど詳しく解説しますが、タイトルを画像に設定した方は画像の背景と同じ色に設定すると、ロゴだけが表示されたように見えます。
STEP
続き
サイト型ランディングページの作り方
  1. 上の境界線を設定します。好みの形状と高さのレベルに設定してください。私は、形状を波、レベルは5に設定しています。
  2. 下の境界線も同様に設定しましょう。

手順③ 新着記事の投稿部分を作成する

次に、新着記事の投稿部分を作成します。

STEP
タイトルを入れる
サイト型ランディングページの作り方

新着記事』や『NEW』など、好みのタイトルを入れてください。私は、ブログのタイトルと同じフォントにしたかったので、画像を挿入しています。

▼ 画像の入れ方はSTEP3へ

STEP
タイトルに画像を挿入する方法
手順② 新着記事の投稿部分を作成する
  1. 『見出し』をdeleteで消去します。
  2. +ボタンを押して『画像』と検索。
  3. 画像を選択して、タイトルにしたい画像を選択します。
  • はじめて画像をアップロードする方は、画像→メディアライブラリ→画像をドラッグして追加してください。
  • 画像は好みの大きさに調整できます。
  • 背景の項でも確認した通り、トップページの背景と画像の背景を同じ色にすることで、次のように’’NEW’’というロゴだけが見えるようになります。
STEP
投稿リストを設定する
手順② 新着記事の投稿部分を作成する
  1. +ボタンを押し、『投稿リスト』と検索します。
  2. 『投稿リスト』を選択すると、リストが表示されます。
STEP
投稿リストを整理する
手順② 新着記事の投稿部分を作成する
  1. 枠内をクリックすると、右の『settings一覧』が出てきます。
  2. settingsになっていることを確認
  3. 私は6つに設定していますが、ぜひ好みの枚数に設定してください。
  4. レイアウトもお好みでOK!私はカード型です。
  5. 新着記事なので『新着順』を選択。
  6. 『降順』を選択。
STEP
続き
サイト型ランディングページの作り方
  1. お好みの表示を選択してください。
  2. 『カラム数』とは、横に並ぶ記事の数です。(PC)はデスクトップで見たときのカラム数なので、私は3列に設定しています。
  3. (SP)は、モバイルで見たときの数です。私は2列派。

同じ要領で、Checkの部分を作ってみましょう。

サイト型ランディングページの作り方

Checkでは、ランダムに記事を表示して興味のある記事を見つけてもらえるよう、誘導しています。投稿リストのsettingsで『投稿の表示順序』を’’ランダム’’に設定しましょう。

投稿リストを作成するときの注意点

サイト型ランディングページの作り方

1つ目と2つ目の投稿リストの境界線を設定する場合、2つ目の’’上部の境界線の高さのレベル’’は『0』にしてください!

両方ともレベル1〜5に設定するとおかしなことになります。

ゆりか

ここまでで、投稿リストの設定はできましたね。
すごいです!!ちょっと一息。

手順④ カテゴリーを設定する

続いて、カテゴリーの部分の設定を行います。

サイト型ランディングページの作り方
STEP
フルワイドを設定する

新着記事を作成したときと同じ手順です。

サイト型ランディングページの作り方
STEP
タイトルを入れる

こちらも同様です。

STEP
カラムを設定する
サイト型ランディングページの作り方 カラムの設定

今までと同様、+ボタンからカラムを選択します。

STEP
カラムのパターンを選択する
サイト型ランディングページの作り方 カラムの設定

50/50のカラムを選択してください。これで等間隔のカラムができます。

STEP
画像を挿入する

カテゴリーの画像を挿入しましょう。(私はCanvaで作成しました!)

サイト型ランディングページの作り方 カラムの設定
  1. +部分をクリック。
  2. 『画像』と検索して、タイトルの画像を挿入したときと同様、画像を選択します。
STEP
カラム数を決める
サイト型ランディングページの作り方 カラムの設定

中央に出てくる+マークを押すと、カラム数を増やすことができます。みなさんのカテゴリー数に合わせて設定してください。

STEP
リンクを設定する

カテゴリーのページに飛べるように、URLを設定しましょう。

サイト型ランディングページの作り方 カラムの設定
  1. 設定した画像をクリックするとメニューが出てくるので、カテゴリーページのURLを入力します。
  2. 私は、画像自体に『日本のこと』と入れていますが、+ボタン→『段落』を表示して、そこにに書くこともできます!
ゆりか

カテゴリー部分はこれで完成!
あとちょっとです!!

手順⑤ プロフィール欄を作成する

最後は、プロフィール欄の作成です。

プロフィールは、ダッシュボードのカスタマイズからも作れるので、お好きな方を設定してください。

プロフィールの作成方法
STEP
カラムを設定する

先ほどと同様にフルワイドを選択後、カラムを設定します。

プロフィールの作成方法

今回は、30/70を選びます。左側に顔写真、右側に文章を書くためです。

写真を2枚使いたいとか、大きな写真の下に文章を入れたいなどあれば、カラムを好みの比率に調節してください。

STEP
画像と名前を入力する

カテゴリーのときと同様、画像を挿入しましょう。こちらで、大きさの調整もできます。

プロフィールの作成方法
  1. 画像下のプラスボタンを押します。
  2. メニューから段落を選ぶと、文字が入力できるので名前を入力します。
STEP
名前入を中央寄せにする

名前を入力しただけだと、左に寄ってしまうので、中央に寄せておきましょう。

プロフィールの作成方法
  1. 名前を入力した辺りをクリックすると、メニュが出てくるので、三本線を選択します。
  2. テキストの中央寄せを選択します。
STEP
文章を入力しましょう。
プロフィールの作成方法

先ほどと同様、+ボタン→段落を押して、本文を入力します。

STEP
最後にSWELLボタンを設定しましょう。

SWELLボタンを設定して、プロフィールページに飛べるようにします。

プロフィールの作成方法
STEP
続き
プロフィールの作成方法
  1. Text部分に、’’プロフィール’’や’’自己紹介’’など、好みのボタン名を入力します。
  2. プロフィールページのリンクを貼ります。
  3. 好みのボタンを選びます。
  4. 名前のときと同様、位置を決めます。

これで固定ページの編集は終わりです!!

ゆりか

お疲れ様でした!!

手順⑥ 『固定ページ』を表示させる

最後に、『固定ページ』をトップページに表示させます。

これで終わりなのであと少し頑張りましょう!

STEP
カスタマイズページへ
『固定ページ』を表示させる

ダッシュボードからカスタマイズ』に行きます。

STEP
WordPress設定→ホームページ設定を押す
プロフィールの作成方法
STEP
続き
『固定ページ』を表示させる
  1. 『固定ページ』を選択します。
  2. 今まで作っていた『トップページ』を選択します。
ゆりか

これで、作成したLPがトップ画面に表示されるはずです!
本当にお疲れ様でした!

まとめ

今回は、私が設定している通りにカスタマイズする方法を紹介しました!

この操作に慣れたら、表示する投稿を入れ替えたり、画像・動画を入れたり、是非みなさんの好みのカスタマイズに変更してみてくださいね〜!

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

よかったらシェアしてね!
目次
閉じる