WordPress Avada(Avada)でImage Carousel使用する

Last Updated: 2023 年 07 月 16 日 2のコメント

最も人気のある WordPress テーマの一つである Avada(Avada)は長い間販売1位の座を守っているベストセラー WordPress テーマです。 Avadaが安定した人気を集めている理由の一つは、初心者でも簡単に使用できるように、さまざまなオプションと機能を提供するポイントでいます。

Avadaは、独自のページビルダーであるFusion Builder(フュージョンビルダー)を使用します。 (参考までに、多くの有料テーマで Visual Composer(Visual Composer)を基本搭載しています。)

Avada テーマでImage Carousel(画像回転スライド)を使用する

次の図は、Fusion Builderで追加できる要素(Element)を示しています。

Avada フュージョンビルダー要素

フュージョンビルダーでは、次のような要素を追加することができます:ブログ記事リスト、ボタン、チェックリスト、コードブロック、コンテンツボックス、カウントダウン、カウンターボックス、カウンターサークル、エベント、フリップボックス、Font Awesome、フュージョンスライダーは、Googleマップ、イメージキャラ設定、画像フレーム、 LayerSlider、メニューアンカー、モーダル(Modal)、Person、ポストスライダー、価格表(価格表)、進行状況バー、最近の記事、最近Works、 Slider Revolution、Section Separator(セクション区切り)、Separator、Sharing Box(共有ボックス)、スライダー、ソーシャルリンク、Soundcloud、表、タブ、タグラインボックス、Testimonial(使用期限)、テキストブロック、タイトル、トグル、ユーザのログイン、非メオ動画、ウィジェットエリア、 WooCommerce キャラ設定(Woo Carousel)、Woo Featured、 WooCommerce ショートコード(Woo Shortcodes)、YouTubeの動画。

画像回転スライド(Image Carousel)を追加するには、上の図の「イメージカルーセル「」をクリックしてドラッグし、目的の場所にドロップします。

たとえば、Fusion Builderの Column Options(カラムオプション)から Full Width Container(全体の幅コンテナ)を配置した後、その中に イメージカルーセルを置くことができます。

Avada - 画像の回転スライド

上記のようにImage Carouselを挿入した場合、編集アイコンをクリックして、各種オプションを設定して、画像を追加することができます。 編集アイコン(鉛筆のアイコン)をクリックすると、Image Carouselを設定できる画面が表示されます。

Avada 画像の回転、スライド編集

(1)画像のサイズを固定(Fixed)にするか、自動(Auto)に調整されるようにするかどうかを設定します。

(2)Hover Type:マウスを画像の上に置くときに適用する効果を指定します。

(3)Autoplay:画像の回転、スライドを自動的にプレイされるようにするかを設定します。

(4)列の最大数:表示する最大列数

(5)カラムの間隔

Avada 画像の回転、スライド編集

(6)スクロールするアイテム数

(7)ナビゲーション表示するかどうか

(8)マウスのスクロール

(9)枠

(10)画像ライトボックス設定するかどうか

Avada 画像の回転、スライド編集

(11)CSS classを追加することができます。

(12)CSS IDを追加することができます。

Add New Imageをクリックして画像を追加できます。 上記のようにImage Carousel Item 5+式で表示されます。 」Image Carousel Item 1「」をクリックすると、下図のように画像をアップロードできる画面が表示されます。

Avada Image Carouselアップロード

画像ウェブサイトのリンクを追加したり、 アップロードをクリックして、メディアライブラリの画像を指定するか、アップロードすることができます。 Image Alt Text(イディッシュか代替テキスト)にaltテキストを追加することができます。

テストのために、同じ画像を複数追加しました。 画像のサイズが同じになるよう同一の画像を続けて追加してPicture SizeをAutoに指定しました。 Autoに設定すると、画像のサイズが異なる場合、他のサイズで表示されます。 Fixedに指定すると、元の画像サイズに関係なく、すべての画像が同じサイズで表示されます。

in-action

その他の方法 - Carouselプラグイン

基本的に提供する画像の回転、スライドが気に入らない場合、外部のプラグインを使用することができます。 このような機能をプラグインとして Super Carousel, Responsive Posts Carousel WordPress Plugin (反応型ポストカルーセル WordPress プラグイン)があります。

3D効果をしたい場合はUltimate 3D Carousel WordPress Pluginというプラグインを考えてみることができそうです。 (※このプラグインは Codecanyonマーケットで除去され、提供されていません。)

3d-carousel
究極の3Dカルーセル WordPress Plugin銀の様々な3D効果の回転スライドを提供する WordPress プラグインです。

そして多目的コンテンツスライダー/回転スライドを提供する オール・アラウンドというプラグインも大丈夫なようです。 コンテンツスライダーとCarousel機能を同時に提供することです。 (※このプラグインは、長い間更新されていない。)

All Around  -  WordPress Content Slider / Carousel  - コンテンツスライダーと回転スライドを提供する WordPress プラグイン
All Around - WordPress Content Slider / Carousel - コンテンツスライダーと回転スライドを提供する WordPress プラグイン

最後に、

Avadaを使用している場合、Fusion BuilderでImage Carousel要素を使用して、基本的な画像の回転、スライドを作成することができます。 より洗練されたCarouselをしたい場合は上に紹介したCarouselプラグインを使用することができます。

メモ:

ワードクラッカーのアバター画像

ワードクラッカー

プロの英国翻訳家。 WordPress 愛好家。 Naver カフェ 「ワープ社」 操作。

2のコメント

コメントを残す

  1. image carousel はカテゴリやポストの recent イメージを carousel してくれませんね… あまりにも残念… だからといって recent post 機能に carousel やアライメント機能もあまりにも虚接… WooCommerceでのみサポートされているcategory image carousel ...

    応答
カカオトーク相談 カトクサービス相談