
ワードプレスでサイトを立ち上げたんだけど、「サイト型」のランディングページってどういう利点があるのかな?
僕はブログ初心者で、コードやCSSの知識は全くないんだけど
そんな僕でも作れるかな?

作れるよ!!!!
わたしもこのブログを立ち上げて2週間後に、サイト型ランディングページにデザインを変更したんだ。
この記事では、わたしがサイト型ランディングページをおすすめする理由とワードプレステーマ「SWELL」でのカスタマイズ方法を紹介するね!
この記事はこんな人におすすめ!
- ワードプレスでサイト型ランディングページを作りたいと思っている人
- コードやCSSを使わずに簡単にカスタマイズしたいブログ初心者の人
- SWELLを使っていて、デザインに悩んでいる人
【結論】ランディングページはサイト型にカスタマイズするのがおすすめ

ワードプレスでブログを作るのなら、サイト型ランディングページがおすすめです。
「サイト型」と「ブログ型」ランディングページの違いとは?
サイト型・・・ホームページのように情報が整理されているデザイン。
ブログ型・・・新着記事が上から表示されるようなデザイン。
新着記事から上に表示されるブログ型だと、古い記事が読まれにくい傾向にあります。
わたしが大切にしているのは「ブログに来てくださった方が、読みたい記事を簡単に見つけられること」です。
そして、せっかく書いた記事だから1人でも多くの人に届けたいですよね。
サイト型にすべきかどうか迷っている人にはこちらの書籍がおすすめです。
わたしは実際にこの本を読んでサイト型に変更することを決意しました。
自分の日記としてブログを運営している人はブログ型でも問題ないと思います。
しかし、誰かに読んでもらえることを前提としてブログを運営しているのであればサイト型が圧倒的におすすめです。
ブログ初心者がサイト型にカスタマイズするなら、「SWELL」一択です。


なるほど・・・。
「サイト型カスタマイズ」に挑戦してみようかな。
でも、調べてみると「HTMLコードが」とか「CSSが」とか難しい言葉が多くて僕には時間がかかりすぎてしまうよ。
そんなあなたにピッタリのワードプレステーマが「SWELL」です。
サイト型カスタマイズに「SWELL」がおすすめな理由
- コードやCSSの知識ゼロでサイト型ランディングページを作れる。
- 他のテーマには無い「SWELLブロック」という機能で感覚的にカスタマイズできる。
WEBに関する知識が豊富な人は、他のテーマでもサイト型ランディングページを作ることが出来ると思います。
しかし、わたしの様にコードなどの知識が乏しく、カスタマイズになるべく時間をかけたくない人は思い切ってSWELLにテーマ変更を検討してみてください。
【手順】SWELLでサイト型ランディングページをカスタマイズする方法

それではさっそく、サイト型のランディングページを作っていきましょう!
SWELLを購入したばかりの方は、まずこちらの記事通り初期設定を行ってね!
手順①固定ページで新着記事の一覧を作成する
まずここで作るのは、新着記事の一覧ページです。
わたしのランディングページでいうと、この「もっとみるボタン」のリンク先に該当する部分です。

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


- ページタイトルを設定
ここは「新着記事」や「New Posts」など、ページのタイトルを入れておきましょう。 - パーマリンクを設定
「new-posts」と入力しましょう。 - 表示状態を設定
「公開」に設定します。
ページの中身はいったん何も書かなくてOK。
ここでは真っ白なページだけを作っておき、手順③でここに新着記事が表示されるように設定します。
とりあえず、次の手順に進みましょう。
手順②固定ページでランディングページを作成する
ここでは、サイトのホーム(ランディングページ)にあたる以下の部分を作成します。


まずはこれらの要素を作るための土台を作りましょう。
まずは固定ページの新規追加を押して、新しい固定ページを作ります。


ここで付ける名前は実際には表示されないので、分かりやすければなんでも大丈夫です。
わたしは上から新着記事→カテゴリー→ピックアップ記事→プロフィールの順で表示をしていますが、お好きなようにカスタマイズしてみてください。
新着記事

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

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

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

- ページ左上の+マークをクリック
- SWELLブロック→投稿リストを追加
ここで表示に関する設定が出来ます。

- 表示する投稿数の設定
わたしはここを6に設定しています。
お好きな数字で設定してみてください。 - 投稿の表示順序を設定
新着順が選択されていればOKです。 - カテゴリーの表示位置
デフォルトだとアイキャッチ内にカテゴリー名が入ってしまいます。
デザインに被ってしまうので、「日付の横」を選択しましょう。
「カラム」とは、アイキャッチの行の数です。
わたしの場合、PCから見るとアイキャッチが3列に並んでいて、モバイルから見ると2列に並ぶよう設定しています。

PCは3列まで、モバイルは2列まで選択できますので好きな数字を選んでください。
新着記事の下にボタンを付けて、記事一覧に飛べるようにします。

- ページ左上の+マークをクリック
- SWELLブロック→SWELLボタンを追加

- MOREボタンを選択する
ここではいくつかのボタンが選べますが、一番下の「MOREボタン」を選択してください。 - リンク先のURLを追加する
ボタンのクリック先を追加します。
ここのアドレスは【手順①固定ページで新着記事の一覧を作成する】で作成した固定ページのURLを追加してください。
ここまできたら、下地をデザインしましょう。

- フルワイドを選択していることを確認
上の画像でいう水色の部分をクリックすると、フルワイドが選択できます。 - コンテンツの幅と上下のpadding量を調整する
ここでデザインを調整します。
わたしはコンテンツの幅を記事に合わせ、padding量はPC40、モバイル0に設定しています。 - 背景色を選択
お好きな背景の色を選択してください。

- 上下の境界線の形状を編集する
斜線や円、波、ギザギザが選べます。
わたしは「波」を選択しています。 - 上下の境界線の高さレベルを編集する
ここで上下の境界線を調整できます。
わたしは「4」に設定しています。
カテゴリー

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

- ページ左上の+マークをクリック
- SWELLブロック→フルワイドを追加

これは本当にすごい機能!
記事を書くときでも、何かを横に並べたいときに使うことが出来ます。
- ページ左上の+マークをクリック
- デザインブロック→カラムを追加

- 50/50のカラムを選択する
カラムの広さの割合を選択できるところです。
今回は等間隔が良いので、50/50を選択します。

- カラムの数を調整する
わたしのブログは4つカテゴリーがあるので、カラムも「4」に設定しました。
モバイルでは2カラム×2列になるよう設定しています。

- +アイコンを押す
- 画像を追加する

- カテゴリー名を入力
ここには段落を追加して、カテゴリー名を入力します。 - 文字を中央に揃える
文字のサイズと位置を調整します。 - カテゴリーのURLをリンクさせる
画像を押したらカテゴリーのページに飛べるように、パーマリンクを設定します。
あとは繰り返し同様の作業を、残り3つのカテゴリーにも行います。

- 文字もしくは画像を挿入する。

- 背景色を選択
お好きな背景の色を選択してください。
ここで、上から2つめのフルワイドにも波を設定してしまうと表示が崩れてしまいます。
上下の境界線の形状は、設定する必要がありません。
実際にブロックの境界線の表示が崩れてしまった方の例
ブログ大改革楽しい🥰
— ゆりか⁑Matatabi blog (@shirogohanblog) October 6, 2020
でも、どう頑張っても、ブロックの境目がジャキジャキになる🥺
それにフルワイドにならない🥺
なぜ…
今日はこれを解決したい…#SWELL#初心者ブロガーさんと繋がりたい pic.twitter.com/kmNI1x7ub3
同じような事例が発生して、上手く境界線が表示されない人は
- 下側のフルワイドに境界線を設定しない
- プレビューで確認(編集画面では上手く表示されないです)
を試してみてください。
ツイ主である、ゆりかさんの素敵な旅行系ブログもぜひ覗いてみてください!
これで完了です。
ピックアップ記事
カテゴリーの下にはピックアップ記事が表示される様設定しています。

「ピックアップ記事」とは?
ランダムに選ばれる記事のことです。
訪問者がサイトに訪れるたびに、新しい記事を見つけてもらうのが狙いです。

- ページ左上の+マークをクリック
- SWELLブロック→フルワイドを追加

- ページ左上の+マークをクリック
- SWELLブロック→投稿リストを追加
ここで表示に関する設定が出来ます。

- 表示する投稿数の設定
わたしはここを4に設定しています。
お好きな数字で設定してみてください。 - 投稿の表示順序を設定
ランダムが選択されていればOKです。

- 文字もしくは画像を挿入する。

- コンテンツの幅と上下のpadding量を調整する
ここでデザインを調整します。
わたしはコンテンツの幅を記事に合わせ、padding量はPC40、モバイル20に設定しています。 - 背景色を選択
お好きな背景の色を選択してください。

- 上下の境界線の形状を編集する
斜線や円、波、ギザギザが選べます。
- 上下の境界線の高さレベルを編集する
ここで上下の境界線を調整できます。
わたしは「4」に設定しています。
プロフィール

最後のパート、プロフィールを作っていきます。
また同じ行程を繰り返します。

- ページ左上の+マークをクリック
- SWELLブロック→フルワイドを追加

- ページ左上の+マークをクリック
- デザインブロック→カラムを追加

- 30/70のカラムを選択する
カラムの広さの割合を選択できるところです。
ここでは、30/70を選択します。

- 左側の枠にプロフィール写真を追加

- 右側の枠に段落を追加
ここにプロフィールを書きます。

- プロフィールの下に「SWELLボタン」を追加
SWELLボタンを追加し、プロフィールページのURLを挿入してください。

- コンテンツの幅と上下のpadding量を調整する
ここでデザインを調整します。
わたしはコンテンツの幅を記事に合わせ、padding量はPC60、モバイル40に設定しています。 - 背景色を選択
お好きな背景の色を選択してください。

- 文字もしくは画像を挿入する。
あとはこのページを公開に設定したら終了です!
お疲れさまでした。
手順③「新着記事ページ」と「固定ページ」が表示されるよう設定する
上記で作成したページが表示される用に設定します。
まずはトップページ→カスタマイズへ移動します。

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

- 固定ページを選択する
- ホームページに、手順②で作成した「固定ページ」を割り当てる
- 投稿ページには、手順①で作成した「新着記事」を割り当てる
以上です!
おつかれさまでした。
中々手順が多いように見えますが、慣れると応用を聞かせたアレンジも出来るようになると思います。
もしこの記事を参考にサイトを作成した方がいらっしゃったらぜひお知らせください!!
ここまで読んでいただき、ありがとうございました。