SWELL トップページのコンテンツ設定方法｜初心者でもできるカスタマイズ手順

SWELLで作るサイトのトップページを「ちょと」豪華にする簡単なカスタマイズ方法をご紹介します。

それではご覧ください。

SWELLトップページの「コンテンツ設定」とは何か？

SWELLのカスタマイザーには、トップページ専用の「コンテンツ設定」メニューが用意されています。

ここでは、ブログやサイトの第一印象を決めるトップページに、どんな要素を表示するかを細かく調整できます。

例えば、以下のような設定が可能です。（カスタマイザーの設定項目）

• トップページ
  • メインビジュアル
  • 記事スライダー
  • ピックアップバナー
• 記事一覧リスト
  • リストレイアウト
  • タブ切り替え機能

これらを組み合わせることで、トップページを「読者に伝えたい情報を中心に構成できる」のが大きな特徴です。

ブログ初心者でも、カスタマイザーからプレビューを見ながら直感的に操作できるので安心です。

それでは、次の章から順に詳しく解説していきます。

カスタマイザーについて

WordPressのカスタマイザー（Customizer）は、ユーザーがリアルタイムでウェブサイトの外観と設定をカスタマイズできるツールです。

テーマの変更や ウィジェットの追加、メニューの編集、サイトのタイトルやキャッチフレーズの設定などを視覚的に行うことができます。

カスタマイザーは、『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』で、アクセスします。

以下に主要な機能を簡単に説明します。

カスタマイザーは使いやすく、コーディングの知識がなくてもサイトを自由にカスタマイズできるため、初心者から上級者まで幅広く利用されています。

カスタマイザーの起動手順

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

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

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

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

メインビジュアル

この章では、SWELLのメインビジュアルの設定方法をご紹介します。

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

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

それでは順番に見ていきましょう。

メインビジュアルの設定

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

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

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

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

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

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

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

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

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

表示設定

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

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

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

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

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

画像スライダー設定

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

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

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

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

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

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

各スライドの設定

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

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

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

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

記事スライダー

この章では、SWELLの記事スライダーの設定方法をご紹介します。

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

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

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

それでは順番に見ていきましょう。

記事スライダーの設定

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

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

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

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

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

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

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

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

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

記事のピックアップ方法

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

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

記事の表示設定

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

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

スライド設定

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

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

その他の表示設定

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

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

ピックアップバナー

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

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

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

それでは順番に見ていきましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SWELL公式サイト

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

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

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

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

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

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

バナーレイアウト

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

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

バナーデザイン

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

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

その他

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

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

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

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

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

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

タブ切り替え機能

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

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

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

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

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

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

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

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

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

カテゴリーIDの確認

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

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

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

タグIDの確認

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

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

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

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

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

まとめ！SWELL トップページのコンテンツ設定方法｜初心者でもできるカスタマイズ手順

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

メインビジュアルや記事スライダー、ピックアップバナー設定を活用することで、ユーザーに見やすくSEOにも効果的なサイト構成が実現できます。まずはデフォルト設定から始めて、少しずつ変更してみましょう。

この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／