SWELLトップページコンテンツ設定方法｜カスタマイズのポイントを解説

SWELLのトップページコンテンツ設定を使えば、メインビジュアルや記事スライダーなどを自由にカスタマイズでき、見やすく回遊しやすいトップページを作成できます。

SWELLトップページのコンテンツ設定とは

SWELLのトップページコンテンツ設定とは、トップページに表示するコンテンツやレイアウトをカスタマイズできる機能です。

メインビジュアルや記事スライダー、ピックアップバナー、タブ切り替えコンテンツなどを設定することで、サイトの目的に合わせたトップページを作成できます。

また、重要な記事やカテゴリーへの導線を設置しやすくなるため、ユーザーの回遊率向上にも役立ちます。

トップページコンテンツ設定は、WordPress管理画面のカスタマイザーから設定できます。

コンテンツ設定でできること

SWELLのトップページコンテンツ設定では、主に以下の機能を利用できます。

• メインビジュアルの表示
• 記事スライダーの表示
• ピックアップバナーの表示
• タブ切り替えコンテンツの表示

これらの機能を組み合わせることで、サイトの目的に合わせたトップページを作成できます。

例えば、ブログであれば新着記事や人気記事への導線を強化でき、アフィリエイトサイトであれば収益記事への誘導もしやすくなります。

SWELLトップページコンテンツ設定でできること

SWELLのトップページコンテンツ設定では、トップページに表示するコンテンツを自由にカスタマイズできます。

ここでは、設定できる主な機能について紹介します。

メインビジュアルの表示

メインビジュアルは、トップページの上部に表示される画像やスライダーです。

サイトの第一印象を決める重要な要素であり、サイトのコンセプトやおすすめコンテンツを視覚的にアピールできます。

記事スライダーの表示

記事スライダーは、指定した記事や新着記事をスライド形式で表示できる機能です。

注目記事を目立たせたい場合や、ユーザーに複数の記事を見てもらいたい場合に役立ちます。

ピックアップバナーの表示

ピックアップバナーは、特定の記事やカテゴリーへのリンクを画像付きで表示できる機能です。

人気記事や収益記事への導線として活用すると、回遊率やクリック率の向上が期待できます。

タブ切り替えコンテンツの表示

タブ切り替えコンテンツは、「新着記事」「人気記事」などをタブで切り替えて表示できる機能です。

限られたスペースで複数のコンテンツを見せられるため、トップページをすっきり見せながら情報量を増やせます。

SWELLでメインビジュアルを設定する方法

メインビジュアルは、トップページの最上部に表示される画像やスライダーのことです。

サイトを訪れたユーザーが最初に目にする部分であり、サイトの印象や雰囲気を伝える重要な役割を担っています。

例えば、ブログであればサイトのテーマや発信内容をわかりやすく伝えられます。また、企業サイトやポートフォリオサイトであれば、サービス内容や実績を効果的にアピールすることも可能です。

SWELLでは、トップページ専用のメインビジュアル機能が用意されており、画像の表示方法や高さ、テキストの配置などをカスタマイズできます。

メインビジュアルを適切に設定することで、サイトの魅力を伝えやすくなるだけでなく、ユーザーが目的のコンテンツへ進みやすくなる効果も期待できます。

ここからは、SWELLでメインビジュアルを設定する手順と各設定項目の使い方を解説します。

❶ カスタマイザーの起動

カスタマイザーを起動する手順は次の通りです。

Menu『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。

カスタマイザーが起動すると、画面の左側にカスタマイザーのメニュー画面が表示されます。

これで、カスタマイザーの準備ができました。次の章からは、トップページのコンテンツに関するカスタマイザーの設定項目をご紹介します。

❷ メインビジュアルの設定

ここでは、トップページのメインビジュアルの設定方法をご紹介します。

• カスタマイザーでの作業になります。

メインビジュアルとは、トップページを開いたときに最初に表示されるエリアのことです。

メインビジュアルの詳細設定

「カスタマイザー」画面で以下の手順で進み、詳細設定項目を開きます。

カスタマイザーの設定を変更したら『公開』を忘れずにクリックしましょう。

メインビジュアルの表示内容

トップページヘッダーの下に「表示しない・画像・動画」の表示設定ができます。

メインビジュアルの表示内容を設定します。

ここでの選択によって、この後に表示される設定エリアが変わります。もし「表示しない」を選ぶと、以降で解説するメニューは表示されません。

表示設定

メインビジュアルの画像・動画の「デザイン」を設定できます。

デザインを変更することができます。

メインビジュアルの画像に関する「表示高さ・形状・画質」が 設定できます。

メインビジュアルの高さ設定をします。

フィルター処理とオーバーレイカラーの設定をします。

画像スライダー設定

画像を複数設定して表示を切り替えることができます。

以下のサンプルでは、画像・表示テキストをそれぞれ3パターン設定しています。

スライド画像を設定していないか1枚の場合は以下のメニューが表示されています。

スライド画像を設定していないか1枚の場合は何もしなくてOKです。

画像を追加すると以下の追加設定用メニューが表示されます。

スライドパターンや速度の設定ができます。

スライドの表示方法を設定します。

各スライドの設定

スライド画像・テキスト・リンク先URL等が設定できます。

スライド画像は 最大5枚まで設定可能です。

各スライドの設定をします。

メインビジュアルに「動画」を設定する場合は「画像」の設定方法と同様なので省略します。

メインビジュアルのおすすめ設定

メインビジュアルでは、トップページ上部に表示する画像やテキストを設定できます。

主な設定項目とおすすめ設定は以下のとおりです。

項目	おすすめ設定	理由
表示タイプ	画像	ブログとの相性が良く表示も軽い
高さ設定	30〜40vw	ファーストビューを圧迫しにくい
テキスト表示	必要に応じて表示	サイトの特徴を伝えやすい
オーバーレイ	20〜40％程度	テキストが見やすくなる
スライダー	基本はOFF	読み込み速度を優先

ブログサイトの場合は、シンプルな画像1枚を表示する設定がおすすめです。スライダーを多用するとユーザーが記事へ到達しにくくなる場合があります。

❸ 記事スライダーの設定

ここでは、トップページの記事スライダーの設定方法をご紹介します。

• カスタマイザーでの作業になります。

記事スライダーとは、カテゴリーやタグを指定して任意のグループ記事を表示させる機能です。

「SWELL DEMO」でデモサイトを見てみる

記事スライダーの詳細設定

「カスタマイザー」画面で以下の手順で進み、詳細設定項目を開きます。

カスタマイザーの設定を変更したら『公開』を忘れずにクリックしましょう。

記事スライダーを設置するかどうか

記事スライダーを設置するかどうかを選択できます。

メインビジュアルを設定している場合、そのすぐ下に表示されます。

記事スライダーを設置するかどうかを設定します。

記事のピックアップ方法

表示されたい記事のグループや表示する順序等の設定ができます。

どの記事をスライダーに表示させるか設定します。

記事の表示設定

表示させる記事に付加する情報のスタイルが設定できます。

記事に表示する付加項目を設定します。

スライド設定

スライドさせる記事の数や表示スピード等が設定できます。

スライダー枚数・速度・間隔を設定します。

その他の表示設定

スライダーのタイトルや幅・文字色・背景画像等が設定できます。

スライダーエリアの詳細設定をします。

記事スライダーのおすすめ設定

記事スライダーでは、注目記事や新着記事をスライド形式で表示できます。

項目	おすすめ設定	理由
表示記事数	5〜10件	多すぎると選びにくい
表示条件	人気記事またはおすすめ記事	回遊率向上につながる
自動再生	OFF	ユーザー操作を優先
表示位置	メインビジュアル下	目に入りやすい

特にアフィリエイトブログでは、収益記事や人気記事を表示すると効果的です。

❸ ピックアップバナーの設定

ここでは、トップページのピックアップバナーの設定方法をご紹介します。

• カスタマイザーでの作業になります。

ピックアップバナーとは、トップページ（下層ページにも可）表示できる画像バナー形式のナビゲーションメニューのことです。

ピックアップバナー用のメニューを作成

SWELLのピックアップバナーは「メニュー機能」を利用して表示されるため、事前に専用メニューを作成して設定する必要があります。

Menu『WordPress管理＞ダッシュボード＞外観＞メニュー』をクリックします。

ピックアップバナー用のメニューを作成します。

メニューの作成方法がわかりにくい方は、こちらの記事を参考にしてください。

メニューの表示設定をチェック＆変更

「  作業項目が表示されない」を未然に処理しておきます。

メニュー画面の右上のタブメニュー『表示オプション』をクリックします。

ピックアップバナーにはアイキャッチ画像が表示されます。アイキャッチ画像が設定されていない場合は、代わりに「NO IMAGE」画像が表示されます。

ピックアップバナーに任意の画像を設定

それでは、ピックアップバナーに任意の画像を設定していきます。

メニュー画面でピックアップバナー用に作ったメニューを選択します。

画像を挿入するメニュー項目をクリックします。

以下のようにメニュー項目の詳細が表示されます。

『説明』の枠内にピックアップバナーに表示させる画像のURLを貼り付けます。

画像のURLは 自分のサイト内からのみ有効です。（メディアライブラリー）他サイトの画像のURLは 無効です。

カテゴリー・タグページの「説明」に関する注意点

カテゴリーやタグの編集ページにて、そのカテゴリーやタグについての「説明」を設定できるエリアがあります。

ここに文章を入力していると、その文章がメニュー項目内の「説明」にも反映されてしまうことがあります。
その場合は、その説明文をメニューの項目内から削除して改めてURLを入力してください。

メニュー項目内から「説明」を編集しても、カテゴリーやタグページの説明文には影響しません。

SWELL公式サイト

ピックアップバナーの詳細設定

「カスタマイザー」画面で以下の手順で進み、詳細設定項目を開きます。

カスタマイザーの設定を変更したら『公開』をクリックしましょう。

バナーレイアウト

PCとSPのピックアップバナーの配列が設定できます。

PCとSPのバナーレイアウトを設定します。

バナーデザイン

ピックアップバナーのデザインが設定できます。

バナータイトルのデザインを設定します。

その他

ピックアップバナーを下層ページに表示するが設定できます。

下層ページに表示するかどうか設定します。

投稿・固定ページごとにピックアップバナーの表示を設定する

SWELLでは、投稿・固定ページごとにピックアップバナーを『表示・非表示』させる設定ができます。

設定は、エディター画面の「投稿」タブメニューにある「表示の上書き設定」から変更できます。

表示の上書き設定をします。

ピックアップバナー

ピックアップバナーは、重要な記事やカテゴリーへ誘導するための機能です。

項目	おすすめ設定
バナー数	3〜4個
リンク先	人気記事・収益記事・カテゴリー
画像サイズ	統一する
テキスト	短くわかりやすくする

表示する項目を絞ることで、ユーザーが迷わず目的の記事へ移動できます。

❺ その他の設定

ここでは、トップページのその他の設定方法をご紹介します。

• カスタマイザーでの作業になります。

ここでは、コンテンツ上の余白量の設定ができます。

その他の詳細設定

「カスタマイザー」画面で以下の手順で進み、詳細設定項目を開きます。

カスタマイザーの設定を変更したら『公開』を忘れずにクリックしましょう。

コンテンツ上の余白量

メインビジュアル・記事スライダーの部分と、その下のコンテンツ部分との間の余白量を設定できます。

コンテンツ上の余白量を設定します。

SWELLでタブ切り替えコンテンツを設定する方法

タブ切り替えコンテンツは、「新着記事」「人気記事」「カテゴリー別記事」などをタブで切り替えながら表示できる機能です。

限られたスペースで複数のコンテンツを掲載できるため、トップページの情報量を増やしながらも見やすいレイアウトを維持できます。

また、ユーザーが興味のあるコンテンツを探しやすくなるため、サイト内の回遊率向上にも効果的です。

トップページやカテゴリーページなどに表示する記事一覧リストの表示スタイルを設定できます。

それでは設定方法を見ていきましょう。

まずは、カスタマイザーを起動します。

Menu『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。

カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。

「カスタマイザー」画面で以下の手順で進み、詳細設定項目を開きます。

タブ切り替え設定（トップページ）

タブ切り替え設定（トップページ）までスクロールすると以下の画面が表示されます。

タブデザインのサンプル「標準」

タブデザインのサンプル「グレーボックス」

タブデザインのサンプル「下線」

カテゴリーIDの確認

Menu『WordPress管理＞ダッシュボード＞投稿一覧＞カテゴリー』をクリックします。

カテゴリーのIDが確認できます。

入力指示場所の指示に従い「ID」を記入する際に確認します。

タグIDの確認

Menu『WordPress管理＞ダッシュボード＞投稿一覧＞タグ』をクリックします。

タグのIDが確認できます。

入力指示場所の指示に従い「ID」を記入する際に確認します。

タブ切り替え設定（その他のページ）

下層ページにタブ切り替え設定ができます。

タブ切り替えコンテンツのおすすめ設定

タブごとに表示する内容を設定できるため、「新着記事」「人気記事」「おすすめ記事」など、サイトの目的に合わせた構成を作成しましょう。

主な設定項目とおすすめ設定は以下のとおりです。

項目	おすすめ設定	理由
タブ数	2〜3個	多すぎると見づらくなるため
表示内容	新着記事・人気記事	ユーザーのニーズが高い
記事数	5〜8件	選びやすく見やすい
タブ名	短くわかりやすくする	内容が伝わりやすい

ブログサイトの場合は、「新着記事」と「人気記事」の組み合わせがおすすめです。

カテゴリー数が多いサイトでは、「SWELL」「SEO」「WordPress」など主要カテゴリーごとにタブを作成すると、目的の記事を探しやすくなります。

おすすめの活用例

タブ切り替えコンテンツは、以下のような使い方がおすすめです。

新着記事と人気記事を表示する

最も定番の活用方法です。

最新情報を探しているユーザーには新着記事を、よく読まれている記事を探しているユーザーには人気記事を表示できます。

カテゴリーごとに記事を表示する

複数のテーマを扱うサイトでは、カテゴリーごとにタブを作成すると便利です。

ユーザーが興味のあるジャンルの記事だけを素早く探せるようになります。

おすすめ記事を表示する

収益記事や読んでほしい記事をまとめたタブを作成する方法もあります。

サイト運営者が特に読んでほしいコンテンツへの導線を作りたい場合におすすめです。

タブ切り替えコンテンツを使う際の注意点

タブの数を増やしすぎると、かえって見づらくなる場合があります。

また、表示する記事数が多すぎるとトップページが長くなり、ユーザーが目的の記事を見つけにくくなることもあります。

まずは「新着記事」と「人気記事」の2つから始めて、必要に応じて追加していくとよいでしょう。

タブ切り替えコンテンツを上手に活用すれば、トップページをすっきり見せながら多くのコンテンツを紹介できます。

まとめ！SWELLトップページコンテンツ設定方法｜カスタマイズのポイントを解説

SWELLのトップページは、カスタマイザーで効率的にデザインを最適化できます。

メインビジュアルや記事スライダー、ピックアップバナー設定を活用することで、ユーザーに見やすくSEOにも効果的なサイト構成が実現できます。

まずはデフォルト設定から始めて、少しずつ変更してみましょう。