トップページのメインビジュアルに画像/スライドを表示

トップページのメインビジュアルに画像/スライドを表示
トップページのメイン画像で、画像またはスライドを表示する場合に設定します。

メイン画像:画像/スライドを表示

外観>カスタマイズ>トップページメイン画像 で、「画像/スライドを表示」 にチェックをします。

トップページのビジュアルの種類についてはこちらの記事でお伝えしています。

メイン画像:画像/スライドを表示 をクリックします。

 

メイン画像1枚のみを表示させたい場合

メイン画像を1枚だけ表示させる場合は、「メイン画像1」に画像を選択しておきます。

トップページの表示速度をより早くしたいときは、「メイン画像1(WebP)」にWebP形式のデータも追加しておくといいです。

 

WebP(ウェッピー)とは

WebP(ウェッピー)とは、Googleが作った画像フォーマットのこと。ファイルの拡張子は「.webp」です。

PNGのように透過した画像も書き出せる上に、GIFと同じようにアニメーションにも対応しています。

Webp形式を設定することにより、トップ画像の軽量化が図れます。サイトの表示速度が短縮されることで、ユーザビリティを良くし、SEOにもプラスに働きます。

ブラウザによっては対応していないものがあるため、Webp形式以外の画像も同時に設定しておくことをおススメします。

「メイン画像1」を設定していない場合は、Webp未対応ブラウザでトップページを見た際に、メインビジュアルがブランクとなります。

Webp形式の画像を作成したい場合は、以下の方法などがあります。
  • Photoshopなどで画像を書き出す
  • ファイル変換ができるソフトを使う
  • ブラウザ上で画像フォーマットを変換してくれるサービスを利用する

画像をスライド表示させたい場合

OneStepでは、画像を最大3枚までスライド表示させることができます。

スライド表示させたい画像を

  1. メイン画像1
  2. メイン画像2
  3. メイン画像3

それぞれ選択するだけで、メインビジュアルに反映されます。

トップページの表示速度をより早くしたいときには、WebP形式対応ブラウザ用に

  1. メイン画像1(WebP)
  2. メイン画像2(WebP)
  3. メイン画像3(WebP)

WebP形式のデータも追加しておきましょう。

メインビジュアルのサイズを変更する

オプションとして、以下の項目のオンオフを選ぶことができます。

  • PC:メイン画像の横幅を最大1260px
  • PC:メイン画像をファーストビュー全体に
  • モバイル:メイン画像をファーストビュー全体に
  • ※スマホでのデフォルト表示はこのようなイメージです

モバイルのみのメイン画像2,3も同様に設定ができます。

スライドの切り替え設定

画像の切り替え時間については、秒単位で設定が可能です。(デフォルトでは3秒)

さらに、以下の項目のオンオフを選ぶことができます。

    • スライドに矢印を表示・非表示
      「スライドに矢印を非表示」にすると、左右に表示されている矢印マークを非表示にすることができます。
    • スライドアクション(デフォルト)
    • フェード

WordPress テーマ

ダウンロードする→

FacebookTwitter

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

トップページのメイン画像に記事を表示
基本設定 2021.05.21

トップページのメイン画像に記事を表示

トップページメイン画像の設定
基本設定 2021.03.18

トップページメイン画像の設定

目次の設定
基本設定 2021.03.18

目次の設定

カスタマイザーの開き方
基本設定 2021.03.18

カスタマイザーの開き方

トップページのメインビジュアルに動画を表示する
基本設定 2021.03.18

トップページのメインビジュアルに動画を表示する

追加CSSの使い方
基本設定 2021.03.20

追加CSSの使い方