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

2020 10/18

困っている人

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

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

Ｍｏｃｈｉ

作れるよ！！！！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リンク

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

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

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

困っている人

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

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

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

ワードプレステーマ「SWELL」の公式サイトはこちら

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

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

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

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

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

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

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

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

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

STEP

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

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

STEP

ページタイトル、パーマリンク、公開設定をする

ページタイトルを設定
ここは「新着記事」や「New Posts」など、ページのタイトルを入れておきましょう。
パーマリンクを設定
「new-posts」と入力しましょう。
表示状態を設定
「公開」に設定します。

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

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

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

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

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

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

STEP

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

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

STEP

ページタイトルを設定する

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

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

新着記事

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

STEP

フルワイドを追加する

まずは土台を作ります。

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

STEP

見出しを追加する

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

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

STEP

投稿リストを追加する

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

ページ左上の＋マークをクリック
SWELLブロック→投稿リストを追加

STEP

投稿リストの内容を編集する

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

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

STEP

投稿リストのカラムを設定する

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

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

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

STEP

SWELLボタンの追加

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

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

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

STEP

STEP1で追加した「フルワイド」を編集する

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

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