画像
|
名前 |
BASICIMAGE01 |
|
|---|---|---|
|
パーツバージョン |
1.0.0～1.1.2 |
|
|
GCバージョン |
1.1.0～ |
|
|
パーツアイコン |
 |
|
|
要旨 |
選択したHTML断片中に含まれるA要素・IMG要素を取り出し出力します。 下記オプションを指定することにより、横幅・高さの属性値設定と、画像クリッピング変換の指示パラメータを付加します。 |
|
|
入出力仕様 |
IMG要素を１つ以上含む領域を選択します。画像に付いたリンクも出力したい場合はIMG要素そのものでなくA要素を含む上位の領域を選択してください。 |
|
|
オプション |
幅（任意） |
画像（IMG要素）の横幅を指定します。当オプションを指定し且つheight属性が無指定の場合は、画像リソースの縦横比を変えないようheight属性を削除します。 |
|
高さ（任意） |
画像（IMG要素）の高さを指定します。当オプションを指定し且つwidth属性が無指定の場合は、画像リソースの縦横比を変えないようwidth属性を削除します。 |
|
|
幅・高さの単位（必須） |
以下の２種類から選択します。 ► px：ピクセル指定 ► %：百分率指定 |
|
|
クリップ開始点X座標（任意） |
クリッピング領域対角線の開始点X座標の値を入力します。 ※クリッピング画像変換を行う場合は必ず指定してください。 |
|
|
クリップ開始点Y座標（任意） |
クリッピング領域対角線の開始点、Y座標の値を入力します。 ※クリッピング画像変換を行う場合は必ず指定してください。 |
|
|
クリップ終端点X座標（任意） |
クリッピング領域対角線の終端点、X座標の値を入力します。 ※クリッピング画像変換を行う場合は必ず指定してください。 |
|
|
クリップ終端点Y座標（任意） |
クリッピング領域対角線の終端点、Y座標の値を入力します。 ※クリッピング画像変換を行う場合は必ず指定してください。 |
|
|
元画像の幅・高さ指定 ※パーツバージョン1.1.0以上で使用可 |
IMG要素からwidth属性、height属性を削除するかどうかを指定するオプションです。「width属性値」「height属性値」オプションが指定されている場合は、width・heightが設定されます。 以下の２種類から選択します。 ► 削除しない（デフォルト） ► 削除する |
|
|
ビューの種類 |
1行横並び表示 ※パーツバージョン1.0.0での名称は「１行テキスト表示」 |
IMG要素（およびA要素）をインラインに並べて出力します。 出力HTMLの外枠にDIV要素が配置されます。 |
|
ビュー編集 |
なし |
|
|
プリプロセス |
なし |
|
|
関連CSSセレクタ |
.BASICIMAGE01（クラスセレクタ） |
|
| 対応jQueryバージョン |
なし |
|
| 使用jQueryプラグイン |
なし |
|
サンプル
|
入力HTML例 |
<div class="samples">
<table>
<tr>
<td>
<a href="#BASICIMAGE01"><img src="img/picture01.jpg" alt=""></a><br>
<div>
ゼラニウム</div><a href="#">アルバム</a>
<br>
</td>
<td>
<a href="#BASICIMAGE01"><img src="img/picture02.jpg" alt="" border="0"></a><br>
<div>
ブルーレースフラワー
</div>
<a href="#BASICIMAGE01">アルバム</a>
<br>
</td>
<td>
<a href="#BASICIMAGE01"><img src="img/picture03.jpg" alt="" border="0"></a><br>
<div>
ラナンキュラス
</div>
<a href="#BASICIMAGE01">アルバム</a>
<br>
</td>
</tr>
<tr>
<td>
<a href="#BASICIMAGE01"><img src="img/picture04.jpg" alt="" border="0"></a><br>
<div>
シャクナゲ
</div>
<a href="#BASICIMAGE01">アルバム</a>
<br>
</td>
<td>
<a href="#BASICIMAGE01"><img src="img/picture05.jpg" alt=""></a><br>
<div>
ワトソニア
</div>
<a href="#BASICIMAGE01">アルバム</a>
<br>
</td>
<td>
<a href="#BASICIMAGE01"><img src="img/picture06.jpg"></a><br>
<div>
カーネーション
</div>
<a href="#BASICIMAGE01">アルバム</a>
<br>
</td>
</tr>
</table>
</div>
|
|
|---|---|---|
|
出力HTML例 |
<div class="BASICIMAGE01">
<a href="#BASICIMAGE01">
<img src="img/picture01.jpg" alt="">
</a>
<a href="#BASICIMAGE01">
<img border="0" src="img/picture02.jpg" alt="">
</a>
<a href="#BASICIMAGE01">
<img border="0" src="img/picture03.jpg" alt="">
</a>
<a href="#BASICIMAGE01">
<img border="0" src="img/picture04.jpg" alt="">
</a>
<a href="#BASICIMAGE01">
<img src="img/picture05.jpg" alt="">
</a>
<a href="#BASICIMAGE01">
<img src="img/picture06.jpg">
</a>
</div>
|
|
