タイトルや見出し部分で「期間限定！」のような文字を、くるっとカーブさせて配置したいと思ったことはありませんか？
画像編集ソフトがないと無理かな… と諦める必要はありません！Elementor 標準の、テキストパスウィジェットを使えば誰でも簡単に文字を円形や波線に変形できます。サイトのワンポイントアクセントになる、装飾テクニックを解説します！
テキストパスを使うメリット
これまで、文字を円形やアーチ状に曲げるにはPhotoshopなどのソフトで画像化して貼り付けるのが一般的でした。しかし、Elementor のテキストパスを使えば以下fのようなメリットがあります。
- 修正が一瞬で終わる：画像ではないので、後から文言を期間限定を新発売に変えたい時も、Elementor 上で文字を打ち直して修正できます。
- 画質が劣化しない：どんなに拡大しても、文字の輪郭がくっきりと綺麗なまま保たれます。
- SEOにも有利：画像ではなくテキストデータとして認識されるため、Googleの検索エンジンにも内容がしっかり伝わります。
基本の設定手順
使い方はとても簡単です。数クリックであっという間に文字が曲がります。
- ウィジェット検索から「Text Path（テキストパス）」を探し、配置したい場所にドラッグ＆ドロップします。
- 左パネルの [ コンテンツ ] タブを開き、テキストの欄に表示させたい文字（例：SPECIAL OFFER）を入力します。
- すぐ下にある「Path Type（パスタイプ）」のプルダウンから、好きな形を選びます。
- Circle（円）: ぐるっと丸いスタンプ状になります。
- Arc（弧）: 虹のようなアーチ状になります。
- Wave（波）: うねるような波線になります。
プロっぽく仕上げる微調整
形が決まったら、[ スタイル ] タブに移動してデザインを整えましょう。
-
開始点の調整：「Starting Point（開始点）」のスライダーを動かすと、文字のスタート位置を調整できます。見せたい文字が一番上にくるように微調整しましょう。
- タイポグラフィ：フォントを変えたり、文字のサイズや太さを調整します。
- ホバー時の動き：マウスオーバータブでトランジション期間を設定し、マウスを乗せた時に色が変わるようにすると、さらにリッチな表現になります。
まとめ
- テキストパスを使えば、画像編集ソフトなしで文字を自由に曲げられる。
- パスタイプから「円」や「波」など好きな形を選ぶだけで簡単に形を変更。
- 画像ではなくテキストなので、何度でも修正可能で画質も綺麗。
画像や背景の切り替わり位置の上に重ねたり、斜めに配置したり、遊び心あるウィジェットなのでぜひ色々なところで試してみてください！
