[swell]メインビジュアル画像の設定[トップページ]

• Facebook
• X(旧:Twitter)
• はてブ
• LINE
• Pocket

この記事では、swellでのトップページ：メインビジュアルの設定方法と、設定ごとの変化一覧などをまとめています。

swell

[5]

実際に使用・解説している、使いやすさから一番おすすめのWordPressテーマ。

デモ一覧

swell販売サイト

トップページ-設定の場所

swellでのトップページを編集できる場所は、「外観」＞「カスタマイズ」から遷移

「トップページ」＞「メインビジュアル」でトップページのメインビジュアルを設定することができます。

トップページ

ここからは、トップページ-メインビジュアルのカスタマイズで調整できるポイントを一覧にしていきます。

メインビジュアル設定-非表示・画像or動画の選択-

swelでは、メインビジュアルに画像または動画を反映することができます。

「メインビジュアルの表示内容」項目にて、セレクトボックスでメインビジュアルの形式を選択します。

• 表示しない
  -メインビジュアルを非表示に設定
• 画像
  -複数設定することができます。
  複数の場合はスライドになります。
  各スライドごとにテキストやボタン設定⭕️)
• 動画
  -動画はひとつまで設定可能
  -pc版/sp版それぞれ設定ができ、ポスター画像(動画が読み込まれるまでの画像)も設定可能

設定・変更のやり方-メインビジュアル-

まずは、サイトの顔となるメインビジュアルの設定・変更のやり方です。

STEP1

スライド設定へ

メインビジュアル設定の「◼︎各スライドの設定」という項目までいきます。(少し下まで下がります)

スライド[1]-スライド画像[1]下の「画像を選択」または「画像を変更」

STEP2

画像を選択

メインビジュアルにしたい画像をアップロードor選択

STEP3

反映を確認する

これで画像の設定ができました。
反映された画像を確認して、ここからテキストなど各ポイントを調整をしていきます。

ここからは、swellのトップページカスタマイズで設定できる項目の調整による変化を一覧にしています。
※画像での設定項目順

メインビジュアルの表示内容-3パターン-

冒頭でも解説した「メインビジュアルの表示内容」

表示しない-メインビジュアルの表示内容-

メインビジュアルなし

メインビジュアルに設定しないメリットもあり、ブログなどではメインビジュアルで最新の投稿をアピールしたり、
好きなコンテンツを代わりに表示したい場合などに非表示が有効です。

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

画像をメインビジュアルに設定(複数可能)

複数の画像をメインビジュアルに設定可能で、それぞれテキストやボタンを設定できます。

複数枚設定した場合は、スライド形式になります。

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

動画をメインビジュアルに設定できます。(反映参考↓)

表示設定-メインビジュアルの微調整-

「表示設定」で調整できる項目。

周りに余白をつける-ON/OFF-

メインビジュアルの周囲に余白をつけるかどうか

◀︎チェックON　・　チェックOFF▶︎

scrollボタン-ON/OFF-

メインビジュアル下部にスクロールモーションをつけるかどうか

◀︎チェックON　・　チェックOFF▶︎

メインビジュアルの高さ設定-4パターン-

メインビジュアルの表示される高さ設定が可能。

コンテンツに応じる

数値で指定する

数値を変更するごとに逆さの調整が可能です。
PC/スマホと個別に指定できます。

反映例:30vh

反映例:450vh

数値を変更するごとに逆さの調整が可能です。
PC/スマホと個別に指定できます。

ウィンドウサイズにフィットさせる

画像・動画サイズそのまま

モデルである筆者サイトの絵は、メインビジュアル用に横長に使えるよう想定して描いたものです。

画像(動画)の上に表示されるボタンの丸み-3パターン-

ボタンの形状を選択可能。
3パターンから選ぶことができます。

ボタンの設定はこちら(ページ内ジャンプ)

フィルター処理-5パターン-

フィルター処理は、メインビジュアルの画像or動画に加工処理をつけることができます。

なし

ブラー

グレースケール

ドット

ブラシ

オーバーレイカラー-5パターン-

メインビジュアルにオーバーレイカラー加工を施せます。

「オーバーレイカラーの不透明度」で、カラー加工の不透明度を変更できます。

◀︎ 0 ・ 0.6 ▶︎

画像スライダー設定/各スライドの設定-メインビジュアル-

こちらは、冒頭でも紹介していたメインビジュアルとスライドの設定です。

スライド画像の設定/変更

スライド画像を画像を選択から設定できます(pc/sp個別に設定可能)
画像の変更は、画像を変更ボタンで変更がきでます。

ちなみに、モデルサイトはスマホでも横長で表示したいので、pcのみ設定しています。

メイン・サブテキスト

メインビジュアルに表示できるテキストは、自由に入力できます。

ボタンの設定

ボタン設置と、関連する項目です。

ボタンの形状についてはこちら(ページ内ジャンプ)

リンクURL

ここに入力したURLがボタンの遷移先に設定できます。

ボタンのテキスト

ボタンのテキストを自由に入力できます。

テキストの位置-テキストとボタンの位置-

テキストを表示する位置を選べます。

左・中央・右で設定可能ですが、縦軸の設定はできないのでご注意ください。

テキストカラー設定-テキスト・ボタンカラー-

テキストとボタンカラーの設定ができます。

スクロールボタンも一緒に変わるので、念頭に置きつつ・・

ボタンタイプ2パターン

ボタンのタイプを変更できます。
白抜きとボーダーの2種

SWELLのデモサイト一覧-swell公式サイト-

以上がswellでカスタマイズできるトップページ-メインビジュアルの設定でした。

swellのデモサイトを参考にして作るのもおすすめです。

swell

[5]

実際に使用・解説している、使いやすさから一番おすすめのWordPressテーマ。

デモ一覧

swell販売サイト

• Facebook
• X(旧:Twitter)
• はてブ
• LINE
• Pocket