メインコンテンツへスキップ

【Avada】画像を追加する方法

  • 更新

Wordpressテンプレートの一つであるAvadaついてご説明します。
（本マニュアルは Avada 5.0.6を元に作成しております）


本マニュアルは、以下の三種類の画像表示方法について記載しています。

b_simple_122_2M.png



 Image Frameによる追加方法

一般的な画像を追加したい時はImage Frameが適しています。

  1. Image Frameを追加したいColumn内の「+Element」をクリックします。
    img_imgf00.png

  2. Select Element画面が表示されるので、「Image Frame」をクリックします。
    img_imgf01.png

  3. Image Frame画面が表示されます。
    img_imgf02.png

  4. 表示したい画像を選択します。
    1. Imageの「Upload Image」をクリックします。
      img_imgf03.png

    2. メディアを挿入画面が表示されるので [メディアライブラリ] タブから表示したい画像を選択します。
      新規に画像を追加したい場合はファイルをドラッグするか、[ファイルをアップロード] タブ内の「ファイルを選択」ボタンをクリックしてファイルを選択してください。
      img_imgf04.jpg

    3. メディアを挿入画面の「固定ページに挿入」をクリックすると、選択した画面をImageに設定できます。
      img_imgf05.png


  5. 必要に応じて、手順4で選択した画像の表示スタイル等を設定します。

    • Frame Style Type
      フレームのスタイルを設定できます。
      None以外を選択した場合 [Style Color] が追加で表示されるので、フレームの色を設定してください。

      img_imgf06.png


    • Hover Type
      画像にマウスカーソルを合わせた時の挙動を設定できます。
      Zoom OutはHover時に小さくなった時に元画像のサイズになるため、標準時は大きめに表示されます。
      img_imgf07.png
       

    • Border Size
      枠線の幅を設定できます。
      1以上にした場合 [Border Color] が追加で表示されるので、枠線の色を選択してください。
      img_imgf08.png


    • Border Radius
      枠線の角を丸く設定できます。0pxだと全く丸みがない状態になります。
      img_imgf09.png

    • Align
      画像の位置を設定できます。

      例）設定画面
      img_imgf10.png

      表示された画面（Alignの設定が上から「Text Flow」、「Left」、「Right」、「Center」）
      img_imgf11.png


    • Image lightbox
      画像をクリックした時にライトボックス（画像のみ拡大表示するウィンドウ）が画面上に表示されるかどうか設定できます。
      Yesにした場合 [Lightbox Image] が追加で表示されます。これを設定すると、ライトボックスに表示される画像を個別に指定することができます。設定方法は表示される画像を選択する時と同じです。

      例）左：設定画像なし　右：選択画像あり（表示位置の違いは関係ありません）
      img_imgf12.png　　　　　img_imgf13.png


    • Image Alt Text
      画像が表示されない時に表示される文字列を設定できます。その際、画像が何を表すのかを端的に表した文章にすることが大切です。無関係な内容は入力しないようにしましょう。

    • その他
      画像にアニメーションを設定したり、画面サイズに応じて表示状態を変えたり、CSSのIDやClassを設定したりできます。


  6. 「SAVE」をクリックします。
  7. 画像が設定されました。

 

 
b_simple_122_2M.png



 Image Carouselによる追加方法

カルーセル表示させたい時は本Elementを使用します。
カルーセルとは、複数の横並びの画像をその表示領域内で順々にスライド表示させる表示方法のことを指します。

  1. Image Carouselを追加したいColumn内の「+Element」をクリックします。
    img_imgf00.png

  2. Select Element画面が表示されるので、「Image Carousel」をクリックします。
    img_imgc02.png

  3. Image Carousel画面が表示されます。
    img_imgc03.png


  4. 画像や全体の設定を行います。

    • 【左側】Add / Edit Itemsエリア
      こちらでは、各画像について設定できます。
      img_imgc03-a.png

      • 追加／設定方法
        1. 「＋ Image」をクリックして項目を追加します。
          img_imgc04.png

        2. img_imgcico01.pngをクリックします。
          img_imgc05.png

          Image画面が表示されます。
          img_imgc06.png

        3. 「Upload Image」をクリックして画像を選択し、画像を設定します。設定方法はImage Frameの表示される画像を選択する時と同じです。

        4. 必要に応じて、Link TargetやImage Alt Textを設定します。
          • Link Target：画像をクリックした時に遷移するリンク先
            • Image Website Link→URLを入力（設定しない場合は空欄）
            • Link Target→_selfと_blankのどちらかを選択
              ※_selfは表示中の画面に、_blankは新規画面にリンク先が表示されます
          • Image Alt Text：画像が表示されない時に表示される文字列
        5. 「SAVE」をクリックします。
        6. 設定した内容の画像が項目のひとつとして追加されたことが確認できます。


      • 複製
        • img_imgcico02.pngをクリックすると選択した項目を複製できます。
          img_imgc07_1.png→img_imgc07_2.png


      • 削除
        • img_imgcico03.pngをクリックすると選択した項目を削除できます。
          img_imgc08_1.png→img_imgc08_2.png


      • 並び替え
        • 項目にカーソルを合わせるとカーソルがに変わるので、その状態で項目をドラッグ＆ドロップするとドロップ先に順番を入れ替えることができます。
          img_imgc08_3.png→img_imgc08_4.png→img_imgc08_5.png


    • 【右側】Picture Sizeのエリア
      こちらでは、カルーセル表示エリア全体に関する設定を実施できます。
      img_imgc03-b.png

      • Picture Size
        画像の大きさに応じて幅と高さを調整する（Auto：上）かしない（Fixed：下）かを選択できます。
        img_imgc09_1-1.png
        img_imgc09_1-2.png

      • Hover Type
        画像にマウスカーソルを合わせた時の挙動をNone、Zoom In、Zoom Out、Lift Upから選択できます。

        None（挙動なし）
        img_imgc09_2-1.png

        Zoom in（一番右の画像にマウスオーバーしている状態）
        img_imgc09_2-2.png

        Zoom Out（中央の画像にマウスオーバーしている状態）
        img_imgc09_2-4.png

        Lift Up（左の画像にマウスオーバーしている状態）
        img_imgc09_2-5.png


      • Autoplay
        自動でスライドを切り替えたい場合Yesを選択してください。

      • Maximum Columns
        一度に最大いくつ表示されるか設定できます。エリアの幅の方が少ない場合そちらが優先されます。（Column数：上3／下2）
        img_imgc09_0.png
        img_imgc09_3-1.png

      • Column Spacing
        アイテム間の余白を設定できます。（Spacing：上13px／下100px）
        img_imgc09_0.png
        img_imgc09_4-1.png

      • Scroll Items
        Autoplay時、マウスでナビゲーションをクリックした時ともにいくつ分画像をずらすかを設定できます。空欄の場合は表示中のアイテム全てがずらされて次のアイテム群に表示が切り替わります。

        元画像
        img_imgc09_5-1.png

        例：上記カルーセルエリアの左ナビゲーションボタンをクリックした場合（Item数：上1／下2）
        img_imgc09_5-2.png
        img_imgc09_5-3.png


      • Show Navigation
        ナビゲーションボタンの有無を設定できます。
        img_imgc09_0.png
        img_imgc09_6-1.png

      • Border
        画像に枠線を付けるかを設定できます。
        img_imgc09_0.png
        img_imgc09_7-1.png

      • Image lightbox
        画像をクリックした時にライトボックス（画像のみ拡大表示するウィンドウ）が画面上に表示されるかどうか設定できます。
        img_imgc09_8-1.png

      • その他
        画面サイズに応じて表示状態を変えたり、CSSのIDやClassを設定したりできます。

  5. 画像数分、手順4を繰り返します。
  6. 「SAVE」をクリックします。
  7. Image Carouselが設定できました。
    img_imgf14.png

 

b_simple_122_2M.png



 Sliderによる追加方法

設定したスライドを順々に切り替えて表示させたい時は本Elementを使用します。
各スライドには画像または動画をひとつまで設定できます。

  1. Sliderを追加したいColumn内の「+Element」をクリックします。
    img_imgf00.png

  2. Select Element画面が表示されるので、「Slider」をクリックします。
    img_imgs01.png

  3. Slider画面が表示されます。
    img_imgs02.png

  4. 画像・動画や全体の設定を行います。

    • 【左側】Add / Edit Itemsエリア
      こちらでは、各画像について設定できます。
      img_imgs03-a.png

      • 追加／設定方法
        1. 「＋Slide」をクリックして項目を追加します。
          img_imgs04.png

        2. img_imgcico01.pngをクリックするとSlide画面が表示されます。
          img_imgs05.png



        3. Slide Typeでスライドの種類を「Image」「Video」のどちらか選択します。選択した項目に応じてSlide Type以下の項目が切り替わります。

          • Imageの場合（スライド種類：画像）
            「Image」と「Full Image Link or External Link」が表示されます。
            img_imgc06.png

            • Image
              「Upload Image」をクリックして画像を選択し、画像を設定します。設定方法はImage Frameの表示される画像を選択する時と同じです。

            • Full Image Link or External Link
              画像をクリックした時のリンク先を設定できます。



          • Videoの場合（スライド種類：動画）
            「Video Element or Video Embed Code」が表示されます。
            img_imgs07.png
            1. [ Add YouTube Video ]または [ Add Vimeo Video ]をクリックします。
              ※ここでは[ Add YouTube Video ]をクリックした場合を例に説明します
              img_imgs08.png

            2. Yotube画面に切り替わるので、動画の設定を行います。
              img_imgs09.png

            3. 「INSERT」をクリックします。

            4. Video Element or Video Embed Codeにコードが入力された状態でSlide画面に切り替わります。
              img_imgs10.png

        4. 「SAVE」をクリックします。
        5. 設定した内容の画像または動画が項目のひとつとして追加されたことが確認できます。


      • 複製
        • img_imgcico02.pngをクリックすると選択した項目を複製できます。
          img_imgs11_1-1.png→img_imgs11_1-2.png


      • 削除
        • img_imgcico03.pngをクリックすると選択した項目を削除できます。
          img_imgs11_2-1.png→img_imgs11_2-2.png


      • 並び替え
        • 項目にカーソルを合わせるとカーソルがに変わるので、その状態で項目をドラッグ＆ドロップするとドロップ先に順番を入れ替えることができます。
          img_imgs11_3-1.png→img_imgs11_3-2.png→img_imgs11_3-3.png


    • 【右側】Picture Sizeのエリア
      こちらでは、スライド表示エリア全体に関する設定を実施できます。
      img_imgs03-b.png

      • Hover Type
        画像・動画にマウスカーソルを合わせた時の挙動をNone、Zoom In、Zoom Out、Lift Upから選択できます。

        None（挙動なし）
        img_imgs12_1-1.png→img_imgs12_1-2.png

        Zoom in（カーソルを合わせると大きくなる）
        img_imgs12_1-3.png→img_imgs12_1-4.png

        Zoom Out（カーソルを合わせると小さくなる）
        img_imgs12_1-5.png→img_imgs12_1-6.png

        Lift Up（カーソルを合わせると浮き上がって表示される）
        img_imgs12_1-7.png→img_imgs12_1-8.png


      • Image Size Dimensions
        画像・動画の大きさをを縦横それぞれ設定できます。

      • その他
        画面サイズに応じて表示状態を変えたり、CSSのIDやClassを設定したりできます。


  5. 画像数分、手順4を繰り返します。
  6. 「SAVE」をクリックします。
  7. Sliderが設定できました。
    img_imgs13.png
    　　　　

 


 

 

関連記事

コメント

0件のコメント

記事コメントは受け付けていません。

Powered by Zendesk