Google chrome（グーグル ク...
続きを読む
Figmaを使って、Wordpressの人気ページビルダーツール「elementor」で使える区切りの作り方を紹介します。
elementorには、無料版でも使える「区切り」ウィジェットがありますが、その種類には限りがあります。Figmaを使って、好きなアイコンを並べた画像を作り、それを区切りとして使う方法です。
（あくまでも見た目を可愛くするための荒技です。）
⇧のような、好きなアイコンで、サイトの区切りを作ることができます！
まず、区切りとして使いたいアイコンをダウンロードします。
今回は、Flaticonというサイトからアイコンをダウンロードします。
今回は猫のアイコンで区切りを作りたいので、「cat」と検索します。
20000以上の猫のアイコンから、好きなものを選びます。
区切りで使いたいアイコンを選んだら、PNG形式でダウンロードします。
右側の「Free download」をクリックすると、自動的にダウンロードが始まります。
ダウンロードした画像を、Figmaで開きます。
エクスプローラーまたはFinderからドラッグ＆ドロップ、もしくはコピー＆ペーストどちらでも貼り付けできます。
画像を貼り付けたら、区切りとして使う画像の枠を作ります。
左上の「井」のようなマークを選択し、「Frame」をクリックします。
区切り用の画像を作るので、細長いフレーム（枠）を作ります。細長ければサイズは適当で大丈夫ですが、今回は2048×65で作成します。
「Frame１」を選択した状態だと、画面の右側に上のようなサイズ設定できる画面が表示されるので、「W (=幅)」と、「H (=高さ)」を調整することもできます。
枠のサイズに合わせて、アイコンのサイズを調整します。
最初のアイコンを選択した状態で、「Control+D」または、「Command+D」を押した後に、適当な間隔を開けてアイコンをドラッグします。
その後にショートカットキー「Control+D」または、「Command+D」を使って、アイコンを複製します。自動的に1個目と2個目の間隔で、アイコンが複製されていきます。
アイコンを枠いっぱいになるまで複製したら、枠の中の背景を透明にします。
「Frame1」を選択した状態で、画面右側のパネルの「Fill」を選択します。
「Hex」の列の一番右の数値を「0%」にすると、背景が透過されます。
画面右下の「Export」で、画像をダウンロードします。
PNG形式またはJPEG形式で、「Export Frame1」をクリックします。
わかりやすい名前をつけて、画像を保存します。
画像をダウンロードしたら、elementorに挿入します。
挿入の方法は、通常の画像を挿入する方法と同じです。
セクション（またはコンテナ）を追加、もしくは「＋」ボタンをクリックします。
ウィジェットから、画像を選択、もしくはドラッグ＆ドロップします。
先ほど作成した「区切り画像」をアップロードします。
サイズは「Large」か「フル」どちらでも大丈夫です。
可愛い猫のアイコンで区切りを作ることができました！
ぜひ参考にしてみてください。
2025-03-22
Saturday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ＆デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome（グーグル ク...
続きを読む
WEBマーケティングスクールを検討されて...
続きを読む
