Elementorの見出しウィジェットの使い方

Elementorの見出しウィジェットの使い方

今回は、Elementor・見出しウィジェットの使い方について説明していきます。

説明する内容は、『コンテンツタブ』と『スタイルタブ』の二つの部門に分けて説明していきます。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Elementorの見出しウィジェットの使い方を動画でご覧になりたい方はこちらからどうぞ!

以下はElementor3.5のバージョンアップで追加された機能です。

  • Text Stroke機能:中抜き文字を作成できたり文字の中の配色やスタイルを変更することができる
  • Transform機能:文字を回転させたり斜めにすることができる
  • Word Spacing Control機能:英語の単語と単語のスペースを自由に調整できる

それぞれのリンクをクリックしていただければ、各機能の使い方の動画をご覧いただけます!

またTOFUラボのプロデザイナー藤原さんによる、見出しウィジェットでいろいろな見出し作成を実演した動画もあります。

>>藤原さんが説明してくれる見出しデザイン集はこちら!

またこちらをクリックすると『TOFUラボのプロデザイナー藤原さんによる見出しウィジェットの実演動画』のセクションへジャンプします

見出しウィジェット『コンテンツタブ』の説明

見出しウィジェット『コンテンツタブ』の説明

画像のように見出しウィジェットを、画面にドラック&ドロップする事で見出しウィジェットが使用できるようになります。

見出しウィジェット『コンテンツタブ』の説明

そうすると、画像のように見出しのテキストを入力できるようになります。
ここは、以前テキストエディターウィジェットでも説明したように直接テキストを記入してもよし、左側にあるタイトル欄に記入しても反映されます。

ただし、テキストエディターウィジェットとの違意があります。
それは左枠のテキスト欄に記載したテキストを太字にしたり、書体を変えたりする編集作業はできないので注意が必要です。

リンクの設定でリンクを貼る

見出しウィジェット『コンテンツタブ』の説明

次はリンクの説明です。

その名の通り、このリンク枠にリンクのURLを記載すると見出しにリンクを貼る事ができます。
リンク先は、サイト内・サイト外どちらでも対応しています。

さらに、リンクの設定[歯車ボタン]をクリックすると、画像のような選択肢がチョイスできます。
『新しいウィンドで開く』を選択すると、リンク先が別ウィンドで表示されます。
『Nofollowを追加』に関しては、GoogleクロールのSEO関連の機能でElementorとは関係ないので、今回は説明を省かせていただきます。

『カスタム属性』に関してはJavaScriptなどで特殊なことをする時にで使う設定なので、今は割愛します。

サイズで見出しウィジェットのサイズを設定

サイズ欄では、その名の通り見出しウィジェットで表示する欄のサイズを選ぶ事ができます。

ただし、注意点が一つ!CSSで最初からこのスタイルのサイズを決めてしまっている時や、HTMLでヘディングにスタイルを入れてしまうとサイズが変わらなくなりますので気をつけてください。

HTMLで見出しのヘディングを設定

HTML欄は、見出しをどのヘディングで表示させるのかを決める事ができます。
人によってはH1で表示したい場合もあるでしょうし、H2・H3と自分にあうヘディングを最初から指定する事が可能です。

配置でテキストの表示位置を決定

最後の『配置』ですが、これは皆さん見た事があるテキストを左詰め・中央揃え・右詰め・均等を選ぶ事ができます。

見出しウィジェット『スタイルタブ』の説明

『スタイルタブ』では主に文字色や書体などが変更可能となっています。
その中で、『地球マーク』があると思いますがこちらは別で詳しく説明していくので今回は気にせず飛ばしてください。

この『地球マーク』の詳しい説明は『ElementorのGlobal ColorsとGlobal Fontsの使い方』をみてください。

文字色でテキストのカラーを設定

文字色でテキストのカラーを設定

文字色はその名の通り、今見出し欄に記入されている文字の色を変更する事ができます。

ここでは前述した『地球マーク』ではなく、その横の現在使用されている色が表示されている部分からカラーピッカーを開きそこで細かく調整することができます。

書体でテキストのスタイルを設定

書体でテキストのスタイルを設定

書体は、『地球マーク』の横にある『鉛筆マーク』をクリックする事で画像のような『タイポグラフィ』を表示させて使用します。
そして、この『タイポグラフィ』で選択できる内容の全てはテキストエディターウィジェットの記事を確認いただければ全て説明しています。

こちらの記事をご確認ください。

テキストシャドウでテキストに影を設定

テキストシャドウは見出しで記載されている文字に、影をつける事ができる機能です。
画像のように、ぼかしを調節する事で影をくっきり見せるのかぼかすのかを選択でき、水平と垂直でそれぞれの方向に影を移動できます。

さらに、画像のように影の色を変更することも可能です。

ブレンドモードでテキストを背景にブレンドさせる設定

ブレンドモードでテキストを背景にブレンドさせる設定

最後にボタンモードの説明ですが、実はこれ日本語訳が間違っておりボタンモードではなくブレンドモードの間違いですので注意してください。

では、このブレンドモードで何ができるのかと言うと現状画像の状態では何を選択しても変化はありません。
このブレンドモードは背景と見出しに記載しているテキストをブレンドさせる機能となります。

ブレンドモードでテキストを背景にブレンドさせる設定

この画像のように、見出しの背景を設定してからがこのブレンドモードの使いどころです。

ブレンドモードでテキストを背景にブレンドさせる設定

この画像のように、背景を設定してからブレンドモードで様々なエフェクトを設定することでそのエフェクトの効果が発揮できます。
(画像では、Screenの効果が見出しのテキストに付与されて背景とブレンドされています)

エフェクトの効果は10種類以上あるので、それぞれ試してみてくださいね。
フォトショップなどを使用している方は、分かりやすいエフェクトだと思います。

ここまでが、見出しウィジェットの説明となります。

TOFUラボのプロデザイナー藤原さんによる見出しウィジェットの実演動画

TOFUラボのメンバーでもあるプロのWEBデザイナー藤原さんに見出しウィジェットをつかって作成したオシャレな見出しの作り方を実演していただきました。

見出し制作のアイディアになるのでぜひ参考にしてください!

見出し制作の実演をフルでご視聴になりたい方はこちらからどうぞ!

H2見出し作成の実演動画集

こちらは7つのH2(大見出し)作成の実演動画です。

気になるものをクリックしてください。

実演タイトル 併用したウィジェット
動画をMaskして作る動きのある見出しデザインの作り方と使用している動画をクリックできないようにするカスタムCSSの設定方法
筆記体を日本語の見出しの後ろに配置したお洒落なh2の見出しデザインの作り方
ElementorのText Pathウィジェットを使って見出しを楕円状に配置するh2の見出しデザインの作り方Text Pathウィジェット
見出しの文字色を透明にし文字とラインをずらして今風のh2の見出しデザインの作り方
区切り線ウィジェットを使って短いアンダーラインを使用したh2の見出しデザインの作り方区切り線ウィジェット
区切り線ウィジェットを使って、文字やアイコンの両サイドを線で区切ったh2の見出しデザインの作り方区切り線ウィジェット
見出しウィジェットで文字を重ねて作るh2の見出しデザインの作り方

H3見出し作成の実演動画集

こちらは13種類のH3(小見出し)作成の実演動画です。

気になるものをクリックしてください。

実演タイトル併用ウィジェット
CSSを設定して、和風サイトや学校のサイトなど幅広く使える縦書きh3の見出しデザインの作り方
一文字ずつ背景色を設定した思わず目に止まるh3の見出しデザインの作り方
アイコンウィジェットやスペーサーウィジェットと、背景色を設定した見出しウィジェットを重ねて作るh3の見出しデザインの作り方アイコンウィジェット
スペーサーウィジェット
インラインでラインのアイコンウィジェットを使って作る、メリハリのあるh3の見出しデザインの作り方アイコンウィジェット
円形や星形などの図形をアイコンウィジェットを使って飾り付けした、かわいいh3の見出しデザインの作り方アイコンウィジェット
最近Elementorに追加された見出しウィジェットのTransformのSKEWを設定して作る、斜体のh3の見出しデザインの作り方
インラインで見出しウィジェットの背景に色を付けるh3の見出しデザインの作り方
全幅設定で見出しウィジェットの背景に色を付けるh3の見出しデザインの作り方
インラインでナンバリングを重ねたお洒落なh3の見出しデザインの作り方
Text Stroke機能を使い、抜き文字で抜け感のあるh3の見出しデザインの作り方
見出しウィジェットのテキストシャドウを設定しドロップシャドウを付けた、h3の見出しデザインの作り方
アンダーラインでメリハリがつくh3見出しデザインの作り方
小見出しに活用できるh3の見出しデザインの作り方

ぜひ、見出しのデザインの参考にしてくださいね!

オプション自体は数が多くない見出しウィジェットですが、それでも組み合わせで表現の幅は非常に広がります!

シンプルなウィジェットですが、そのぶん使いやすいのが見出しウィジェットです。

>>こちらはプロWebデザイナーの藤原さんによるさまざまな見出しデザインの紹介と使用しているフォントやCSSについて紹介した動画です。

こちらもぜひ、見出しづくりの参考にしてくださいね!


『見出し』ウィジェットは見出し(タイトル)だけに特化した基本中の基本ウィジェットですが、Elementorの数あるウィジェットの中には何個かの異なる性質がすでに最初から合わさったウィジェット、例えば『画像ボックス』ウィジェットの様に、見出し・テキストエディター・画像が三位一体型のものなどもあります。

用途に合わせて色々なウィジェットを使いこなせると仕事のスピードもアップします!
>>【Elementor『画像ボックス』ウィジェットの使い方】

尚見出しの編集の仕方はどのウィジェットもここで説明した通りになります。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

「Elementorの見出しウィジェットの使い方」への2件のフィードバック

  1. エレメンターを使ってHPを作成しているのですが、途中でテーマを変えたのが原因なのか分からないのですが、見出しテキストやテキストエディターで英文を打ち込むと、小文字しか打てなくなったり、頭文字だけ強制的に大文字になったり、というバグが起きています。
    解決法はご存じでしょうか?

    1. テキストの装飾の設定じゃないかなと思います。
      すみません、この情報だけではそのくらいしか予想できないです。
      もっと質問したい場合はTOFUラボでお願いします。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通