WordPressテーマ ▶︎ AFFINGER6 関連の記事 はこちらから!AFFINGER6

SWELL カスタマイザー完全ガイド|トップページのポイントと使い方!まとめてみた。

14008_swell-customize-top-page-2

こんにちは "osaboo"osabooです。"@osaboo_Bot"

SWELLのカスタマイザーでできる「トップページ」のポイントと使い方を初心者向けに解説します。

カスタマイザーのメニュー項目に沿って、一つ一つ徹底解説します。

「カスタマイザーってなに?」という初心者さん!必見です。^^

この記事では、「トップページ」の詳細項目全てを設定箇所と反映箇所を織り混ぜてご紹介しています。

こんな方におすすめ
  • SWELL 初心者さん
  • カスタマイザーってなに?
  • カスタマイザーの「トップページ」の内容を詳しく知りたい
  • SWELLの設定箇所に対する反映箇所がわからない
この記事でわかること
  1. カスタマイザーについて
  2. トップページ:メインビジュアル
  3. トップページ:記事スライダー
  4. トップページ:ピックアップバナー
  5. トップページ:その他
  6. まとめ

それではご覧ください。

目次 "Contents"

カスタマイザーについて

カスタマイザーについては、こちらで概要をご紹介しているのでご覧ください。

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

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

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

14248-9b:WordPress管理>ダッシュボード>外観>カスタマイズ

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

この記事では、「トップページ」タブの詳細項目について紹介していきます。(赤破線部)

『トップページ』をクリック

14008-1|カスタマイザー|トップページ
yajirusi-yoko-40x80

以下の詳細項目をご紹介します。

14008-2|カスタマイザー|トップページ|詳細
osaboo

カスタマイザーの設定を変更したら必ず、『公開』!
その他の設定を変更したら必ず、設定ページの『変更を保存』!
…を忘れずにクリックしましょう。

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

トップページ:メインビジュアル

14008-7|メインビジュアルの場所
  • カスタマイザー起動後の手順になります。

トップページ:メインビジュアルでは、トップページに表示する画像や動画の設定を行うことができます。

メインビジュアルは、ウェブサイトを訪れたユーザーが最初に目にする部分であり、とても重要です。

メインビジュアルの設定手順は以下の通りです。
  • メインビジュアルの表示内容
  • 表示設定
  • 画像スライダー設定
  • 各スライドの設定

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

設定メニューは次の手順で開きます。

『トップページ』をクリック

14008-1|カスタマイザー|トップページ
yajirusi-yoko-40x80

『メインビジュアル』をクリック

14008-2-1|カスタマイザー|トップページ|メインビジュアル

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

メインビジュアルの表示内容を設定できる画面が表示されます。

デフォルト設定では画像が選択されており、多くのウェブサイトではその画像がメインビジュアルとして表示されています。ここでは、デフォルトの画像を選択した場合について解説します。

概要は以下を参考にしてください。

14008-3|カスタマイザー|トップページ|メインビジュアル|メインビジュアルの表示内容
メインビジュアルの表示内容

「表示しない・画像・動画」から選択できます。

  • 画像(デフォルト)

表示設定

  • 画像を選択した場合の解説になります。

表示設定では、画像の大きさや画像に表示できるボタンの形状などの設定ができます。

カスタマイザーで表示設定まで下側にスクロールします。

14008-4|カスタマイザー|トップページ|メインビジュアル|表示設定
表示設定

画像・動画の装飾設定ができます。

  • 周りに余白をつける
    • OFF(デフォルト)
  • Scrollボタンを表示する
    • OFF(デフォルト)
      • 画像に中央最下部に表示されます。
メインビジュアルの高さ設定
(選択メニューにより サブメニューが異なります)

以下のメニューから選択できます。

をクリックします。

14008-9a
  • 画像・動画サイズのまま
    • 画面全体に表示されます。(サイズによる)
  • コンテンツに応じる
    • ヘッダー上部のみに表示されます。
  • 数値で指定する(デフォルト)
    • メインビジュアルの高さ(PC)
      • 30vw(デフォルト)
    • メインビジュアルの高さ(SP)
      • 50vh(デフォルト)
  • ウィンドウサイスにフィットさせる
    • 画面全体に表示されます。
画像(動画)の上に表示されるボタンの丸み
(ボタン設定時に有効になります)

「なし・少し丸める。丸める」から選択できます。

  • なし(デフォルト)
フィルター処理
(デフォルトがおすすめです)

以下のメニューから選択できます。

をクリックします。

14008-20
  • ドット(デフォルト)
オーバーレイカラー
(0.2-0.5がいい感じです)
  • カラーパレットから選択できます。
    • #000000(デフォルト)
  • 不透明度:0〜1
    • 0.2(デフォルト)

画像スライダー設定

画像スライダー設定では、表示アニメーションや切り替わり速度など、画像のスライド条件を設定できます。

カスタマイザーで画像スライダー設定まで下側にスクロールします。

14008-5a|カスタマイザー|トップページ|メインビジュアル|画像スライダー設定(画像なし)
yajirusi-sita-80x40
14008-5-1|カスタマイザー|トップページ|メインビジュアル|画像スライダー設定(画像あり)
画像スライダー設定(画像なし)
  • 画像を選択していないとの左のメニューが表示されます。
  • 各スライド設定で画像を選択します。
画像スライダー設定(画像あり)

画像を選択するとの左のメニューが表示されます。

スライドの切り替えアニメーション

「フェード・スライド」から選択できます。

  • フェード(デフォルト)
スライドの表示中アニメーション

「なし・ズームイン・左から右へ」から選択できます。

  • なし(デフォルト)
スライドの切り替わり速度
  • 1500(デフォルト)
スライドが切り替わる間隔
  • 5000(デフォルト)
スライドの表示枚数(PC)
  • 1(デフォルト)
    • 1以上はスライド表示(画像は繰り返し表示)
スライドの表示枚数(SP)
  • スマホ用の設定(PCと同じ)
ナビゲーションの表示設定
  • 矢印ナビゲーションを表示する
    • OFF(デフォルト)
  • ページネーションを表示する
    • ON(デフォルト)
テキストの固定表示設定
(テキスト・ボタン・リンクが含まれます)
  • スライド1枚目のテキストを常に表示する
    • OFF(デフォルト)

各スライドの設定

各スライドの設定では、「ブログパーツ」「テキスト」「ボタン」「リンク」などを表示でき、各種設定が可能です。さらに、画像を1枚追加すると、次の画像の設定メニューが順次表示され、スムーズに追加できます。

カスタマイザーで各スライドの設定まで下側にスクロールします。

14008-6a|カスタマイザー|トップページ|メインビジュアル|各スライドの設定
各スライドの設定
  • 各スライド設定で画像を選択します。
スライド[1]
  • スライド画像[1](PC)
    • 画像を選択
  • スライド画像[1](SP)
    • 画像を選択
  • メインテキスト[1]
    • さぁ、始めよう。(デフォルト)
  • サブテキスト[1]
    • なし(デフォルト)
  • ブログパーツID[1]
    • なし(デフォルト)
  • alt属性値[1]
    • なし(デフォルト)
  • リンク先URL[1]
    • なし(デフォルト)
  • ボタンテキスト[1]
    •  なし(デフォルト)
  • ボタンテキストを作成するとリンクが画像からボタンに切り替わります。
  • テキストの位置 [1]
    • 中央(デフォルト)
  • テキストカラー[1]
    • カラーパレットから選択できます。
      • #ffffff(デフォルト)
  • テキストシャドウカラー[1]
    • カラーパレットから選択できます。
      • #000000(デフォルト)
  • ボタンカラー[1]
    • カラーパレットから選択できます。
      • #RRGGBB(クリア)(デフォルト)
  • ボタンタイプ[1]
    • 白抜き(デフォルト)
    • ボーダー
  • 各スライドの設定は [1]〜が設定できます。「設定手順は同じです」
各スライドの設定_補足

1枚目の画像を登録から削除するとデフォルトで表示される自動画像リンが適応されます。

やりかたは…スライド画像[2](2枚目)以降の画像を設定した後、スライド画像[1](1枚目)の設定画像を『削除』すればOKです。

各スライドの設定イメージは以下をご覧ください。

トップページ:記事スライダー

14008-10a|記事スライダーの場所
  • カスタマイザー起動後の手順になります。

トップページ:記事スライダーでは、トップページに表示する記事をカードスタイル(ブログカード)でスライドさせながら表示できます。

記事スライダーの設定手順は以下の通りです。
  • 記事スライダーをどうするか
  • 記事のピックアップ方法
  • 記事の表示設定
  • スライド設定
  • その他の表示設定

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

設定メニューは次の手順で開きます。

『トップページ』をクリック

14008-1|カスタマイザー|トップページ
yajirusi-yoko-40x80

以下の詳細項目をご紹介します。

14008-2-2|カスタマイザー|トップページ|記事スライダー

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

記事スライダーでは、スライダーの設置と設定がきます。

14008-12|記事スライダー|記事スライダーを設置するかどうか
記事スライダーを設置するかどうか

「設置しない・設置する」から選択できます。

  • 設置する(デフォルト)

記事のピックアップ方法

  • 記事スライダーを設置した場合の解説になります。

記事のピックアップ方法では、スライダーに表示する記事の選択条件を設定できます。

カスタマイザーで記事のピックアップ方法まで下側にスクロールします。

14008-13|記事スライダー|記事のピックアップ方法
ピックアップ対象

「カテゴリー・タグ」から選択できます。

  • カテゴリー(デフォルト)
ピックアップ対象のカテゴリーID
  • IDを入力(複数の場合は『 , 』で区切る)
並び順

以下のメニューから選択できます。

をクリックします。

14008-17
  • ランダム(デフォルト)

記事の表示設定

記事の表示設定では、画像周りの付加情報の表示設定ができます。

カスタマイザーで記事の表示設定まで下側にスクロールします。

14008-14|記事スライダー|記事の表示設定
記事の表示設定
タイトルや日付などの表示位置

以下のメニューから選択できます。

をクリックします。

14008-18
  • 画像の下側(デフォルト)
カテゴリーの表示位置

以下のメニューから選択できます。

をクリックします。

14008-19
  • サムネイル画像の上(デフォルト)
日付の表示設定
  • 公開日を表示する
    • OFF(デフォルト)
  • 更新日を表示する
    • OFF(デフォルト)
著者の表示設定
  • 著者を表示する
    • OFF(デフォルト)

スライド設定

スライド設定では、スライダーに表示する記事の数、アニメーションの速度、切り替え間隔など、サムネイル画像のスライド条件を設定できます。

カスタマイザーでスライド設定まで下側にスクロールします。

14008-15|記事スライダー|スライド設定
スライダーの枚数設定(PC)
  • 5(デフォルト)
スライダーの枚数設定(SP)
  • 2(デフォルト)
スライドのアニメーション速度
  • 1500(デフォルト)
スライドが切り替わる間隔
  • 5000(デフォルト)
その他の設定
  • 矢印ナビゲーションを表示する
    • OFF(デフォルト)
  • ページネーションを表示する
    • ON(デフォルト)
  • スライド感の余白をなくす
    • OFF(デフォルト)

その他の表示設定

その他の表示設定では、記事スライダーエリアのタイトル、スライダーエリアの幅、文字色、背景色などを設定できます。

カスタマイザーでその他の表示設定まで下側にスクロールします。

14008-16|記事スライダー|その他の表示設定
記事スライダーエリアのタイトル
  • なし(デフォルト)
上下の余白量

「なし・小・中・大」から選択できます。

  • 小(デフォルト)
左右の幅

以下のメニューから選択できます。

をクリックします。

14008-21
  • コンテンツ幅に収める(デフォルト)
記事スライダーエリアの文字色
  • カラーパレットから選択できます。
    • #RRGGBB(クリア)(デフォルト)
記事スライダーエリアの背景色
  • カラーパレットから選択できます。
    • #RRGGBB(クリア)(デフォルト)
記事スライダーエリアの背景画像
  • 画像を選択
背景画像の透過設定
  • 1(デフォルト)

トップページ:ピックアップバナー

14008-22|ピックアップバナーの場所
  • カスタマイザー起動後の手順になります。

トップページ:ピックアップバナーでは、トップページに表示されるピックアップバナーのレイアウトやデザインなどの表示設定ができます。

ピックアップバナーは、メニューで作ります。

ピックアップバナーの作り方は、以下の記事でご紹介しています。参考にしてくださいね。

ピックアップバナーの設定手順は以下の通りです。
  • バナーレイアウト・バナーデザイン
  • その他

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

設定メニューは次の手順で開きます。

『トップページ』をクリック

14008-1|カスタマイザー|トップページ
yajirusi-yoko-40x80

以下の詳細項目をご紹介します。

14008-2-3|カスタマイザー|トップページ|ピックアップバナー

バナーレイアウト・バナーデザイン

バナーレイアウトでは、列数やタイトルの表示位置、余白などの表示設定を調整できます。

14008-23|カスタマイザー|トップページ|ピックアップバナー|バナーレイアウト・バナーデザイン
バナーレイアウト
バナーレイアウト(PC)

以下のメニューから選択できます。

をクリックします。

14008-25
  • 固定幅4列(デフォルト)
バナーレイアウト(SP)

以下のメニューから選択できます。

をクリックします。

14008-26
  • 固定幅2列(デフォルト)
バナーデザイン
バナータイトルのデザイン

以下のメニューから選択できます。

をクリックします。

14008-27
  • 左上に表示(デフォルト)
記事スライダーエリアの文字色
  • カラーパレットから選択できます。
    • #RRGGBB(クリア)(デフォルト)
内側に白線を
  • つけない
  • つける(デフォルト)
バナー画像を少し暗く
  • しない(デフォルト)
  • する
バナーレイアウト・バナーデザイン_補足

ピックアップバナーは4個以下がおすすめです。

4個を超える場合は、表示を2行にすることも考慮してバランスよく作りましょう。

その他

その他では、トップページ以外への表示設定やLazyloadをOFFにする設定ができます。

カスタマイザーでその他まで下側にスクロールします。

14008-24|カスタマイザー|トップページ|ピックアップバナー|その他
トップページ以外の下層ページにも表示する
  • OFF(デフォルト)
Lazyloadを強制オフにする
  • ON(デフォルト)

トップページ:その他

14008-28|その他|コンテンツ上の余白量の場所
  • カスタマイザー起動後の手順になります。

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

その他の設定手順は以下の通りです。
  • コンテンツ上の余白量

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

設定メニューは次の手順で開きます。

『トップページ』をクリック

14008-1|カスタマイザー|トップページ
yajirusi-yoko-40x80

以下の詳細項目をご紹介します。

14008-2-4|カスタマイザー|トップページ|その他

コンテンツ上の余白量

コンテンツ上の余白量では、メインビジュアル・記事スライダーの部分と、その下のコンテンツ部分との間の余白量を4種類から選択できます。

14008-29|その他|コンテンツ上の余白量
コンテンツ上の余白量
  • なし
  • 狭め
  • 標準(デフォルト)
  • 広め

※ SWELL公式マニュアルはこちらからご覧いただけます

まとめSWELL カスタマイザー完全ガイド|トップページのポイントと使い方!まとめてみた。

SWELLのカスタマイザーでできる「トップページ」のポイントと使い方をご紹介しました。

トップページ上部に設置できるコンテンツが、標準の機能でわかりやすいメニューから設定できます。初心者の方でもかんたんにおしゃれなトップページが作れるようになっているので、ぜひ試してみてくださいね!

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

  • URLをコピーしました!
  • URLをコピーしました!
目次 "Contents"