写真つき文章のHTMLとCSS
写真つき文章 【j-textWithImage】
<div id="cc-m-XXXXXXXXXX" class="n
j-textWithImage ">
■写真つき文章のクラス名
j-textWithImage
<figure class="cc-imagewrapper cc-m-image-align-1">
■figureのクラス名 ※写真の時と同じ？
cc-imagewrapper
cc-m-image-align-1
<img src="URL" alt="" class="" data-src-width="640" data-src-height="480"/>
※クラス名は指定できないので、写真つき文章のクラス名が必要。
※個別指定なら、画像についているID（ここでは簡略化で表示していない）を使用する。
</figure>
<div>
<div data-name="text" data-action="text" class="cc-m-textwithimage-inline-rte">
■文章枠のクラス名
cc-m-textwithimage-inline-rte
<p>写真つき文章</p></div>
</div>
html * div.n {
height: 1%;
}
div.n, div.flexmodul {
padding: 5px;
}
.j-textWithImage .cc-imagewrapper {
width: auto;
}
.cc-m-textwithimage .cc-m-image-align-1, .cc-m-textwithimage .imgleft, .j-textWithImage .cc-m-image-align-1, .j-textWithImage .imgleft {
display: inline;
float: left;
margin: 4px 20px 4px 0;
}
.j-textWithImage figure {
z-index: 1;
}
.cc-imagewrapper {
position: relative;
}
.cc-imagewrapper {
position: relative;
}
.cc-m-image-align-1, .cc-m-image-align-1 img {
float: left;
}
.cc-imagewrapper {
display: block;
height: auto !important;
margin: 0;
width: 100%;
}
.cc-imagewrapper, .cc-imagewrapper img, .cc-shop-product-img-confines img, select.cc-product-variant-selectbox {
max-width: 100%;
}
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
.cc-imagewrapper img {
display: block;
left: 0;
top: 0;
}
img {
display: block;
}
a img, img {
border: 0 none;
}