【spanタグ不要】elementor v4ウィジット内で一部のテキストを装飾する方法

Elementor 困った！

2026-04-28

前田あゆみ

みなさん、v3で見出しの中の一部テキストに色をつけたい時どうしてましたか？

わたしはこんな感じで見出しの中にspanタグを入れて、追加CSSで色をつけてました。

v4では、こちらの記事でも書いたように、見出しや段落ウィジットにはHTMLタグを入れられません…

v4ウィジット内で一部テキストのみ装飾する方法

今回はこんなデザインを作りたいとします。
（私が幼稚園生の時の夢はパン屋さんでした。いい匂いがするから。）

ステップ① ウィジット自体をクリックし対象テキストを太字にする

私さっきのImranさんの動画を見るまで知らなかったのですが、v4ウィジットではウィジット自体でテキストを選択すると、こんなタブが出てくるようになったのです。

太字・イタリック・シンプルな下線などは、これで対象のテキストを選択するだけで実装できます！

色をつけるのも、これを利用します！

今回は「小さな幸せ」を選択して「b」をクリックして太字にします。
こんな感じになりました。

ステップ② ウィジットにクラスをつける

この見出しウィジットのスタイルタブから、クラスをクリックし「text-color」と入力します。

エンターを押して青緑になればOK！
今回はクラスの名前をつけたいだけなので、elementor上で何か数値を変更したりしないで大丈夫です。

そのまま保存（公開）して、次のステップに進みましょう。

ステップ③ CSSコードを入れる

このようなコードを用意しました。

HTML

<style>
.text-color strong{
	color:#D18339 !important;
	font-weight:700 !important;
}
</style>

<style>
.text-color strong{
	color:#D18339 !important;
	font-weight:700 !important;
}
</style>

これは「text-color」の中の「strong」の色をオレンジに変更してね、太さは700にしてね、という意味です。

strongとは何か。
プレビュー画面を検証ツールで見てみましょう。
（Macの方ならF12を押すか、画面を右クリックして「検証ツール」をクリックしてください）

ここで先ほどのウィジットが、どのようにHTMLコードに変換されているのかを見ることができます。

「text-color」クラスをつけた h2（見出しウィジット）の中で
「b」太字にしたところがstrongで囲まれてますね。

strongタグは強調したいところに使われ、太字に（フォントウェイトが高く）なります。
実際に、この見出しウィジットはフォントウェイト700にしていたのに、検証ツール上strongのところは900になっていました。

先ほどのCSSは、色をつけつつフォントウェイトを調整していたということです。

説明が長くなりましたが、先ほどのCSSコードを以下にコピペしてください。

・無料版→ 外観 > カスタマイズ > 追加CSS　※<style> 〜 </style>の中身だけでOK
・有料版→ elementor > エディター > カスタムエレメント > code

結果…

これでプレビューをリロードすると…

できました！

複数箇所に装飾を入れたいときはどうすればいい？

では、一つのウィジットの中で、複数の異なる装飾を入れたい時はどうすればいいでしょうか。
例えば今回はテキストをこんな風にしたいとします。

今回は文章のところに、デカ色太文字・普通の太文字・アンダーラインの3つの装飾をつけていこうと思います。

ステップ① 対象テキストを太字・イタリック・下線にする

先ほどと同じように、ウィジット自体をクリックして、装飾を選択します。

今回は
「「おはよう」の朝食にも。「お疲れ様」のおやつにも。」→ イタリック
「小さなお子様からお年寄りまで」「体に優しい素材」→ 太字
「体に優しい素材」→ 下線
と設定しました。

※ちなみにv3のテキストエディターのように、コンテンツのところでは操作できないのでご注意ください。

ステップ② ウィジットにクラスをつける

このウィジットのスタイルタブから、クラス名を入力。エンター。
今回は「text-style」とします。

保存（公開）を忘れずに！

ステップ③ CSSコードを入れる

今回は以下が必要な調整です。
・イタリック → イタリックを戻す/フォントサイズ変える/色つける/太くする/行の高さ変える
・太字 →そのまま
・下線 → 太さ/色/位置を調整

それをCSSにするとこんな感じ。

HTML

<style>
/* イタリックのところ */
.text-style em{
	font-style:normal  !important;
	font-size:20px !important;
	color:#D18339  !important;
	font-weight:700  !important;
	line-height:150% !important;
}

/* 下線 */
.text-style u{
  text-decoration-thickness: 50% !important;
  text-underline-offset: -15% !important;
  text-decoration-skip-ink: auto;
  text-decoration-color: rgba(209, 131, 57, 0.2) !important;
}
</style>

<style>
/* イタリックのところ */
.text-style em{
	font-style:normal  !important;
	font-size:20px !important;
	color:#D18339  !important;
	font-weight:700  !important;
	line-height:150% !important;
}

/* 下線 */
.text-style u{
  text-decoration-thickness: 50% !important;
  text-underline-offset: -15% !important;
  text-decoration-skip-ink: auto;
  text-decoration-color: rgba(209, 131, 57, 0.2) !important;
}
</style>