【SWELL】トップページをサイト型にカスタマイズする方法を解説

当ページのリンクには広告が含まれています。
  • SWELLのトップページってどうやって編集するの?
  • SWELLのトップページをサイト型にカスタマイズしてみたい!
  • 簡単に編集できるやり方を初心者向けに教えて!

上記のような疑問をお持ちの方の悩みを解決できる記事を書きました。

トップページをサイト型に編集し、サイトをおしゃれにカスタマイズしましょう。

WordPressテーマSWELLでは、初心者でも簡単に、サイトを美しいデザインにカスタマイズすることが可能です。

この記事を最後まで読んでいただくことによって、あなたのブログのトップページをおしゃれに編集できますよ。

下記は、当ブログのトップページ全体画像です。

今回の記事では、以下の設定を解説します。

  • トップページのメインビジュアル画像
  • 記事スライダー
  • フルワイドブロック
  • フルワイドブロック+カラムブロック
  • 投稿ブロック
  • タブブロック
  • トップページ下にバナーを設定

それでは、早速本題に入りましょう。

目次

SWELLトップページのメインビジュアル画像設定方法

トップページのメインビジュアル画面を設定していきます。

メインビジュアルはサイトを開いた際に、最初に目に止まるエリアです。

メインビジュアルに画像を挿入することで、一気にサイト型に雰囲気が変わります。

以下では、ステップ形式で画像の設定方法を解説します。

STEP
WordPress管理画面上部【カスタマイズ】をクリックする
STEP
【トップページ】→【メインビジュアル】の順にクリックする
STEP
【メインビジュアルの表示内容】にて【画像】もしくは【動画】を選択する

【スライド画像[1](PC)】【スライド画像[1](SP)】にそれぞれ画像を挿入しました。

STEP
挿入した画像が表示される
カイハツ

メインビジュアルに画像や動画を挿入するだけで、一気に雰囲気が変わります。

メインビジュアルの設定方法は、SWELL公式サイトでも紹介されているのでぜひ参考にしてください。

SWELL固定ページの作成・設定方法

サイトのトップページをカスタマイズしていきましょう。

ここからはサイトのトップページを編集する工程へ移るのですが、トップページをカスタマイズして表示させるには、固定ページの作成をし、トップページに設定する必要があります。

以下でトップページカスタマイズ方法を解説します。

STEP
WordPress管理画面【固定ページ】【新規固定ページを追加】をクリックする
STEP
固定ページのタイトル【home】(例)

実際には、以下の固定ページ編集画面にてトップページをカスタマイズしていきます。

作成した固定ページをトップページに表示する方法

固定ページで編集した内容がトップページになります。

以下では、固定ページをサイトのトップページに表示させる方法をステップ形式で解説します。

STEP
WordPress管理画面【設定】【表示設定】をクリックする
STEP
【ホームページの表示】にて【固定ページ】を選択し、【ホームページ】内の【home】(例)を選択し【変更を保存】する

固定ページでカスタマイズしたページがトップページに表示されます。

カイハツ

著者も始めはトップページの編集方法がわからずに、デフォルトのままブログ運営していましたよ。

ブログ型やサイト型には、それぞれメリット・デメリットがあります。

トップページをサイト型にしてオシャレにすることが集客に繋がる正解か、は一概にも言えませんが、ブログ運営の目的に合わせた設定、選択をお勧めします。

SWELL記事スライダーの設定方法

トップページの記事スライダー部分を設定していきます。

記事スライダーは、指定した記事をスライドしながら表示してくれるブロックです。

以下では、ステップ形式で記事スライダーの設定方法を解説します。

STEP
WordPress管理画面【カスタマイズ】をクリックする
STEP
【トップページ】【記事スライダー】の順にクリックする
STEP
【記事スライダーを設置するかどうか】→【設置する】を選択する
STEP
挿入した記事スライダーが表示される
カイハツ

トップページ、メインビジュアル画像のすぐ下に記事スライダーがあると、目につきやすいよ!
読んでほしい記事を設定しよう。

記事スライダーの設定方法は、SWELL公式サイトでも紹介されているのでぜひ参考にしてください。

SWELLフルワイドブロックの設定方法

トップページのフルワイドブロック部分を設定していきます。

フルワイドブロックは、画面横幅を全面的に使用できるブロックで、サイト型トップページのアクセントとして使用するのに適しています。

フルワイドブロックの使用例

ここに見出しを入力します(フルワイドブロック使用例1)

ここに見出しを入力します(フルワイドブロック使用例2)

今回の記事では、【フルワイドブロック】+【投稿ブロック】を掛け合わせました。

以下でフルワイドブロック使用例をステップ形式で解説します。

STEP
WordPress編集画面、固定ページ編集画面にてブロックエディター【フルワイド】ブロックを選択する
STEP
フルワイドブロックが表示される

【見出し】部分にタイトルを入力します。

STEP
【コンテンツサイズ】を設定する

【コンテンツサイズ】を設定します。

  • 記事サイズ
  • サイト幅
  • フルワイド

当ブログでは、【フルワイド】に設定しました。

【上下のPADDING量】はデフォルトのままです。

STEP
【カラー設定】【背景画像の設定】【上下の境界線の形状】を設定する

【カラー設定】を設定します。

  • テキストカラー
  • 背景色(透明度も設定可能)

【背景画像】の挿入も可能です。

【上下の境界線の形状】を、以下の4種類から設定します。

  • 斜線
  • ジグザグ

境界線の高さレベル逆向きの設定もできます。

カイハツ

フルワイドブロック+任意のブロックエディターの組み合わせがお勧めです。

フルワイドブロックの設定方法は、SWELL公式サイトでも紹介されているのでぜひ参考にしてください。

SWELLカラムブロックの設定方法

トップページのカラムブロック部分を設定していきます。

カラムブロックは、コンテンツを横並びに表示したブロックです。

フルワイドブロックとの相性がいいので、当ブログは【フルワイドブロック】+【カラムブロック】を組み合わせました。

以下では、カラムブロック使用例をステップ形式で解説します。

STEP
WordPress編集画面、固定ページ編集画面にてブロックエディター【フルワイド】ブロックを選択する
STEP
【フルワイド】ブロック見出し【カテゴリー】(例)カラーも任意で変更する
STEP
【フルワイド】ブロック内に【カラムブロック】を挿入する

【33/33/33】サイズを選択しました。

STEP
各カラムブロックにアイキャッチ画像を挿入する

挿入する画像は、あらかじめ準備しておきましょう。

STEP
各カラムブロックに画像を挿入した例
STEP
それぞれの画像にリンクを挿入する

画像に、飛ばしたい記事のリンク、もしくはカテゴリーのリンクを貼りましょう。

STEP
設定したフルワイドブロック+カラムブロックが表示される

カテゴリー

カイハツ

画像内に内部リンクを貼ることをお忘れなく!

フルワイドブロックの設定方法は、SWELL公式サイトでも紹介されているのでぜひ参考にしてください。

SWELL投稿リストブロックの設定方法

トップページの投稿リストブロック部分を設定していきます。

投稿リストブロックとは、複数の記事を指定した数表示させることが出来るブロックです。

サイト型トップページにとても相性の良いブロックなので、ぜひ設置しましょう。

以下では、投稿リストブロックの設定方法をステップ形式で解説していきます。

投稿リストでは、以下のレイアウトを設定できます。

  • カード型
  • リスト型
  • リスト型(左右交互)
  • サムネイル型
  • テキスト型

自身のブログスタイルにあった投稿リスト表示を選択しましょう。

カード型
リスト型
リスト型(左右交互)
サムネイル型
テキスト型
カイハツ

トップページがだんだんおしゃれになってきましたね!
ここまでの設定で難しい箇所はありません。

投稿リストブロックの設定方法は、SWELL公式サイトでも紹介されているのでぜひ参考にしてください。

SWELLタブブロックの設定方法

トップページのタブブロック部分を設定していきます。

タブブロックとは、タブをクリックすることで表示する内容を変更することができます。

【レンタルサーバー】【WordPress有料テーマ】などカテゴリー分けした記事をそれぞれのタグに配置することが可能です。

以下では、タブブロックと投稿リストブロックを組み合わせた設定方法をステップ形式で解説していきます。

STEP
WordPress編集画面、固定ページ編集画面にてブロックエディター【タブ】ブロックを選択する
STEP
【タブ1】【タブ2】にタイトルを入力してカテゴリーを作成、タブブロック内に【投稿リスト】ブロックを挿入する

【人気記事】【最新記事】タブに分けて、【投稿リスト】ブロックを挿入しました。

カイハツ

タグブロック+投稿リストブロックの組み合わせも相性がいいです。

SWELLトップページ下にバナーを設定する方法

トップページ下のバナー広告部分の設定方法を解説します。

トップページのフッター部分にバナー広告を表示させてみましょう。

以下では、SWELLアフィリエイトのバナー広告を設定する方法をステップ形式で解説します。

STEP
もしもアフィリエイトにログインし、【広告リンクへ】をクリックする
STEP
【ソース】をコピーする
STEP
WordPress編集画面【外観】【ウィジェット】をクリックする
STEP
【トップページ下部】に【(SWELL)広告コード】をドラッグ&ドロップし、広告タグ内にバナーリンクを貼り、【保存】する
STEP
トップページのフッター部分にバナー広告が表示される
カイハツ

トップページのフッター部分にSWELLのバナー広告があると、かっこいいですよね!

SWELLでのクローズド案件【SWELLアフィリエイト】に参入をお考えの方は、ぜひ下記の記事を参考にしてください。

まとめ

今回の記事では、サイト型のトップページにカスタマイズする方法をわかりやすくステップ形式で解説しました。

サイト型トップページにカスタマイズする方法

  • トップページのメインビジュアル画像を挿入する
  • 記事スライダーを挿入する
  • フルワイドブロックを挿入する
  • フルワイドブロック+カラムブロックを挿入する
  • 投稿ブロックを挿入する
  • タブブロック+投稿ブロックを挿入する
  • トップページ下にバナーを設定

また、固定ページをサイトのトップページに設定する方法も解説しました。

今回の記事を見返すことによって、サイト型のトップページ作成に役立ててください。

このフォームに入力するには、ブラウザーで JavaScript を有効にしてください。
Name

この記事はSWELLで書かれています

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次