Webサイトを作っていて、「配置する画像がどれも四角ばかりで、なんだかデザインが単調だな…」と感じたことはありませんか？
少しおしゃれなサイトで見かけるような、アメーバのような形や、正円に画像を切り抜く作業。昔はPhotoshopなどのソフトでわざわざ加工してからアップロードする必要がありました。
しかしElementorなら、マスク機能を使うことで、アップロードした四角い画像をElementorの画面上だけで一瞬にして好きな形に切り抜くことができます！
今回は、サイトに柔らかさや遊び心をプラスできる「マスク機能」の使い方を解説します。
マスク機能とは？
マスクとは、画像の上に型抜きのフィルターを重ねて、指定した形に切り取って見せる機能のことです。
Elementorには、あらかじめいくつかの型が用意されており、スイッチを一つ入れるだけで画像がおしゃれな形に生まれ変わります。元の画像データ自体を切り刻んでいるわけではないので、いつでも元の四角い形に戻せるのも安心なポイントです。
マスクの設定手順
それでは、実際に画像を切り抜いてみましょう。
⚫︎ 基本の設定手順
-
切り抜きたい画像ウィジェットを選択します。
-
左側のパネルの [ 高度な設定 ] タブを開きます。
-
下の方にある「マスク 」という項目をクリックして開きます。
-
マスクのスイッチをオンにします。
これだけで、画像が初期設定の形（通常は円形）に切り抜かれます！
好きな形を選ぶ
マスクをオンにすると、形の詳細を設定するメニューが表示されます。
⚫︎ 形状 (Shape)：ここから切り抜く形を選びます。よく使うおすすめは以下の通りです。
・円 (Circle)：プロフィール画像や、アイコン風に見せたい時に。
・花 (Flower) / スケッチ (Sketch)：柔らかく、親しみやすい雰囲気を出したい時に。
・Blob（ブロブ / アメーバ状）：最近のトレンド。少し崩れた有機的な形で、モダンでおしゃれなサイトにピッタリです。
⚫︎ サイズ (Size)：「フィット（Fit）」「塗りつぶし（Fill）」「カスタム（Custom）」から選べます。基本は画像全体を覆うフィット（Fit）にしておけば綺麗に切り抜かれます。
⚫︎ 位置 (Position)：型抜きの位置を調整できます。中央/中央 (Center Center) にするのが一番バランスが良いです。
【応用編】オリジナルの形に切り抜くことも可能
Elementorに用意されている形の中に好みのものがない場合は、形状のプルダウンから「カスタム (Custom)」を選ぶことができます。
ここに、自分で用意した希望の画像やアイコンデータなどをアップロードすれば、星型でも、ハート型でも、会社のロゴの形でも、完全にオリジナルの形に画像を切り抜くことが可能です。 デザインの幅が無限に広がるので、慣れてきたらぜひ試してみてください。
まとめ
-
画像を好きな形に切り抜くには高度な設定 ＞ マスクをオンにする。
-
Photoshopなどの外部ソフトでの加工は不要。
- 意図する形のマスクになるようにサイズ調整は必須。
マスク機能を使うだけで、「ただ画像を貼っただけ」の素人っぽさが抜け、一気にデザイナーが作ったようなサイトに近づきます。ぜひ色々な画像を切り抜いて遊んでみてください！
