画像や、レイアウトイメージを表示するブロックです。 入力したデータはIMGタグなどに変換されて公開されます
<div class="cms-img default " style="">
<img src="" class="cms_mock_image " style="" alt="" data-src="width:200,height:140">
</div>
ファイル一覧から画像を選択して表示するほか、ダミー画像の設定や、キャプションの設定。画像のサイズ指定、拡大クリックなど、ひととおりの設定ができます。
バージョン4からは、レイアウトモードが加わり、画像トリミングやテキスト挿入などのレイアウトができるよになりました。
シンプルモード | 画像選択画面です。 |
---|---|
レイアウトモード | レイアウト編集ウィンドウをひらきます。 |
共通設定 | シンプルモード、レイアウトモード、共通の設定をおこないます。 |
ファイルマネージャから画層を選択したり、画像パスを入力し、IMGタグを生成します。アタリ用のダミー画像も指定することができます。
CMSバージョン4から追加された機能です。 シンプルモードでは、単純に画像を配置するだけでしたが、レイアウトモードであれば、カンバス上で、テキストや画像、図などを配置し、レイアウトできます。
以下のように、汎用的に利用できます。
アタリ用のダミー画像を指定することができます。
サイズや、色の指定、文字なども入力できるので、汎用的に利用できます。
画像ブロック追加時は、デフォルト値として、ダミー画像が設定されています。
<div class="cms-img default " style="">
<img src="" class="cms_mock_image " style="" alt="" data-src="width:200,height:140">
</div>
※公開ページで開いたときに、ダミーイメージの画像(base64)が生成されます。
ファイルマネージャにて、画像を選択できます。
ファイルマネージャでは、手持ちの画像をアップロードすることができます。
<div class="cms-img default " style="">
<img src="../images/IMG_0509.jpg" style="" alt="">
</div>
※共通設定で、幅指定や高さ指定などを加える場合のため、DIVタグでラップしています。
通常はDIVでラップしたIMGタグが生成されますが、チェックをいれると、IMGタグのみ出力されます。
<img src="../images/IMG_0509.jpg" style="" alt="">
※CMS上では、特別な効果はありませんが、カスタマイズ時にIMGタグの細かい調整をする用途を想定しています。
レイアウトモードを選択し、ボタンをクリックすると、レイアウト編集ウィンドウが開きます。
詳しいレイアウト編集ウィンドウの使い方は、以下のページで確認ください。
上記のようなイメージを作成した場合は、以下のようなコードが生成されます。
単一の画像が生成されるわけではなく、画像や図形のレイアウトが生成されます。
<div class="cms-img " style="">
<div class="cms-img-layout" style="display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAABCAYAAAACeNDKAAAAIklEQVRIS2NkGAWjITAaAqMhMBoCoyEwGgKjITAaAlQNAQASwgACWSqX/gAAAABJRU5ErkJggg=="class="cms-img-width" style="display:block;">
<div class="cms-img-height" style="margin-top:-1px;padding-top:33.33%"></div>
<div style="position:absolute;top:-35%;left:-0.5%;width:101.18%;height:233.5%;opacity:100; "><img src="../images/IMG_0509.jpg?1478427676351" style="width:100%;"></div>
<div style="position:absolute;top:50%;left:-0.67%;width:101.83%;height:53%;background:#000;opacity:0.6; "></div>
<div style="position:absolute;top:4.5%;left:1.84%;width:22.13%;height:83%;opacity:100; "><img src="../images/DX004_.jpg?1478427676351" style="width:100%;"></div>
<div style="position:absolute;top:13.5%;left:27.74%;width:92.75%;height:34.5%;color:#ffffff;font-size:42px;line-height:1.2; ">HELLO WORLD</div>
<div style="position:absolute;top:58%;left:28.09%;width:53.83%;height:32.5%;color:#ffffff;font-size:14px;line-height:1.6; ">サンプルの文書ですので、ご注意ください。サンプルの文書ですので、ご注意ください。</div>
<div style="position:absolute;top:-40.5%;left:19.17%;width:30%;height:20%; "><svg style="position:absolute;top:0;left:0;width:100%;height:100%;fill:#000;" width="100%" height="100%" viewBox="0 0 30 20"><path d="M 0 5 L 0 15 L 30 15 L 30 5 L 0 5 Z " /></svg></div>
<div style="position:absolute;top:0%;left:0%;width:30%;height:20%;background:#000; "></div>
</div>
</div>
幅 | 無指定の場合は、実際のイメージ幅で表示されるので、強制的に幅を指定したい場合に設定します。ピクセル指定のほか%指定もでき、スマホ対応にする場合は、100%などにします。 |
---|---|
比率 | 画像の高さを比率で指定します。横☓縦の比率で入力します。 例えば、3:2と指定した場合、画像幅が300pxだったら、高さは200pxにトリミングされ表示されます。トリミングされた場合は、IMGタグではなく、CSS背景画像で指定されて出力されます。 |
クリック で拡大 |
クリックで、拡大モーダル表示にすることができます。 サムネイルサイズで画像を表示し、クリックで原寸表示するといったことが、簡単に行えます。 なお、あくまで機能なので、細かい調整は行えません。 |
ALT | IMGタグにALT属性を指定します。 |
注釈 | 画像下にキャプションを表示します。 |
リンク | 画像に対して、リンク設定を行います。 |
<div class="cms-img default " style="">
<img src="../images/sample.jpg" style="" alt="">
</div>
<div class="cms-img default " style="width:200px; ">
<img src="../images/sample.jpg" style="width:100%;" alt="">
</div>
<div class="cms-img default " style="width:200px; ">
<div style="background:url(../images/sample.jpg) center center;background-size: cover;width:100%;" alt="">
<div style="padding-top:25%"></div>
</div>
</div>
※この場合、背景画像になるのでALT指定は無効になります。
画像や、レイアウトイメージを表示するブロックです。 入力したデータはIMGタグなどに変換されて公開されます
<ul class="cms-images clearfix floats default">
<li style="width:150px;margin:0 10px 10px 0;"><img src="" class="cms_mock_image " style="width:100%;" alt="" data-src="width:150,height:100"></li>
<li style="width:150px;margin:0 10px 10px 0;"><img src="" class="cms_mock_image " style="width:100%;" alt="" data-src="width:150,height:100"></li>
<li style="width:150px;margin:0 10px 10px 0;"><img src="" class="cms_mock_image " style="width:100%;" alt="" data-src="width:150,height:100"></li>
<li style="width:150px;margin:0 10px 10px 0;"><img src="" class="cms_mock_image " style="width:100%;" alt="" data-src="width:150,height:100"></li>
</ul>
イメージリストを表示するブロックです。 入力したデータはIMGタグのリストに変換されて公開されます。
「データの編集」ボタンをクリックすると、編集画面が表示されます。
リストで入力する以外は、ひととおり、イメージブロックの仕様と同じです。
公開 | チェックしている行を公開します。 |
---|---|
画像 | イメージブロックを指定します。 |
ALT | ALT(代替テキスト)を出力します。 |
キャプション | テキストを入力した場合、画像下のキャプションとして表示されます。 |
クリックして画像を拡大する | チェックすると、画像クリック時に、拡大表示(モーダル)するようになります。 |
リンク | 画像に対して、リンクを設定できます。 |
幅 | 個々のイメージの幅を指定します。 |
---|---|
マージン | 個々のイメージ間のマージンを指定します。 CSSスタイルのmarginの値になります。 |
横に並べる | チェックを入れると、横に並べます。チェックしない場合は、縦に並べます。 |
js-cms.jp