スマホで見ると文字がデカい！を解決するレスポンシブなフォントサイズ調整（px・rem・vwの違い）
PCでElementorの編集をしている時、見出しをかっこよく大きめに設定したとします。 しかし、いざスマホで確認してみると、「文字が巨大すぎて画面からはみ出している」「変なところで改行されて読みにくい」といった経験はあ […]
超簡単！サイト全体に「トップへ戻るボタン」を設置するScroll to Top機能（※HappyAddons）
縦に長いLPやブログ記事を読んだ後、画面の一番上までスクロールして戻るのはユーザーにとって少し手間ですよね。そんな時に画面の右下に表示される「トップへ戻るボタン」は、ユーザビリティを高める必須アイテムです。 実はElem […]
画像を好きな形に切り抜く「マスク機能」の使い方
Webサイトを作っていて、「配置する画像がどれも四角ばかりで、なんだかデザインが単調だな…」と感じたことはありませんか？ 少しおしゃれなサイトで見かけるような、アメーバのような形や、正円に画像を切り抜く作業。昔はPhot […]
謎のすき間の正体は？ウィジェットスペースとカラムギャップ設定の使い分け
Elementorでデザインをしていると、誰もが一度はこんな余白の罠にハマります。 「画像を2つくっつけたいのに、マージンを0にしても謎のすき間が消えない…」 「横並びのカードのすき間をマージンで空けたら、スマホ表示でレ […]
「背景オーバーレイ」で画像上の文字の可読性を上げる方法
Webサイトのトップページやバナーで、画面いっぱいの写真の上にキャッチコピーを配置するデザインは定番ですよね。 しかし、実際に作ってみるとこんな悩みにぶつかりませんか？ 「写真の明るい部分と白い文字が同化して、文字が読め […]
画像が重なる・ボタンが押せない！を解決する z-index（z-インデックス）
Elementorでの制作に慣れてくると、「コンテナの上に画像を少し重ねて配置したい」といった、立体感のあるデザインに挑戦したくなりますよね。その際、マージンの数値をマイナスに設定することで、要素同士を重ねることができま […]
ただの箇条書きを卒業！「アイコンリスト」ウィジェット
Webサイトでサービスの特徴や、料金プランの注意点などを箇条書きにする際、どのように設定していますか？ テキストエディターを使って、「・」や「※」や数字など、文頭に手入力している方も多いのではないでしょうか。 実はそれ、 […]
脱・四角いサイト「シェイプ区切り」で波線や斜めのデザインを作る方法
Webサイトを作っていて、「なんだか単調だな…」「ただ四角い箱が上下に並んでいるだけで、テンプレートっぽさが抜けない…」と感じたことはありませんか？ コーポレートサイトであればカッチリした直線でも良いですが、美容系、サー […]
失敗しても大丈夫！「履歴機能」で過去の状態にタイムスリップする方法
「間違えて大切なウィジェットを消してしまった！」 「いろいろデザインを触っていたら、ぐちゃぐちゃになってしまった… 最初からやり直したい！」 Elementorで作業していると、誰でも一度はこんな冷や汗をかく瞬間がありま […]
ElementorでのLP制作に必須！ヘッダーとフッターを消す「Elementor Canvas」
LPと呼ばれるランディングページや、キャンペーン特設ページを作る際、上のメニュー（ヘッダー）や下のリンク集（フッター）が不要だと思ったことはありませんか？ LPの最大の目的は、ユーザーに申し込みや購入などのアクション（コ […]
