MENU
購入する
  1. ホーム
  2. SWELL
  3. 【SWELL】メインビジュアルでいったい何が表示できるの？メインビジュアルの機能一覧を紹介します。

【SWELL】メインビジュアルでいったい何が表示できるの？メインビジュアルの機能一覧を紹介します。

SWELL
実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。
【比較】他のWordPress有料テーマの費用
初心者

SWELLのメインビジュアルって、どんな設定ができるの？
購入前にどんな機能があるか確認したい！

SWELL初心者

少しアレンジしたいけど、やり方が分からない！
実例ごとにサンプルコードを紹介してほしい

そんな人向けの解説です。

SWELL購入前にメインビジュアルエリアでどういった設定ができるか気になりますよね？この記事ではSWELL最新版の設定画面を図解しながらメインビジュアルの設定オプションを紹介します。

参考
SWELL公式：メインビジュアルの設定方法
この記事を書いた人
  • IT業界24年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

SWELメインビジュアルの設定オプション

SWELメインビジュアルの設定オプション

メインビジュアルの仕様を紹介します。

メインビジュアルに何を表示できるの？

メインビジュアル

メインビジュアルエリアは次の3つの選択肢があります。

メインビジュアルの選択肢

  1. 表示しない
  2. 画像(スライドショーも対応)
  3. 動画

①：表示しない

メインビジュアルに何も設定するものがない場合のオプションです。

かんた

メインビジュアルはサイトの顔となる場所です。あまりこのオプションを使うことはありませんね。

②：画像(スライドショーも対応)

静止画像を設置するオプションです。

画像は最大５枚設置し、スライドショーとして表示することができます。

画像を1枚を設定したデモサイト
スライドショーを有効化したデモサイト

③：動画

スライドショーよりもインパクトがほしい！そんな人は動画をメインビジュアルに設定しましょう。動画はYoutubeなどの外部サイトの埋め込みではなく、動画ファイルをサーバーにアップロードして指定する形式です。

動画を設定したデモサイト
かんた

動画を直接サーバーにアップロードする仕組みは、けっこう珍しい。

テーマ名メインビジュアルの動画埋め込み機能
AFFINGERYouTube動画の埋め込み
JINなし
SANGOなし
SWELL動画ファイル
STORK19なし
THE THORYouTube動画の埋め込み
他の有料テーマの動画埋め込み機能

わざわざYoutubeのアカウントを使わず動画をメインビジュアルに設定出来るのは嬉しい仕様です。

表示を調整する設定オプション

メインビジュアルの種類を設定したら、次は表示を調整するオプションです。表示サイズやスライドショー設定時のエフェクトなどが指定できます。

表示設定

周りに余白をつける
Scrollボタンを表示する

メインビジュアルの高さ設定


数値で指定：
メインビジャアルの高さ（PC）
メインビジャアルの高さ（SP）


※SPはスマホのことです。

フィルター処理

  • なし
  • ブラー
  • グレースケース
  • ドット
  • ブラシ

オーバーレイカラー

メインビジュアルへのエフェクトです。

色と、透明度を指定できます。

メインビジュアルの上のテキスト（キャッチコピー）

メインビジュアルに任意のテキストを表示できます。

フォントサイズについて
メインビジュアルのフォントサイズはSWELLの基本機能で変更できません。CSSのコードでフォントサイズを編集するカスタマイズ方法を記事の後半で紹介します。

メディアをアップロードから画像をアップロード
画像のURLをコピー

カスタマイザーからトップページ→メインビジュアル

<img src="画像のパス">

これでOKです。

ブログパーツ

「ブログパーツ」はSWELL固有の機能です。SWELLのブロックエディター上で作成した内容をトップページに表示させることができます。

ブログパーツを設定したデモサイト

メインビジュアルの独自カスタマイズ

メインビジュアルの独自カスタマイズ

メインビジュアルを編集する実用的なテクニックを紹介します。

メインビジュアルのフォントサイズを変更する方法

メインビジュアルの上には2種類のテキストが表示できます。SWELLの基本機能にはこのフォントの大きさを変更することはできません。

2種類のテキスト

  • メインテキスト
  • サブテキスト
かんた

フォントサイズを大きくする方法を解説します。

メインテキストのフォントサイズを変更する方法

メインテキストのHTMLコードは次のように出力されます。

<div class="p-mainVisual__slideTitle">メインテキスト</div>

「p-mainVisual__slideTitle」でfont-sizeの設定をすれば文字サイズを自由に変更できます。ちなみにデフォルトは28pxです。

パソコンやタブレット系でフォントサイズを変更する場合

@media (min-width: 600px){
.p-mainVisual__slideTitle {
    font-size: 28px;
}
}

スマホも含めてフォントサイズを統一する場合

.p-mainVisual__slideTitle{
	font-size:28px;
}

サブテキストのフォントサイズを変更する方法

サブテキストのHTMLコードは次のように出力されます。

<div class="p-mainVisual__slideText">サブテキスト</div>

「p-mainVisual__slideText」でfont-sizeの設定をすれば文字サイズを自由に変更できます。

パソコンやタブレット系でフォントサイズを変更する場合

@media (min-width: 600px){
.p-mainVisual__slideText {
    font-size: 28px;
}
}

スマホも含めてフォントサイズを統一する場合

.p-mainVisual__slideText{
	font-size:20px;
}

フォントサイズが大きくならない場合

「CSSコードを追加してもメインビジュアルのフォントサイズが大きくならないよ！」そんな場合は次の点を確認しましょう。

  • CSSコードの記述ミス
  • ブラウザのキャッシュをクリア
  • CSSの読み込み順

コードの記述ミス

各行の末尾にある「;」や「}」　に注意しましょう。

これが１文字抜けるだけで、動作しません。

ブラウザのキャッシュをクリア

CSSのコードは問題なく入力出来ている場合でもブラウザのキャッシュは古いCSS情報を読みこんでいる可能性があります

ブラウザのキャッシュをクリアして再度ページを読み込みましょう。「キャッシュって何だ？」って人は、別のブラウザを立ち上げてみましょう。

かんた

普段　Chromeをメインブラウザにしている人がMSのEdgeを使ってみるといったイメージです。

CSSの読み込み順

CSSに加えたコードが正しくも「読み込み順」の問題でフォントサイズが調整できないことがあります。

CSSの順番を見直すか「!important」を使いましょう。

@media (min-width: 600px){
.p-mainVisual__slideTitle {
    font-size: 50px !important;
}
}

メインビジュアル動画のループを止める方法

メインビジュアルに動画を設定した場合、動画は最後まで進むと最初に戻るループが標準仕様ですこのループを停止する方法を紹介します。

動画のループを止めるサンプルコード

$(function() {
$('video').removeAttr('loop');
});

注意
サンプルコードを実装するとvideoからloop属性を削除します。トップページ以外にもvideoコードを使っている場合は、セレクタをトップページ限定にしたりトップページだけにコードを設置するなど反映エリアを限定してください。

ロゴをふわっとフォードイン表示させる方法

サイトにアクセスした際に、ロゴマークをふわっと表示しサイトを遅らせて表示するカスタマイズです。

参考

サンプルコードを紹介します。

それぞれのコードをトップページ上の任意の箇所に貼り付ければOKです。例ウィジェット、トップページのエディター内。

<div class="front-logo">
<img src="画像のパス">
</div>

画像のパス部分が、ロゴなどふわっと表示させたい画像です。

.front-logo{
background: white;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9999999;
}


.front-logo img {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 9999999;
max-width: 300px;
height: auto;
}
jQuery(function() {
setTimeout(function(){
$('.front-logo img').fadeIn(1000);
},500);
setTimeout(function(){
$('.front-logo').fadeOut(1000);
},2500);
});

JS内の数字でフェードインの間を設定しています。
エフェクトの切り替わり速度を調整しましょう。

フェードイン以外のエフェクト

今回紹介したフェードインはjQueryのfadIn()とその対のfadeOut()メソッドで実装しています。

これ以外にもロゴの表示や画面の切り替わりを演出してくれるメソッドがあります。サンプルコードのfadeIn、fadeOut部分を置き換えるだけです。エフェクトを別のものに変更し好みのものを見つけてください。

エフェクト

  • fadeTo()
  • slideIn()
  • slideOut()
  • slideDown()
  • slideUp()

まとめ

WordPress有料テーマ「SWELL」のメインビジュアル設定について解説しました。

この記事で紹介したメインビジュアルの機能は、記事執筆時に利用可能な最新バージョン2.3.3.1に実装されている機能です。
バージョンが異なる場合は表示される設定名や位置が異なる場合があります。

最新の情報はSWELL公式ページをご確認ください。

参考
SWELL公式：メインビジュアルの設定方法
あわせて読みたい
WPテーマ『SWELL』をレビュー｜デメリットを含めテーマを使ってみた感想と評判を検証 ワードプレス有料テーマの『SWELL』が気になる…。評判や口コミが良いみたいだけど、他のワードプレステーマと何が違うの？デメリットなんかも気になるな… ワードプ…
あわせて読みたい
【SWELL】コーポレートサイトのデモ一覧。オシャレなデザインのコーポレートサイトの作り方を解説 SWELLで作ったコーポレートサイトを見てみたいなぁ。どんな感じのデザインになるの？初心者でもオシャレに自分の会社HP作れる？ そんな疑問に答えます。 SWELL公式サイ…
SWELLと他のテーマの違いを徹底比較
SWELLへの乗り換え方法
SWELL
SWELL
よかったらシェアしてね！
  • URLをコピーしました！
目次