角丸四角形の角の丸みを調節する方法 / ウェブアートデザイナー

3月 03, 2010
BESTグループ

ウェブアートデザイナーで角丸四角形の角の丸みを調節する方法を教えてください。


ご質問にお答えします。

ホームページビルダー付属のウェブアートデザイナーで角丸四角形を作成すると、丸みのレベルを調節することができません。

図形を大きくすればするほど、丸みも大きくなってしまいます。

何か変更する方法はないかと考えていたところ、角の丸みを調節する方法を見つけたので、ご紹介したいと思います。

ウェブアートデザイナーの右側の「折れ線」というツールを今回使用します。(角丸四角形のツールは使いません)

まず、「折れ線」ツールを選択して、キャンバス上に四角形を描きます。

一回クリックしますと、線が延びますので、次のポイント、次のポイントとクリックして最後に開始位置でダブルクリックします。
大きさは適当で構いませんが、歪んだ四角形にならないよう注意しましょう。

※グリッドを表示して描くと、簡単に四角形を作成できます。

 上部メニュー「表示」→「グリッドの表示」

四角形ができたら、ダブルクリックして、図形の編集を表示します。

ここからがマル秘の方法です。

まず、「線」タブを表示しましょう。

線の「太さ」を「任意」に変更し、数字を自由に変更します。

そして、線の「接合形状」では、角が丸くなっているものを選びます。

そうしますと、太い角丸枠の四角形になります。

次に、「塗りつぶしの色」タブで、内側の色も線の色と同じ色にします。

これで完成です。

図形の横幅を変更しても、角の形が変形しませんし、線の「太さ」を変更することで丸みの調節が出来るようになりました。

※図形に細い枠線をつけたい場合

 図形を複製して、縦・横幅を2pxずつ大きくします。そして、枠の色を変更したら背面に配置することで細枠を表現できます。

No comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>