操作フロー
【使用方法】
1) 使用タグをコピーします。
2) 文中の「●●」部分を適宜変更してください。
実際にHTML上でどのように入れているかは、「表示」項目のタグで確認してください。
3) CSSに関しては、CSSに追記後、それぞれCSS名などで追加テーマを作成しておきます。
サイト設定で該当するCSSを「サイト管理」⇒「追加テーマ」で設定して試してみてください。
タグ・CSSいろいろサンプルDB
タイトル
クリックで画像拡大するタグ(同画面上)
<p><img src="/tmp/file/●●" class="img-fluid" alt="ファイルの名前等" data-toggle="modal" data-target="#image-modal01" width="200" /></p>
<div class="modal fade" id="image-modal01">
<div class="modal-dialog">
<div class="modal-body"><img src="/tmp/file/●●" alt="ファイルの名前等" width="600" /></div>
</div>
</div>
<div class="modal fade" id="image-modal01">
<div class="modal-dialog">
<div class="modal-body"><img src="/tmp/file/●●" alt="ファイルの名前等" width="600" /></div>
</div>
</div>
使用箇所/プラグイン
固定記事, ブログ, デーダベース, 掲示板
その他の使用箇所
キーワード
画像,拡大
カテゴリ
HTML
その他連絡事項
●●の部分は、ファイル番号。同じものを指定する。
widthの所(width="200"、width="600")の値を変えると、画像のサイズが変わるので、お好きな値に設定。
上記タグの中の「image-modal01」の末尾の数字を変えれば、1ページの中で複数の拡大画像が配置可能。
NetCommons3,Connect-CMS等の、Bootstrapを利用している場合のみ、利用可