画像 | 基本機能

画像

クリックでの拡大設定も可能な画像を設置できます。
画像にはリンク付、サイズ変更、回転、クリック拡大、代替テキストなども設定できます。

表示サイズに合わせた自動書き出しでRetinaディスプレイにも対応します。

(元画像のサイズが最大値となるため、最大値が足りない場合は対応ができません)

  1. <div id="cc-m-xxxxxxxxxx" class="j-module n j-imageSubtitle ">
  2.   <figure class="cc-imagewrapper cc-m-image-align-3">
  3.     <img
    srcset="https://image.jimcdn.com/app/cms/image/transf/dimension=320x10000:format=png/path/xxxxxxxxxx/image/xxxxxxxxxx/version/xxxxxxxxxx/xxxx.png 320w,
    https://image.jimcdn.com/app/cms/image/transf/dimension=640x10000:format=png/path/xxxxxxxxxx/image/xxxxxxxxxx/version/xxxxxxxxxx/xxxx.png 640w,
    https://image.jimcdn.com/app/cms/image/transf/none/path/xxxxxxxxxx/image/xxxxxxxxxx/version/xxxxxxxxxx/xxxx.png 854w"
    sizes="(min-width: 854px) 854px, 100vw" id="cc-m-imagesubtitle-image-xxxxxxxxxx" src="https://image.jimcdn.com/app/cms/image/transf/none/path/xxxxxxxxxx/image/xxxxxxxxxx/version/xxxxxxxxxx/xxxx.png"
    alt="" class="" data-src-width="854" data-src-height="373" data-src="https://image.jimcdn.com/app/cms/image/transf/none/path/xxxxxxxxxx/image/xxxxxxxxxx/version/xxxxxxxxxx/xxxx.png"
    data-image-id="xxxxxxxxxx">
  4.   </figure>
  5.   <div class="cc-clear"></div>
  6. </div>