初心者SWELLのメインビジュアルって、どんな設定ができるの？
購入前にどんな機能があるか確認したい！
SWELL初心者少しアレンジしたいけど、やり方が分からない！
実例ごとにサンプルコードを紹介してほしい
そんな人向けの解説です。
SWELL購入前にメインビジュアルエリアでどういった設定ができるか気になりますよね？この記事ではSWELL最新版の設定画面を図解しながらメインビジュアルの設定オプションを紹介します。
SWELメインビジュアルの設定オプション
メインビジュアルの仕様を紹介します。
メインビジュアルに何を表示できるの？
メインビジュアルエリアは次の3つの選択肢があります。
メインビジュアルの選択肢
- 表示しない
- 画像(スライドショーも対応)
- 動画
①：表示しない
メインビジュアルに何も設定するものがない場合のオプションです。
かんたメインビジュアルはサイトの顔となる場所です。あまりこのオプションを使うことはありませんね。
②：画像(スライドショーも対応)
静止画像を設置するオプションです。
画像は最大５枚設置し、スライドショーとして表示することができます。
③：動画
スライドショーよりもインパクトがほしい！そんな人は動画をメインビジュアルに設定しましょう。動画はYoutubeなどの外部サイトの埋め込みではなく、動画ファイルをサーバーにアップロードして指定する形式です。
かんた動画を直接サーバーにアップロードする仕組みは、けっこう珍しい。
| テーマ名 | メインビジュアルの動画埋め込み機能 |
|---|---|
| AFFINGER | YouTube動画の埋め込み |
| JIN | なし |
| SANGO | なし |
| SWELL | 動画ファイル |
| STORK19 | なし |
| THE THOR | YouTube動画の埋め込み |
わざわざYoutubeのアカウントを使わず動画をメインビジュアルに設定出来るのは嬉しい仕様です。
表示を調整する設定オプション
メインビジュアルの種類を設定したら、次は表示を調整するオプションです。表示サイズやスライドショー設定時のエフェクトなどが指定できます。
表示設定
周りに余白をつける
Scrollボタンを表示する
メインビジュアルの高さ設定
数値で指定：
メインビジャアルの高さ（PC）
メインビジャアルの高さ（SP）
※SPはスマホのことです。
フィルター処理
- なし
- ブラー
- グレースケース
- ドット
- ブラシ
オーバーレイカラー
メインビジュアルへのエフェクトです。
色と、透明度を指定できます。
メインビジュアルの上のテキスト（キャッチコピー）
メインビジュアルに任意のテキストを表示できます。
メディアをアップロードから画像をアップロード
画像の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);
});フェードイン以外のエフェクト
今回紹介したフェードインはjQueryのfadIn()とその対のfadeOut()メソッドで実装しています。
これ以外にもロゴの表示や画面の切り替わりを演出してくれるメソッドがあります。サンプルコードのfadeIn、fadeOut部分を置き換えるだけです。エフェクトを別のものに変更し好みのものを見つけてください。
エフェクト
- fadeTo()
- slideIn()
- slideOut()
- slideDown()
- slideUp()
まとめ
WordPress有料テーマ「SWELL」のメインビジュアル設定について解説しました。
この記事で紹介したメインビジュアルの機能は、記事執筆時に利用可能な最新バージョン2.3.3.1に実装されている機能です。
バージョンが異なる場合は表示される設定名や位置が異なる場合があります。
最新の情報はSWELL公式ページをご確認ください。
