Aug 31, 2021

【SWELL】でトップページをサイト風にカスタマイズ②固定ページ作成編

ワードプレステーマ【SWELL】を使って、トップページをサイト風にしあげたい。

わたしもずっと憧れていてようやく完成しました。

前回は、サイト風にするためにおススメの準備編を紹介しました。

今回はいよいよ固定ページでトップページを作っていきますよ。

お待たせいたしました。

[アイコン icon-pen]このページでわかることワードプレステーマ【SWELL】を使って、トップページをサイト風にしたい。

前回作った固定ページを使って、わたしのブログのようなトップページを作成することができます。

もう一度サイト全体図を確認しましょう

今回はピンク色②から⑦を作っていきます。

内容はこちらでした。

①から順番に進めていきますよ。

安心してください。

アラフィフのわたしでもできました。

みんなできますよー♪♪

①の挨拶部分を作ろう

前回作成した固定ページ「home」を編集していきます。

STEP画像を追加しようメニュー画像「welcome」を入れます。

STEP 【フルワイドブロック】を追加しよう

これですね。

SWELL独自のブロックです。

その際に追加設定部分で波を表現しちゃいましょう。

このように追加設定すると、波が表現されますよ。

色はお好みでどうぞ

STEPメディアとテキストブロックを追加しようこのブロックは名前の通り、左右どちらかに画像・反対にテキストを入れられるブロックです。

メディアとテキストブロックを追加しましょう。

画像は左右どちらでも入れられるよ

追加設定で、レイアウトが選べます。

１．デフォルト

２．カード型

SWELL独自のレイアウトですよ。

３．ブロークングリッド

こちらもSWELL独自のレイアウトです。

画像に文字が少しかぶるデザインです。

わかりやすいように背景を黒くしましたが、つかいこなせませんでした。

わたしはデフォルトにしたよ

②の最新の記事の部分を作ろう

固定ページに続けて編集していきますよ。

ちょっと複雑だけど、ゆっくりやっていこう

STEP画像を追加しようメニュー画像を入れましょう

STEP「フルワイドブロック」を追加しようわたしは、ここは背景を白にしたかったので、追加設定はしていません。

STEP「カラムブロック」を追加しよう

カラムブロック追加しましょう。

２カラム（50/50）を選びましょう。

STEP左のカラムに投稿リストを追加しようまず段落を追加し、「＼ New Post／」の文字を入れましょう。

テキストはご自由にどうぞ

次に投稿リストブロックを追加しましょう。

その際の追加設定をすることで、最新記事を一つ大きく見せることができます。

項　目設　定表示する投稿数１レイアウトを選択カード型投稿の表示順序新着順抜粋文の文字数（ＰＣ・ＳＰ）お好みでどうぞ最大カラム数（ＰＣ）１

STEP 右のカラムにタブを追加しよう右のカラムにタブを追加しましょう。

「新着順」「人気順」とタブに名前をつけましょう。

新着順・人気順それぞれに投稿リストを追加していきますよ。

STEP新着順に投稿リストを追加しよう追加のやりかたは左カラムに投稿リストを追加した時と一緒です。

新着順のタブの中で「投稿リスト」を追加しましょう。

追加設定の表示設定をしていきます。

【Settings】の表示設定

項　目設　定表示する投稿数３レイアウトを選択テキスト型（お好みで）投稿の表示順序新着順抜粋文の文字数（ＰＣ・ＳＰ）０MOREリンクの表示テキストもっと見る（お好みで） MOREリンクのURL new-post（前回作成したURLスラッグ）

【Pickup】の表示設定

項　目設　定除外する投稿ID最新記事の投稿ID

最新記事の投稿IDを除外しないとこうなります。

左カラムと、右カラムで同じ記事を紹介してしまいます。

お好みだけど、すっきりしないなぁ・・

最新記事の投稿IDを除外するとこうなります。

うん。これがいい！！

投稿IDはダッシュボードの「投稿一覧」でわかります。

ここで、少し悲しいお知らせを・・。

記事が更新される度に、この「最新記事の投稿ID」を除外しないといけません。

もちろん、手動です。

CSSコードでやる方法も載っていたのですが、わたしはできませんでした。

何度もいいます。

手動です。

STEP 人気順に投稿リストを追加しよう人気順のタブの中で「投稿リスト」を追加しましょう。

ここでも、追加設定の表示設定をしていきますよ。

【Settings】の表示設定

項　目設　定表示する投稿数３レイアウトを選択テキスト型（お好みで）投稿の表示順序人気順抜粋文の文字数（ＰＣ・ＳＰ）０MOREリンクの表示テキストなし MOREリンクのURL なし

これで、最新の記事のブロックは完成です。

大変よくできましたー♪

③ おススメの記事の部分を作ろう

②で作成した固定ページに続けていきましょう。

STEP 画像を追加しようメニュー画像を入れましょう

STEP 【フルワイドブロック】を追加しようその際に追加設定部分で波を表現しちゃいましょう。

やり方は、挨拶部分で設定した時と同じです。

波はできましたか？？

STEP 投稿リストを追加しよう投稿リストを追加して、追加設定を行いましょう。

【Settings】の表示設定

項　目設　定表示する投稿数３レイアウトを選択カード型（お好みで）投稿の表示順序新着順抜粋文の文字数（ＰＣ・ＳＰ）０MOREリンクの表示テキストなし MOREリンクのURL なし

【Pickup】の表示設定

項　目設　定投稿IDを直接指定おススメしたい投稿IDを３つ

例えば、「6,189,1657」このようにカンマで区切りましょう。

STEP メディアとテキストブロックを追加しよう挨拶部分で紹介した「メディアとテキストブロック」を使います。

左のブロックにトイカメラの画像をいれました。

右のブロックにはトイカメラにまつわる記事を、リストを作ってリンクを貼りました。

ここはレイアウトを「カード型」にしました。

手作り石けんの紹介も、同じやりかたでやりました。画像の位置だけ、トイカメラと反対にしたよ。

④ カテゴリー部分を作ろう

カテゴリー部分を作りましょう。

STEP 画像を追加しよう
メニュー画像を入れましょう

STEP 【フルワイドブロック】を追加しよう
わたしは、ここは背景を白にしたかったので、追加設定はしていません。

STEP タブを追加しようカテゴリーの数に合わせて、タブに名前をつけましょう。

タブのスタイルも追加設定で選べるので、お好みのスタイルをどうぞ。

このスタイルは下線だよ

STEP投稿リストを追加しようそれぞれのカテゴリー内で投稿リストを追加しましょう。

追加設定は好みです。

わたしのブログの設定を紹介します。

【Settings】の表示設定

【Pickup】の表示設定

項　目設　定カテゴリー設定したいカテゴリーを選択

ここで全てのカテゴリータブに投稿リストを追加してあげましょう。

⑤SWELLの紹介部分を作ろう

次はSWELLの紹介部分を作っていきましょう。

前回作っておいた「ブログパーツ」の出番です。

STEP 画像を追加しようメニュー画像を入れましょう

STEP 【フルワイドブロック】を追加しよう
その際に追加設定部分で波を表現しちゃいましょう。

やり方は、挨拶部分で設定した時と同じです。

もう、波を作るのは簡単ですね♪

STEP 「カラムブロック」を追加しようカラムブロックを追加しましょう。

２カラム（50/50）を選びましょう。

STEPブログパーツを追加しよう左右のカラムブロックに、それぞれブログパーツを追加していきましょう。

まずは、ブログパーツを追加しますよ。

そうすると、セレクトボックス（ドロップダウンメニュー）から登録したブログパーツを選ぶことができます。

左右それぞれにブログパーツを追加して選ぶだけで、できあがります。

あら、簡単♪

⑥ キーワード検索の部分を作ろう

キーワード検索部分を作っていきましょう。

もうちょっとだよー。ファイトー

STEP 画像を追加しよう
メニュー画像を入れましょう

STEP 【フルワイドブロック】を追加しよう
わたしは、ここは背景を白にしたかったので、追加設定はしていません。

STEPタグクラウドを追加しようタグクラウドを追加しましょう。

これですね。

追加設定はいじらなくていいとおもいますが、確認しましょう。

タクソノミーが「タグ」になっていればOKです。

できましたか？？

お疲れ様でした

まとめ

前回、トップページをサイト風にするために必要な画像などの準備を行いました。

今回は用意した固定ページにトップページを作り上げてきましたね。

作業をしていて気づいた方もいたかもしれません。

同じような作業を繰り返してない？？

そうなんです。

繰り返しなんです。

気づいたあなたは、自分の作りたいサイト風のトップページを作れるようになっていますよ。

SWELLの独自ブロック「フルワイドブロック」をいれて、表現したいブロックを入れていく。

テキストや投稿リスト・画像などを追加していく。

サイト風のトップページをつくるのはそういうことなんだとわたしも気が付きました。

それがわかったら、できたばかりのトップページをすでにいじりたくてしょうがありません。

最初は真似で大丈夫です。

この記事でサイト風のトップページを作りたい方の参考になったらうれしいです。