WordPress 中級

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

最終更新日： 2016.10.01

はじめ

最も人気のある 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に指定すると、元の画像サイズに関係なく、すべての画像が同じサイズで表示されます。