テキストと画像の挿入(画像の左右配置、画像の中にテキスト)
1.画像を左(又は右)に入れて、テキストをその横に入れる
画像は挿入時、左寄せで挿入し、テキストは記述時、ツールボタンの左寄せでいれて、双方うまく入っている。この後、次の項目に移りたいので、ここで改行しても、そのまま右に入ってします。
ここから次に画像の下から記述したいのだが!
このようになってしまう。
筆者は、最後に以下のよソースコードを入れ対応しているが、お知らせ本文域で対応する方法はあるのだろうか。
Souce Code
<div style="clear:both;"></div>
尚、注意点は、このコードを入れた後、本文編集で画像やテキストを入れると、Souce Codeの divタグ の中に入ってしまう。ソース編集で、pタグなどを入れておくと良い。
2.画像の中にテキストと別画像を入れる
NetCommons3
☆ テキストは、NetCommons3
☆ 中の画像は、マウス・ホバー・マーク
作成方法
1.ボックスを作成
style を position:relative;
2.ボックスの中に
テキストと入れ子画像を挿入。
2つとも、position:absolute;に。
2つの挿入位置を指定。
例:top:50px; right:20%;
Source Code
<div style="float: left; position: relative;">
<p><img class="img-responsive nc3-img pull-right" title="" src="https://www.nc.k-nagai.com/nc/wysiwyg/image/download/1/8/small" alt="" width="394" height="262" /></p>
<p><img class="img-responsive nc3-img center-block" style="position: absolute; top: 50px; left: 20%;" title="マウス・ホバー" src="https://www.nc.k-nagai.com/nc/wysiwyg/image/download/1/49" alt="マウス・ホバー" /></p>
<p style="position: absolute; top: 30px; left: 5%; color: #ff0000; font-weight: bold; font-size: 1.5em;">NetCommons3</p>
</div>