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

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

• Avadaはなぜ人気があるのか​​？

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

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

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

フュージョンビルダーでは、次のような要素を追加することができます：ブログ記事リスト、ボタン、チェックリスト、コードブロック、コンテンツボックス、カウントダウン、カウンターボックス、カウンターサークル、エベント、フリップボックス、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（全体の幅コンテナ）を配置した後、その中に イメージカルーセルを置くことができます。

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

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

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

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

（4）列の最大数：表示する最大列数

（5）カラムの間隔

（6）スクロールするアイテム数

（7）ナビゲーション表示するかどうか

（8）マウスのスクロール

（9）枠

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

（11）CSS classを追加することができます。

（12）CSS IDを追加することができます。

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

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

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

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

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

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

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

最後に、

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

メモ：

• WooCommerce用グッズスライダーカルーセルプラグイン - YITH WooCommerce Product Slider Carousel