1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. iWebの図形の使い方

iWebの図形の使い方

iWebでは、四角や丸、三角、星など様々な図形をページ上に配置する事が出来ます。 配置した図形は、大きさや色などを変えたりする事はもちろん、写真を切り抜くマスク […]

  • 2016/5/2
  • 2008/4/27

iWebでは、四角や丸、三角、星など様々な図形をページ上に配置する事が出来ます。

配置した図形は、大きさや色などを変えたりする事はもちろん、写真を切り抜くマスクとしても使う事が出来ますので、ページをにぎやかにする為に効果的なツールです。

図形はHTMLとして出力した際には、png画像として「ページ名_files」フォルダに出力されます。

図形を配置する

ツールバーの「図形」ボタンをクリックして、表示されるリストから配置したい図形を選択します。すると、選択した図形がWebページキャンパスに配置されます。
配置した図形の周りにある四角を動かすと、図形の大きさを変える事ができます。

また図形を選択して、インスペクタ【グラフィック】を使って図形の色や、周囲の線の種類などを変更する事ができます。

iWebで配置できる図形は下の写真のように14種類もあります。
それぞれ大きさや上下左右の比率などを変えられますので、最も良い形に自由に変形させることができます。

iWebで利用できる図形の一覧

図形を写真のマスクに使うには

図形は、右のようにページに配置した写真などを、その図形の形に切り取る「マスク」として使う事が出来ますので、写真の表情を変えてページをにぎやかにする事ができます。

また、実際には切り取っている訳ではありませんので、配置した後に図形の大きさを変えたり、写真の大きさを変えたり自由に編集することができます。

写真などにマスクを設定する方法

ページに配置した写真を選択して、メニューバーにある「フォーマット」から「図形でマスク」を選び、マスクする図形を選択します。
これで写真を図形でマスクする事ができます。

図形をマスクするメニューの場所

マスクの調整をする方法

マスクした写真を選択するとスライダが表示されますので、スライダをドラッグする事で、写真の大きさを調整する事ができます。
マスクした図形の大きさや配置を調整したい時は、「マスクを編集」ボタンをクリックします。

マスクを編集ウィンドウを表示させたところ

すると、マスクされた見えない部分の写真が半透明で表示されます。この状態で周囲の四角い点をドラッグして、マスクの大きさなどを調整します。

マスク編集ウィンドウのスライダーを動かしたところ

「役にたった」と思ったらシェアお願いします