TOP /VML ワードアート応用編

<v:oval style="width:239; height:76;rotation:0;" 
strokecolor="#00ff80"strokeweight="2pt">
<v:stroke on="true" />
<v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%"focusposition="0,0" focussize="0,0" />
<v:shadow on="true" color="#cccccc"offset="4pt,3pt" />
<v:extrusion on="false"color="#cccccc"skewangle="135" Backdepth="4" skewamt="1" />
</v:oval>

上記円はVML(楕円を描く)で書き出した楕円です。

<v:shape style="width:300;height:50;rotation:0;"
o:spt="136"stroked="false"strokecolor="red"coordsize="21600,21600">
<v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%" />
<v:shadow on="false" color="#cccccc"offset="6pt,5pt" />
<v:extrusion on="true"color="#cccccc"skewangle="135" Backdepth="5" skewamt="1" />
<v:textpath style="font-family:'Arial Black';font-style:normal;font-weight:normal;" string="VML Word" />
<!--himajin.moo.jp--></v:shape>

上記文字はVML(ワードアート)で書き出した文字です。


ではこの2つを1つにまとめてみましょう。

<v:group style="width:100;height:100;"coordsize="100,100">

<v:oval style="width:239; height:76;rotation:0;" 
strokecolor="#00ff80"strokeweight="2pt">
<v:stroke on="true" />
<v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%"focusposition="0,0" focussize="0,0" />
<v:shadow on="true" color="#cccccc"offset="4pt,3pt" />
<v:extrusion on="false"color="#cccccc"skewangle="135" Backdepth="4" skewamt="1" />
</v:oval>

<v:shape style="width:300;height:50;rotation:0;"
o:spt="136"stroked="false"strokecolor="red"coordsize="21600,21600">
<v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%" />
<v:shadow on="false" color="#cccccc"offset="6pt,5pt" />
<v:extrusion on="true"color="#cccccc"skewangle="135" Backdepth="5" skewamt="1" />
<v:textpath style="font-family:'Arial Black';font-style:normal;font-weight:normal;" string="VML Word" />
<!--himajin.moo.jp--></v:shape>

</v:group>
赤い部分が追加された部分です。
これを調整します。

<v:group style="width:100;height:100;"coordsize="100,100">

<v:oval style="width:239; height:76;rotation:0;" 
strokecolor="#00ff80"strokeweight="2pt">
<v:stroke on="true" />
<v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%"focusposition="0,0" focussize="0,0" />
<v:shadow on="true" color="#cccccc"offset="4pt,3pt" />
<v:extrusion on="false"color="#cccccc"skewangle="135" Backdepth="4" skewamt="1" />
</v:oval>

<v:shape style="position:absolute;top:18;left:25;width:180;height:45;rotation:0;"
o:spt="136"stroked="false"strokecolor="red"coordsize="21600,21600">
<v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%" />
<v:shadow on="false" color="#cccccc"offset="6pt,5pt" />
<v:extrusion on="true"color="#cccccc"skewangle="135" Backdepth="5" skewamt="1" />
<v:textpath style="font-family:'Arial Black';font-style:normal;font-weight:normal;" string="VML Word" />
<!--himajin.moo.jp--></v:shape>

</v:group>
赤い部分が調整した部分です。(表示位置と大きさ)
最後にcoordsizeの設定をします。
<v:group style="width:239;height:76;"coordsize="239,76">

<v:oval style="width:239; height:76;rotation:0;" 
strokecolor="#00ff80"strokeweight="2pt">
<v:stroke on="true" />
<v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%"focusposition="0,0" focussize="0,0" />
<v:shadow on="true" color="#cccccc"offset="4pt,3pt" />
<v:extrusion on="false"color="#cccccc"skewangle="135" Backdepth="4" skewamt="1" />
</v:oval>

<v:shape style="position:absolute;top:18;left:25;width:180;height:45;rotation:0;"
o:spt="136"stroked="false"strokecolor="red"coordsize="21600,21600">
<v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%" />
<v:shadow on="false" color="#cccccc"offset="6pt,5pt" />
<v:extrusion on="true"color="#cccccc"skewangle="135" Backdepth="5" skewamt="1" />
<v:textpath style="font-family:'Arial Black';font-style:normal;font-weight:normal;" string="VML Word" />
<!--himajin.moo.jp--></v:shape>

</v:group>
groupのサイズとcoordsizeを内部のサイズに合わせます。(赤と青の部分)
これでgroupサイズをpx単位で変更すれば内部全ての大きさを変更できます。
- 例 -
<v:group style="width:300;height:100;"coordsize="239,76">

<v:oval style="width:239; height:76;rotation:0;" 
strokecolor="#00ff80"strokeweight="2pt">
<v:stroke on="true" />
<v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%"focusposition="0,0" focussize="0,0" />
<v:shadow on="true" color="#cccccc"offset="4pt,3pt" />
<v:extrusion on="false"color="#cccccc"skewangle="135" Backdepth="4" skewamt="1" />
</v:oval>

<v:shape style="position:absolute;top:18;left:25;width:180;height:45;rotation:0;"
o:spt="136"stroked="false"strokecolor="red"coordsize="21600,21600">
<v:fill type="gradient"opacity="100%"color="blue"color2="aqua"angle="0"focus="0%" />
<v:shadow on="false" color="#cccccc"offset="6pt,5pt" />
<v:extrusion on="true"color="#cccccc"skewangle="135" Backdepth="5" skewamt="1" />
<v:textpath style="font-family:'Arial Black';font-style:normal;font-weight:normal;" string="VML Word" />
<!--himajin.moo.jp--></v:shape>

</v:group>