画像キャプション原文

Produced by C-takeC-take

画像用CSS

[[module css]]
.scp-image-block {
float: none;
clear: none;
border: solid 1px #666;
box-shadow: 0 1px 6px rgba(0,0,0,.25);
width: 300px;
}

.scp-image-block.block-right {
float: right;
clear: right;
margin: 0 2em 1em 2em;
}

.scp-image-block.block-left {
float: left;
clear: left;
margin: 0 2em 1em 0;
}

.scp-image-block.block-center {
margin-right: auto;
margin-left: auto;
}
[[/module]]

画像構文原文

[[div class="scp-image-block block-right" style="width:width;"]]
[[image imageURL style="width:width;" link=#]]
[[div class="scp-image-caption" style="width:width;"]]
caption
[[/div]]
[[/div]]

サンプル

20130802032555c16.jpg

画像原文、色々な構文を突っ込めます。改行可能
注釈も1


画像を右寄せし、かつキャプションを付けます。原文を使うとキャプション内に様々な構文をつける事が可能になる。htmlブロックもつける事ができます。

内容としてはfloat:right指定したdiv要素の中にdiv要素と同じ幅の画像を挿入しています。

サンプルのソースコード:

[[div class="scp-image-block block-right" style="width:300px;"]]
[[image 20130802032555c16.jpg style="width:300px;" link=#]]
[[div class="scp-image-caption" style="width:300px;"]]
画像原文、色々な構文を突っ込めます。改行可能
注釈も[[footnote]] この通り [[/footnote]]
[[/div]]
[[/div]]

scp-image-captionのCSS(sigma9に標準搭載)

.scp-image-block .scp-image-caption {
background-color: #eee;
border-top: solid 1px #666;
padding: 2px 0;
font-size: 80%;
font-weight: bold;
text-align: center;
width: 300px;
}
.scp-image-block > p {
margin: 0;
}
.scp-image-block .scp-image-caption > p {
margin: 0;
padding: 0 10px;
}

インクルード文初期値

[[include component:image-block-base name={$name}|caption={$caption}|width={$width}|width=300px|link={$link}|link=#|align={$align}|align=right]]

特に指定がない限り、このサイトのコンテンツには次のライセンスが適用されます: Creative Commons Attribution-ShareAlike 3.0 License