Laby-Lab

マケン姫っ！ 姫神コダマ
　　のびのび水着ぺたんこVer. 完成品フィギュア[キャラアニ]《０７月予約》

　キャラアニから姫神こだまのフィギュアが登場です。
　正直、アニメもキャラクターもそれほど好きではないので、写真を見ただけでは全然食指が動きませんでした。「ぺたんこVer.」の表記が無ければ詳細ページを開くことも無かったでしょう。

　が、いくつか写真を見ると水着がすごい事に。どうやら伸びる素材のようで、通常のキャストオフとは違った着せ替え感が楽しめること請負です。

　ちなみに（←）は名前も覚えてないけど、メインヒロインの天谷春恋。わたくし、ウシ乳には興味ありません。
　こちらの水着ものびのびで、水着の差し替えが可能です。

　差し替え後の水着のダボダボ感が妙にリアルでしたw（写真は通販サイトでご確認を）

　布面積の多いものは難しそうだからどうしても露出が多くなるが残念。衣装パーツの組み合わせとかでもっと多彩な着せ替えが可能になると面白いのに。
　のびーる素材の今後に超期待！

のびーる水着でトリミング練習

<img style="position:absolute;clip:rect(29px 326px 529px 76px);margin:-29px 0 0 -76px;width:400px;" border="0" alt="" src="http://img.amiami.jp/images/product/review/121/FIG-MOE-5383_03.jpg"></a><img style="position:absolute;clip:rect(124px 385px 369px 145px);margin:-124px 0 0 115px;width:533px;" border="0" alt="" src="http://img.amiami.jp/images/product/review/121/FIG-MOE-5383_03.jpg"></a><img style="position:absolute;clip:rect(124px 385px 369px 145px);margin:131px 0 0px 115px;width:533px;" border="0" alt="" src="http://img.amiami.jp/images/product/review/121/FIG-MOE-5383_04.jpg"><p style="margin-top:510px;">　キャラアニから姫神こだま（マケン姫っ！）のフィギュアが出ます。

　色分けをした順に左画像、右上画像、右下画像、テキスト。
　styleの内容については藤和エリオでトリミング練習を参照。

　本テキストはその補足記事。

　position:absolute　は絶対座標指示。相対的な座標指定も可能。
　clip:rect( y0　x1　y1　x0 )　はトリミングする左上座標( x0 , y0 ) と右下座標( x1 , y1 ) を指定。
　margin: y 0 0 x　でトリミングした画像の左上座標を元画像の左上座標に移動させます。この時の( x , y )をオフセットと言います。

　2番目の画像は最初の画像の右に10 ピクセル隙間を空けて表示したいので、トリミング開始位置とオフセットにズレが生じます。
　最初の画像では x = x0 , y = y0 でしたが、今回は最初の画像の横サイズ＋10 をオフセット指定します。

　最初の画像の横サイズは x1 - x0 = 250 なので、本来のオフセット値 -145 と間隔 10 を加えて、x には 115 (　x = 250 -145 + 10 = 115 ) を指定します。

　3番目の画像も同様、2番目の画像の下に間隔を 10 空けて配置しています。

　画像のトリミングで絶対座標を指定すると、次に来るテキストは画像の開始位置 ( 0 , 0 ) から始まってしまい、画像の下に隠れてしまいます。それどころか、実際に投稿されたページでは、以前の記事に画像が被さってしまう事も考えられます。

　ここでは左画像の縦サイズを500になるようトリミングしているので、段落タグ<p>で段落の上側に510 ピクセルのマージンを取っています。
　これで画像から10 ピクセル離してテキストが始まることになります。テキストを続けない場合でも段落タグで画像サイズ分のマージンをとるようにしましょう。

　ちなみに最後の段落タグまでの間に改行が入ると改行した分だけ下にずれ込むので、僕は改行しないようにしています。記事編集ページ、記事確認ページ、実際のブログでは実際の表示にすれがある場合もあるので、改行はしない方が無難だと思います。