【簡単】SWELLカスタマイズ｜サイト型トップページの作り方
この記事を読めば、ブログテーマ「SWELL」でサイト型トップページの作り方がわかります。
当ブログのトップページはサイト型で表示されています。
ブログテーマ『 SWELL 』を使うと、サイト型のトップページを簡単につくることができます。
サイト型のトップページにすると、
- オリジナリティを出すことができる
- 訪問者がのぞむコンテンツに誘導しやすい
などのメリットがあります。
コードやCSSの知識が無くても、おしゃれなサイトをつくることができます。
この記事ではサイト型のトップページを作り方を解説しています。
「私も作ってみたい！」と思った方は、ぜひご覧ください。
SWELLでサイト型のブログをつくる順序
サイト型のブログをつくるには、
- 新着記事一覧ページをつくる
- ホームページをつくる
- 作成したホームページを表示させる
という手順ですすめます。
それでは詳しく解説します
①新着記事一覧ページをつくる
はじめに、新着記事一覧ページをつくります。
つまり、新着記事のエリアにある「もっとみる」のページをつくります。
早速作ってみましょう！
ワードプレス管理画面から「固定ページ→新規追加」を選択。
- ページタイトルを決める
- 表示状態を「公開」にする
- パーマリンクを「new-posts」にする
ページタイトルは「新着記事」や「New Posts」など、わかりやすいタイトルにしておきましょう。
今回は「New Posts」というタイトルで作成します。
ページの中身は何も書かなくてOKです。
新着記事一覧ページのURLはあとから入力する箇所があります。覚えておいてくださいね。
パーマリンクを「new-posts」にした場合、
URLは「https://アナタのブログのURL/new-posts」といった感じになります。
ちなみに当ブログだと「https://akipoblog.com/new-posts/」です。
②ホームページをつくる
ブログを訪れて、はじめに表示される画面（ホームページ）をつくります。
当ブログだとこんな感じ！
※スクロールできます
まずは、ホームページの下準備。
ワードプレス管理画面から「固定ページ→新規追加」を選択。
ページタイトルは表示されないので、なんでも大丈夫です。
今回は「固定ページ」というタイトルにしておきます。
つづいてエリアごとの作成方法を紹介します
表示させたい記事をエリアごとに分けると見やすいですよ。
たとえば、
といった感じです。
はじめに新着記事エリアの作り方を紹介します。
新着記事エリアの作り方
新着記事エリアはこんな感じ
5つのステップで完成します
- ページ左上の＋を選択
- SWELLブロック→フルワイドを選択
見出しを入力します。テキストでも画像でもお好きなほうで。
画像の場合はインライン画像で挿入しましょう。
インライン画像にすることで、見出し（h2）として認識されます。
インライン画像の挿入方法
セクション用見出しを「下に線」や「左右に線」に設定している場合、画像のまわりに線が出てしまいます。その場合は、「装飾なし」に設定を変更するか、自分でクラスをつけます。
- ページ左上の＋を選択
- SWELLブロック→「投稿リスト」を選択
- 表示する投稿数：６
- レイアウト：カード型
- 投稿の表示順序：新着順
- カテゴリー表示位置：日付の横
投稿の表示順序が「新着順」になっていれば、他の項目はお好みで大丈夫です。
- PCとモバイルのカラム数を選択
- MOREリンクの表示テキストを決める
- リンク先のURLを追加
リンク先のURLは【①新着記事一覧をつくる】で作成した固定ページのURLを入力します。
以上で完成です。次は人気記事エリアの作り方を解説します。
人気記事エリアの作り方
こんな感じを目指します
人気記事エリアをつくる前に、「人気記事一覧ページ」をつくります。
ワードプレス管理画面から「固定ページ→新規追加」を選択。
「人気記事一覧」というタイトルにします。
- ページタイトルを決める
- 表示状態を「公開」にする
- パーマリンクを「popular」にする
ページタイトルは「人気記事一覧」にします。
新着記事一覧のページとは違い、こちらのタイトルは表示されます。
ページ属性はパーマリンクを設定した下のほうにあります。
テンプレートを「人気記事一覧」に設定します。
更新ボタンを押して下準備は完了です。
それでは、人気記事エリアを作っていきましょう！
6ステップで出来上がります！
- ページ左上の＋を選択
- SWELLブロック→「フルワイド」を選択
- ページ左上の＋を選択
- SWELLブロック→「投稿リスト」を選択
- 表示する投稿数：3
- レイアウト：カード型
- 投稿の表示順序：人気順
- カテゴリー表示位置：日付の横
投稿の表示順序が「人気順」になっていれば、他の項目はお好みで大丈夫です。
- ページ左上の＋を選択
- SWELLブロック→「SWELLボタン」を選択
- 表示させたいテキストを入力
- 人気記事一覧ページのURLを入力
- ボタンの種類を選ぶ
人気記事一覧ページのURLは「https://アナタのブログのURL/popular/」を入力します。
以上で完成です。次はカテゴリーエリアの作り方を解説します。
カテゴリーエリアの作り方
こんな感じを目指します
それでは特定のカテゴリーの記事だけを集めたエリアを作ってみましょう！
- ページ左上の＋を選択
- SWELLブロック→「フルワイド」を選択
- コンテンツの横幅を選ぶ
- 上下のpadding量を選ぶ
- 背景色を決める
ここは基本お好みになります。
つづいて境界線の表示設定をします。
境界線とはこの境目のことです
先ほどの背景色を決めたところから下へスクロールすると、境界線の設定ができます。
- 境界線の形状を選ぶ
- 境界線の高さを決める
境界線の形状や高さは、お好きなものを選んでください。
ちなみに当ブログは、形状は「波」で高さは「４」にしています。
波の場合、「４」くらい高さがあったほうが見栄えがいい気がします。（お好みですが）
- ページ左上の＋を選択
- デザインブロック→「カラム」を選択
【50/50】を選択。割合はお好みでOKですが、今回は等間隔にします。
ひとつの記事を目立たせて表示させます
- ＋を選択
- SWELLブロック→「投稿リスト」を選択
まずは、特定のカテゴリーの記事だけ表示させる設定をしましょう。
特定のカテゴリーの記事だけ表示させる方法
右側にある「ブロック」→「Pickup」タブに進みます。
下のほうにカテゴリーを選択できるところがあるので、表示させたいカテゴリーを選びます。
その後、「Settings」タブを選び直し、表示の設定をします。
- 表示する投稿数を「１」
- レイアウト「カード型」
- 投稿の表示順序はお好みで
アイキャッチをひとつだけ大きく表示させるには、投稿数を「１」の「カード型」を選択します。
表示の順序はお好みで設定してください。
新着記事を表示させたければ「新着順」、一番読まれている記事を表示させたければ「人気順」、ランダム表示がよければ「ランダム」にチェックします。
リスト表示させます
まずは、特定のカテゴリーの記事だけ表示させる設定をしましょう。
- 表示する投稿数を「3」
- レイアウト「テキスト型」
- 投稿の表示順序「新着順」
- カテゴリー表示位置「表示しない」
テキスト型にすることでアイキャッチは表示されません。
特定のカテゴリーの記事しか表示されないので、カテゴリ表示位置は「表示しない」のほうがスッキリして見やすいです。
- ボタンに表示させたいテキストを入力
- リンク先のURLを入力
リンク先のURLは、カテゴリーのURLを入力してください。
ピックアップエリアの作り方
作り方はカテゴリーエリアと同じ作り方です。
STEP6にある「投稿記事リスト」の設定を変えるだけで、ピックアップ記事が表示されます。
投稿の表示順序を「ランダム」だけでおしまいです。
STEP7にあるMOREリンクの設定は空白のままでも大丈夫です。
【おまけ①】「キーワードから探す」をつくる方法
これを作る方法です
- ページ左上の＋を選択
- SWELLブロック→「キャプション付きブロック」を選択
- ページ左上の＋を選択
- 「リスト」を選択
- キーワードを入力する
- キーワードにリンクを設定する
わたしの場合、タグにしているものをキーワードとしているので、リンク先はタグのURLになります。
すべてのタグが表示されてしまいますが、「タグクラウド」というブロックもあります。
【おまけ②】フルワイド内でエリアをわける方法
次は、フルワイド内に2つのエリアをつくる方法です。
今回はカテゴリーエリアとピックアップエリアにしてみました。
ご自身のブログにあった項目で設定しみてください。
こんな感じを目指します
こちらは7つのステップで出来ます
- ページ左上の＋を選択
- SWELLブロック→フルワイドを選択
- ページ左上の＋を選択
- デザインブロック→カラムを選択
【50/50】を選択。割合はお好みでOKですが、今回は等間隔にします。
まずは、左側のエリア（カテゴリーエリア）の見出しをつくります。
- ＋を選択
- 見出しを選択
見出しはテキストでも画像でもお好きなほうをどうぞ。
- ＋を選択
- SWELLブロック→投稿リストを選択
右側の「Pickup」を選択。
表示させたいカテゴリーまたはタグを選択。
- Settingsを選択
- 表示する投稿数を選択
- レイアウトを選択
- カテゴリー表示位置「表示しない」
今回は特定のカテゴリーを表示させるので、カテゴリーの表示位置は「表示しない」を選びました。
以上で左側のエリアの完成です
右側のエリア（ピックアップ記事エリア）の作り方もほぼ同じです。
STEP1〜STEP3まで進み、STEP4のやり方で見出しを作ります。
STEP5の投稿リストの追加まで進めたら、
- Settingsを選択
- 表示する投稿数・レイアウトを選択
- 投稿表示の順序「ランダム」にする
- カテゴリー表示位置「日付の横」
投稿数やレイアウトはお好みで。
カテゴリー表示位置はアイキャッチに被らないように日付の横にしました。
今回はピックアップ記事でしたが、③投稿表示の順序を「人気順」にすれば、人気記事の表示になります。
右側のエリアも完成！フルワイド内でのエリアわけも終了です。
③作成したホームページを表示させる
固定ページで作成が終わったら、ホームページに表示させる設定をします。
ワードプレス管理画面から「外観→カスタマイズ→WordPress設定→ホームページ設定」と進みます。
- ホームページを「固定ページ」を選択
- 投稿ページを「New Posts」を選択
最後に「公開」ボタンを押して、完了です。
サイト型をつくる方法のまとめ
CSSやコードを使わずに、簡単にサイト型のトップページが作れるとおわかりいただけたかと思います。
さとしんさん（@__satoshin）がサイト型のトップページを使っているブログを紹介しています。
いろんなデザインが見られるので勉強になります！
当ブログも掲載してもらいました。ありがとうございます。
わたしがCSSなどの知識が無くても作れたのは、ブログテーマ『 SWELL 』のおかげです。
はじめてサイト型を作成した時には戸惑いましたが、慣れてくるとアレンジができるようになります。
『 SWELL 』を使って、オリジナリティ溢れるサイトを作ってみませんか？
最後までご覧いただきありがとうございます！
「いいねボタン」を押していただけると励みになります。
この記事が気に入ったら
フォローしてね！