- SWELLのトップページってどうやって編集するの？
- SWELLのトップページをサイト型にカスタマイズしてみたい！
- 簡単に編集できるやり方を初心者向けに教えて！
上記のような疑問をお持ちの方の悩みを解決できる記事を書きました。
トップページをサイト型に編集し、サイトをおしゃれにカスタマイズしましょう。
WordPressテーマSWELLでは、初心者でも簡単に、サイトを美しいデザインにカスタマイズすることが可能です。
この記事を最後まで読んでいただくことによって、あなたのブログのトップページをおしゃれに編集できますよ。
下記は、当ブログのトップページ全体画像です。
今回の記事では、以下の設定を解説します。
- トップページのメインビジュアル画像
- 記事スライダー
- フルワイドブロック
- フルワイドブロック+カラムブロック
- 投稿ブロック
- タブブロック
- トップページ下にバナーを設定
それでは、早速本題に入りましょう。
SWELLトップページのメインビジュアル画像設定方法
トップページのメインビジュアル画面を設定していきます。
メインビジュアルはサイトを開いた際に、最初に目に止まるエリアです。
メインビジュアルに画像を挿入することで、一気にサイト型に雰囲気が変わります。
以下では、ステップ形式で画像の設定方法を解説します。
【スライド画像[1](PC)】【スライド画像[1](SP)】にそれぞれ画像を挿入しました。
カイハツメインビジュアルに画像や動画を挿入するだけで、一気に雰囲気が変わります。
メインビジュアルの設定方法は、SWELL公式サイトでも紹介されているのでぜひ参考にしてください。
SWELL固定ページの作成・設定方法
サイトのトップページをカスタマイズしていきましょう。
ここからはサイトのトップページを編集する工程へ移るのですが、トップページをカスタマイズして表示させるには、固定ページの作成をし、トップページに設定する必要があります。
以下でトップページカスタマイズ方法を解説します。
実際には、以下の固定ページ編集画面にてトップページをカスタマイズしていきます。
作成した固定ページをトップページに表示する方法
固定ページで編集した内容がトップページになります。
以下では、固定ページをサイトのトップページに表示させる方法をステップ形式で解説します。
固定ページでカスタマイズしたページがトップページに表示されます。
カイハツ著者も始めはトップページの編集方法がわからずに、デフォルトのままブログ運営していましたよ。
ブログ型やサイト型には、それぞれメリット・デメリットがあります。
トップページをサイト型にしてオシャレにすることが集客に繋がる正解か、は一概にも言えませんが、ブログ運営の目的に合わせた設定、選択をお勧めします。
SWELL記事スライダーの設定方法
トップページの記事スライダー部分を設定していきます。
記事スライダーは、指定した記事をスライドしながら表示してくれるブロックです。
以下では、ステップ形式で記事スライダーの設定方法を解説します。
カイハツトップページ、メインビジュアル画像のすぐ下に記事スライダーがあると、目につきやすいよ！
読んでほしい記事を設定しよう。
記事スライダーの設定方法は、SWELL公式サイトでも紹介されているのでぜひ参考にしてください。
SWELLフルワイドブロックの設定方法
トップページのフルワイドブロック部分を設定していきます。
フルワイドブロックは、画面横幅を全面的に使用できるブロックで、サイト型トップページのアクセントとして使用するのに適しています。
フルワイドブロックの使用例
ここに見出しを入力します(フルワイドブロック使用例1)
ここに見出しを入力します(フルワイドブロック使用例2)
ここに見出しを入力します(フルワイドブロック使用例3)
今回の記事では、【フルワイドブロック】+【投稿ブロック】を掛け合わせました。
以下でフルワイドブロック使用例をステップ形式で解説します。
【見出し】部分にタイトルを入力します。
【コンテンツサイズ】を設定します。
- 記事サイズ
- サイト幅
- フルワイド
当ブログでは、【フルワイド】に設定しました。
【上下のPADDING量】はデフォルトのままです。
【カラー設定】を設定します。
- テキストカラー
- 背景色（透明度も設定可能）
【背景画像】の挿入も可能です。
【上下の境界線の形状】を、以下の4種類から設定します。
- 斜線
- 円
- 波
- ジグザグ
境界線の高さレベル、逆向きの設定もできます。
当ブログでは、【フルワイドブロック】+【投稿リスト】を掛け合わせました。
カイハツフルワイドブロック+任意のブロックエディターの組み合わせがお勧めです。
フルワイドブロックの設定方法は、SWELL公式サイトでも紹介されているのでぜひ参考にしてください。
SWELLカラムブロックの設定方法
トップページのカラムブロック部分を設定していきます。
カラムブロックは、コンテンツを横並びに表示したブロックです。
フルワイドブロックとの相性がいいので、当ブログは【フルワイドブロック】+【カラムブロック】を組み合わせました。
以下では、カラムブロック使用例をステップ形式で解説します。
【33/33/33】サイズを選択しました。
挿入する画像は、あらかじめ準備しておきましょう。
画像に、飛ばしたい記事のリンク、もしくはカテゴリーのリンクを貼りましょう。
カテゴリー
カイハツ画像内に内部リンクを貼ることをお忘れなく！
フルワイドブロックの設定方法は、SWELL公式サイトでも紹介されているのでぜひ参考にしてください。
SWELL投稿リストブロックの設定方法
トップページの投稿リストブロック部分を設定していきます。
投稿リストブロックとは、複数の記事を指定した数表示させることが出来るブロックです。
サイト型トップページにとても相性の良いブロックなので、ぜひ設置しましょう。
以下では、投稿リストブロックの設定方法をステップ形式で解説していきます。
投稿リストでは、以下のレイアウトを設定できます。
- カード型
- リスト型
- リスト型（左右交互）
- サムネイル型
- テキスト型
自身のブログスタイルにあった投稿リスト表示を選択しましょう。
カード型
リスト型
リスト型（左右交互）
カイハツトップページがだんだんおしゃれになってきましたね！
ここまでの設定で難しい箇所はありません。
投稿リストブロックの設定方法は、SWELL公式サイトでも紹介されているのでぜひ参考にしてください。
SWELLタブブロックの設定方法
トップページのタブブロック部分を設定していきます。
タブブロックとは、タブをクリックすることで表示する内容を変更することができます。
【レンタルサーバー】【WordPress有料テーマ】などカテゴリー分けした記事をそれぞれのタグに配置することが可能です。
以下では、タブブロックと投稿リストブロックを組み合わせた設定方法をステップ形式で解説していきます。
【人気記事】【最新記事】タブに分けて、【投稿リスト】ブロックを挿入しました。
カイハツタグブロック+投稿リストブロックの組み合わせも相性がいいです。
SWELLトップページ下にバナーを設定する方法
トップページ下のバナー広告部分の設定方法を解説します。
トップページのフッター部分にバナー広告を表示させてみましょう。
以下では、SWELLアフィリエイトのバナー広告を設定する方法をステップ形式で解説します。
カイハツトップページのフッター部分にSWELLのバナー広告があると、かっこいいですよね！
SWELLでのクローズド案件【SWELLアフィリエイト】に参入をお考えの方は、ぜひ下記の記事を参考にしてください。
まとめ
今回の記事では、サイト型のトップページにカスタマイズする方法をわかりやすくステップ形式で解説しました。
サイト型トップページにカスタマイズする方法
- トップページのメインビジュアル画像を挿入する
- 記事スライダーを挿入する
- フルワイドブロックを挿入する
- フルワイドブロック+カラムブロックを挿入する
- 投稿ブロックを挿入する
- タブブロック+投稿ブロックを挿入する
- トップページ下にバナーを設定
また、固定ページをサイトのトップページに設定する方法も解説しました。
今回の記事を見返すことによって、サイト型のトップページ作成に役立ててください。
