SWELLでトップページをサイト型にする方法

SWELLにテーマ変更して、デザインもほぼ納得の感じになりました。

この記事では、SWELLを使ってトップページをサイト型にする方法を紹介しています。

この記事を書いている人

名前:igarashi

妻と1歳の子供と暮らす30代

千葉、福岡、熊本で転勤生活
現在は関東勤務
休日は可能な限り家族で一緒に出掛けています


この記事の内容

SWELLでサイト型にするには固定ページから準備を行う

イガラシ

SWELLなら、手順さえわかれば知識が無くても作れます。

他のテーマから乗り換える人は、先に非推奨プラグインの有無を確認しましょう。

STEP
固定ページに新着記事を新規作成

固定ページ < 新規追加 で作成。

タイトルを記入し「設定」 < 「パーマリンク」から「URLスラッグ」を入力します。

タイトルもURLスラッグも自身がわかる名前でOK

本文は入力せずに、記事を公開。

STEP
固定ページでトップページ(フロントページ)を新規作成

固定ページ < 新規追加 で作成。

タイトルを記入し「設定」 < 「パーマリンク」から「URLスラッグ」を入力します。

本文は入力せずに、一旦記事を公開(または保存)

サイト型トップページでは、 ここを編集することで表示をいじっています。

サイト型トップページを作っていく

イガラシ

以下は当ブログの構成手順に従って紹介していきます。

ご自身のブログに当てはめて参考にしてください。

STEP
構成の検討

どんな構成のトップページを作りたいのか検討します。

私の場合は、4つのジャンルで記事を作っているので新着記事以下はアクセスの多い順で構成しました。

STEP
新着記事の配置

固定ページ < トップページ

イガラシ

ここからは基本的には投稿記事を作成する作業と同じ手順です。

SWELLブロック < フルワイド

グレーのフルワイドブロックが配置されます。

ブロックの設定で、記事幅やpadding量、背景色の設定が出来るので、自分の好みに合わせて調整してください。

STEP
新着記事に投稿リストを配置する

STEP2ではフルワイドブロックを設置しただけなので、記事は配置されていません。

記事を配置する作業が必要です。

フルワイドブロックを選択 < デザイン < カラム <配置されたカラムを選択 <SWELLブロック < 投稿リスト

もう一方のカラムを選択 < タブブロック < タブブロックを選択 < 投稿リスト

イガラシ

私の場合はカラムブロックとタブブロックを使って、新着記事とランダム記事を表示しています。

カラムの右側にはタブブロックを使い、左側新着記事を1つだけカード型で配置し右側は新着記事はテキスト型で4つ、ランダム表示しています。

投稿リストをカラム内に配置した場合、デフォルトは3列で3件の記事が表示されるようになっています。

デザインを変更したい場合は、ブロックを選択して 設定< settings から変更可能。

設定内の「Pickup」で、カテゴリーやタグ毎などで表示を絞り込むこのも可能です。

イガラシ

これで、新着記事の箇所は完成

STEP
以下、同じ感じで構成要素を作っていく

あとは構成要素ごとに同じ手順を繰り返すだけです。

資産形成、釣り、ブログも同じ手順で作成しています。

SWELLでサイト型を作る時の注意点

  1. フルワイドブロックはサイドバナーがあると思った通りに表示されない
  2. プラグインに注意

サイドバーは「カスタマイザー」または「投稿設定」から変更可能
特定ページのみ非表示にすることが出来ます。

イガラシ

プラグインについてはSWELL公式
以下の記事を参照してください。

おわりに

イガラシ

サイト型トップページをSWELLで作る方法を紹介してきました。

ご覧いただいた通り、難しい操作は一切ないのでSWELLでサイト型トップページを作ることは非常に簡単です。
あなたもチャレンジしてみてください。

よかったらシェアしてね!
目次
トップへ
この記事の内容
閉じる