SWELLでサイト型ランディングページを作る手順【超初心者向けカスタマイズ】

困っている人のアイコン画像困っている人

ワードプレスでサイトを立ち上げたんだけど、「サイト型」のランディングページってどういう利点があるのかな?

僕はブログ初心者で、コードやCSSの知識は全くないんだけど
そんな僕でも作れるかな?

Mochiのアイコン画像Mochi

作れるよ!!!!

わたしもこのブログを立ち上げて2週間後に、サイト型ランディングページにデザインを変更したんだ。

この記事では、わたしがサイト型ランディングページをおすすめする理由とワードプレステーマ「SWELL」でのカスタマイズ方法を紹介するね!

 この記事はこんな人におすすめ!

  • ワードプレスでサイト型ランディングページを作りたいと思っている人
  • コードやCSSを使わずに簡単にカスタマイズしたいブログ初心者の人
  • SWELLを使っていて、デザインに悩んでいる人
目次

【結論】ランディングページはサイト型にカスタマイズするのがおすすめ

ワードプレスでブログを作るのなら、サイト型ランディングページがおすすめです。

「サイト型」と「ブログ型」ランディングページの違いとは?

サイト型・・・ホームページのように情報が整理されているデザイン。

ブログ型・・・新着記事が上から表示されるようなデザイン。

新着記事から上に表示されるブログ型だと、古い記事が読まれにくい傾向にあります。

わたしが大切にしているのは「ブログに来てくださった方が、読みたい記事を簡単に見つけられること」です。

そして、せっかく書いた記事だから1人でも多くの人に届けたいですよね。

サイト型にすべきかどうか迷っている人にはこちらの書籍がおすすめです。

わたしは実際にこの本を読んでサイト型に変更することを決意しました。

自分の日記としてブログを運営している人はブログ型でも問題ないと思います。

しかし、誰かに読んでもらえることを前提としてブログを運営しているのであればサイト型が圧倒的におすすめです。

ブログ初心者がサイト型にカスタマイズするなら、「SWELL」一択です。

困っている人のアイコン画像困っている人

なるほど・・・。
「サイト型カスタマイズ」に挑戦してみようかな。

でも、調べてみると「HTMLコードが」とか「CSSが」とか難しい言葉が多くて僕には時間がかかりすぎてしまうよ。

そんなあなたにピッタリのワードプレステーマが「SWELL」です。

 サイト型カスタマイズに「SWELL」がおすすめな理由

  • コードやCSSの知識ゼロでサイト型ランディングページを作れる。
  • 他のテーマには無い「SWELLブロック」という機能で感覚的にカスタマイズできる。

WEBに関する知識が豊富な人は、他のテーマでもサイト型ランディングページを作ることが出来ると思います。

しかし、わたしの様にコードなどの知識が乏しく、カスタマイズになるべく時間をかけたくない人は思い切ってSWELLにテーマ変更を検討してみてください。

【手順】SWELLでサイト型ランディングページをカスタマイズする方法

それではさっそく、サイト型のランディングページを作っていきましょう!

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

まずここで作るのは、新着記事の一覧ページです。

わたしのランディングページでいうと、この「もっとみるボタン」のリンク先に該当する部分です。

Mochi'sのランディングページ
Mochi’sのランディングページ
STEP
固定ページを新規追加する

まずは固定ページの新規追加を押して、新しい固定ページを作ります。

WP管理画面・固定ページの追加
WP管理画面・固定ページの追加
STEP
ページタイトル、パーマリンク、公開設定をする
WP管理画面・固定ページの編集
  1. ページタイトルを設定
    ここは「新着記事」や「New Posts」など、ページのタイトルを入れておきましょう。
  2. パーマリンクを設定
    「new-posts」と入力しましょう。
  3. 表示状態を設定
    「公開」に設定します。

ページの中身はいったん何も書かなくてOK。

ここでは真っ白なページだけを作っておき、手順③でここに新着記事が表示されるように設定します。

とりあえず、次の手順に進みましょう。

手順②固定ページでランディングページを作成する

ここでは、サイトのホーム(ランディングページ)にあたる以下の部分を作成します。

Mochi'sのランディングページ
Mochi’sのランディングページ

まずはこれらの要素を作るための土台を作りましょう。

STEP
固定ページを新規追加する

まずは固定ページの新規追加を押して、新しい固定ページを作ります。

WP管理画面・固定ページの追加
WP管理画面・固定ページの追加
STEP
ページタイトルを設定する
WP管理画面・固定ページの編集
WP管理画面・固定ページの編集

ここで付ける名前は実際には表示されないので、分かりやすければなんでも大丈夫です。

わたしは上から新着記事→カテゴリー→ピックアップ記事→プロフィールの順で表示をしていますが、お好きなようにカスタマイズしてみてください。

新着記事

Mochi'sの新着記事部分
Mochi’sの新着記事部分

まずは一番上部分にある、新着記事のパーツを作っていきましょう。

STEP
フルワイドを追加する

まずは土台を作ります。

WP管理画面・フルワイドの追加
WP管理画面・フルワイドの追加
  1. ページ左上の+マークをクリック
    ここをクリックすると、ブログに追加できるパーツが出てきます。
    これらを利用すれば自由自在にカスタマイズすることが可能です。
  2. SWELLブロック→フルワイドを追加
    クリックしてフルワイドを追加しましょう。
STEP
見出しを追加する

フルワイドを追加したら、見出しを追加しましょう。

WP管理画面・見出しの追加
WP管理画面・見出しの追加
  1. 文字もしくは画像を挿入する。
    わたしはロゴと同じフォントを使いたかったので、あえて見出しは入力せずに画像を挿入しています。
STEP
投稿リストを追加する

続いて、投稿リストを追加します。

WP管理画面・投稿リストの追加
  1. ページ左上の+マークをクリック
  2. SWELLブロック→投稿リストを追加
STEP
投稿リストの内容を編集する

ここで表示に関する設定が出来ます。

WP管理画面・投稿リストの編集
WP管理画面・投稿リストの編集
  1. 表示する投稿数の設定
    わたしはここを6に設定しています。
    お好きな数字で設定してみてください。
  2. 投稿の表示順序を設定
    新着順が選択されていればOKです。
  3. カテゴリーの表示位置
    デフォルトだとアイキャッチ内にカテゴリー名が入ってしまいます。
    デザインに被ってしまうので、「日付の横」を選択しましょう。
STEP
投稿リストのカラムを設定する

「カラム」とは、アイキャッチの行の数です。

わたしの場合、PCから見るとアイキャッチが3列に並んでいて、モバイルから見ると2列に並ぶよう設定しています。

WP管理画面・投稿リストのカラム設定
WP管理画面・投稿リストのカラム設定

PCは3列まで、モバイルは2列まで選択できますので好きな数字を選んでください。

STEP
SWELLボタンの追加

新着記事の下にボタンを付けて、記事一覧に飛べるようにします。

WP管理画面・SWELLボタンの追加
WP管理画面・SWELLボタンの追加
  1. ページ左上の+マークをクリック
  2. SWELLブロック→SWELLボタンを追加
WP管理画面・SWELLボタンの編集
WP管理画面・SWELLボタンの編集
  1. MOREボタンを選択する
    ここではいくつかのボタンが選べますが、一番下の「MOREボタン」を選択してください。
  2. リンク先のURLを追加する
    ボタンのクリック先を追加します。
    ここのアドレスは【手順①固定ページで新着記事の一覧を作成する】で作成した固定ページのURLを追加してください。
STEP
STEP1で追加した「フルワイド」を編集する

ここまできたら、下地をデザインしましょう。

WP管理画面・フルワイドの編集
WP管理画面・フルワイドの編集
  1. フルワイドを選択していることを確認
    上の画像でいう水色の部分をクリックすると、フルワイドが選択できます。
  2. コンテンツの幅と上下のpadding量を調整する
    ここでデザインを調整します。
    わたしはコンテンツの幅を記事に合わせ、padding量はPC40、モバイル0に設定しています。
  3. 背景色を選択
    お好きな背景の色を選択してください。
WP管理画面・フルワイドの編集
WP管理画面・フルワイドの編集
  1. 上下の境界線の形状を編集する
    斜線や円、波、ギザギザが選べます。
    わたしは「波」を選択しています。
  2. 上下の境界線の高さレベルを編集する
    ここで上下の境界線を調整できます。
    わたしは「4」に設定しています。

カテゴリー

Mochi'sのカテゴリーページ
Mochi’sのカテゴリーページ

続いてカテゴリーのページにアイコンを設定していきます。

STEP
フルワイドを追加する
WP管理画面・フルワイドの追加
WP管理画面・フルワイドの追加
  1. ページ左上の+マークをクリック
  2. SWELLブロック→フルワイドを追加
STEP
カラムを追加する
WP管理画面・カラムの追加
WP管理画面・カラムの追加

これは本当にすごい機能!

記事を書くときでも、何かを横に並べたいときに使うことが出来ます。

  1. ページ左上の+マークをクリック
  2. デザインブロック→カラムを追加
STEP
カラムを編集する
WP管理画面・カラムの追加
WP管理画面・カラムの追加
  1. 50/50のカラムを選択する
    カラムの広さの割合を選択できるところです。
    今回は等間隔が良いので、50/50を選択します。
WP管理画面・カラム数の選択
WP管理画面・カラム数の選択
  1. カラムの数を調整する
    わたしのブログは4つカテゴリーがあるので、カラムも「4」に設定しました。
    モバイルでは2カラム×2列になるよう設定しています。
STEP
画像とカテゴリー名、カテゴリーURLの追加
WP管理画面・画像とカテゴリー名、カテゴリーURLの追加
WP管理画面・画像とカテゴリー名、カテゴリーURLの追加
  1. +アイコンを押す
  2. 画像を追加する
WP管理画面・画像とカテゴリー名、カテゴリーURLの追加
WP管理画面・画像とカテゴリー名、カテゴリーURLの追加
  1. カテゴリー名を入力
    ここには段落を追加して、カテゴリー名を入力します。
  2. 文字を中央に揃える
    文字のサイズと位置を調整します。
  3. カテゴリーのURLをリンクさせる
    画像を押したらカテゴリーのページに飛べるように、パーマリンクを設定します。
STEP
残り3つのカテゴリーも同様の作業を行う

あとは繰り返し同様の作業を、残り3つのカテゴリーにも行います。

STEP
見出しを追加する
WP管理画面・見出しの追加
WP管理画面・見出しの追加
  1. 文字もしくは画像を挿入する。
STEP
「フルワイド」を編集する
WP管理画面・フルワイドの編集
WP管理画面・フルワイドの編集
  1. 背景色を選択
    お好きな背景の色を選択してください。

ここで、上から2つめのフルワイドにも波を設定してしまうと表示が崩れてしまいます。

上下の境界線の形状は、設定する必要がありません。

実際にブロックの境界線の表示が崩れてしまった方の例

同じような事例が発生して、上手く境界線が表示されない人は

  1. 下側のフルワイドに境界線を設定しない
  2. プレビューで確認(編集画面では上手く表示されないです)

を試してみてください。

ツイ主である、ゆりかさんの素敵な旅行系ブログもぜひ覗いてみてください!

ゆりかさんの「また旅blog」はこちらから

これで完了です。

ピックアップ記事

カテゴリーの下にはピックアップ記事が表示される様設定しています。

Mochi'sのピックアップ記事記事
Mochi’sのピックアップ記事記事

「ピックアップ記事」とは?

ランダムに選ばれる記事のことです。

訪問者がサイトに訪れるたびに、新しい記事を見つけてもらうのが狙いです。

STEP
フルワイドを追加する
WP管理画面・フルワイドの追加
WP管理画面・フルワイドの追加
  1. ページ左上の+マークをクリック
  2. SWELLブロック→フルワイドを追加
STEP
投稿リストを追加する
WP管理画面・投稿リストの追加
WP管理画面・投稿リストの追加
  1. ページ左上の+マークをクリック
  2. SWELLブロック→投稿リストを追加
STEP
投稿リストの内容を編集する

ここで表示に関する設定が出来ます。

WP管理画面・投稿リストの編集
WP管理画面・投稿リストの編集
  1. 表示する投稿数の設定
    わたしはここを4に設定しています。
    お好きな数字で設定してみてください。
  2. 投稿の表示順序を設定
    ランダムが選択されていればOKです。
STEP
見出しを追加する
  1. 文字もしくは画像を挿入する。
STEP
「フルワイド」を編集する
WP管理画面・見出しの追加
WP管理画面・見出しの追加
  1. コンテンツの幅と上下のpadding量を調整する
    ここでデザインを調整します。
    わたしはコンテンツの幅を記事に合わせ、padding量はPC40、モバイル20に設定しています。
  2. 背景色を選択
    お好きな背景の色を選択してください。
WP管理画面・上下の境界線の形状を編集
WP管理画面・上下の境界線の形状を編集
  1. 上下の境界線の形状を編集する
    斜線や円、波、ギザギザが選べます。
    
  2. 上下の境界線の高さレベルを編集する
    ここで上下の境界線を調整できます。
    わたしは「4」に設定しています。

プロフィール

Mochi'sのプロフィール
Mochi’sのプロフィール

最後のパート、プロフィールを作っていきます。

STEP
フルワイドを追加する

また同じ行程を繰り返します。

WP管理画面・フルワイドの追加
WP管理画面・フルワイドの追加
  1. ページ左上の+マークをクリック
  2. SWELLブロック→フルワイドを追加
STEP
カラムを追加する
WP管理画面・カラムの追加
WP管理画面・カラムの追加
  1. ページ左上の+マークをクリック
    
  2. デザインブロック→カラムを追加
STEP
カラムを編集する
WP管理画面・カラムの編集
WP管理画面・カラムの編集
  1. 30/70のカラムを選択する
    カラムの広さの割合を選択できるところです。
    ここでは、30/70を選択します。
STEP
プロフィール写真と名前、ボタンを追加する
WP管理画面・プロフィール写真の追加
WP管理画面・プロフィール写真の追加
  1. 左側の枠にプロフィール写真を追加
WP管理画面・プロフィール文の追加
  1. 右側の枠に段落を追加
    ここにプロフィールを書きます。
WP管理画面・SWELLボタンの追加
WP管理画面・SWELLボタンの追加
  1. プロフィールの下に「SWELLボタン」を追加
    SWELLボタンを追加し、プロフィールページのURLを挿入してください。
STEP
「フルワイド」を編集する
WP管理画面・フルワイドの編集
WP管理画面・フルワイドの編集
  1. コンテンツの幅と上下のpadding量を調整する
    ここでデザインを調整します。
    わたしはコンテンツの幅を記事に合わせ、padding量はPC60、モバイル40に設定しています。
  2. 背景色を選択
    お好きな背景の色を選択してください。
STEP
見出しを追加する
WP管理画面・見出しの追加
WP管理画面・見出しの追加
  1. 文字もしくは画像を挿入する。

あとはこのページを公開に設定したら終了です!

お疲れさまでした。

手順③「新着記事ページ」と「固定ページ」が表示されるよう設定する

上記で作成したページが表示される用に設定します。

まずはトップページ→カスタマイズへ移動します。

Mochi'sのトップページ
Mochi’sのトップページ

続いて、WordPress設定→ホームページ設定で以下の通りページを割り当てます。

Mochi'sのカスタマイズページ
Mochi’sのカスタマイズページ
  1. 固定ページを選択する
  2. ホームページに、手順②で作成した「固定ページ」を割り当てる
  3. 投稿ページには、手順①で作成した「新着記事」を割り当てる

以上です!

おつかれさまでした。

中々手順が多いように見えますが、慣れると応用を聞かせたアレンジも出来るようになると思います。

もしこの記事を参考にサイトを作成した方がいらっしゃったらぜひお知らせください!!

ここまで読んでいただき、ありがとうございました。

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

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