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

執筆者 | 更新日 2020年02月10日 | Elementorの使い方 | コメント0件

Elementorの見出しウィジェットでできること

Elementorの見出しウィジェットでは、H1~6の見出しを作成することができます。CSS IDを使うことで、Table of Contents Plusなどの目次作成プラグインを使わずとも、オリジナルの目次を作成することができます。CSSやHTMLコードを使わずに、簡単にデザイン性の高い見出しが作成可能です。

【限定】Elementorの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツのタイトル設定

Elementor見出しウィジェットのコンテンツのタイトル設定

見出しウィジェットを追加したら、まずは「コンテンツ」にある「タイトル」の設定をしていきましょう。

タイトル

ここに、見出しのテキストを入力します。見出しウィジェットでは、改行ができませんので、注意してください。

リンク

  • 新しいウィンドウで開く
  • Nofollow を追加

右側にある「リンク設定」という歯車アイコンをクリックすると上記の2つの項目が表示されます。「新しいウィンドウで開く」にチェックを入れると、リンクさクリックされると、新規ウィンドウでリンク先のページが開かれます。「Nofollow を追加」にチェックを

サイズ

  • デフォルト
  • 特大
  • 超特大

見出しの大きさは、この「サイズ」で上記の6種類から選択できます。

HTML タグ

  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • div
  • span
  • p

「HTMLタグ」では、ドロップダウンメニューから見出しのタグ選択します。

配置

  • 中央
  • 均等割付

見出しの位置は「配置」で設定できます。

スタイルのタイトル設定

Elementorの見出しウィジェットのスタイルにあるタイトル

次に、スタイルの設定を確認していきます。

文字色

「文字色」では、見出しの色を設定します。16進数のカラーコードも使えるので、入力してみましょう。

書体

Elementor 見出しウィジェット 書体

  • フォント
  • サイズ
  • 太さ
  • 変換
  • スタイル
  • 装飾
  • 行の高さ
  • 字間

書体では、細かいテキストの書体を設定できます。フォントやサイズ、太さなどが設定可能です。

テキストシャドウElementor 見出しウィジェット シャドウ

  • ぼかし
  • 水平
  • 垂直

見出しに、影をつけることができます。ボタンをクリックするだけでテキストシャドウがオンになりますが、影の濃さや位置を変更したいのであれば、上記の4項目を設定してみましょう。

Elementor 見出しウィジェット シャドウをかける

このような感じで、影が入ります。

ボタンモード

Elementorの見出しウィジェットのブレンドモードの使い方

翻訳は、ボタンモードとなっていますが、正確には「Blend Mode-ブレンドモード」です。これは、見出しエフェクトを追加できます。背景画像を設定するとわかりやすいと思うので、背景を追加してから設定してみてください。

見出しウィジェットを使って目次を作成する方法

Elementorの見出しウィジェットで目次を作成する

Elementorでは、自作で目次を作成することができます。プラグインを使う場合は、デザインを変更するのにCSSコードなどが必要になるので、大変ですが、Elementorであれば、簡単にデザインの変更ができます。なので、Elementorを使っていて、かつデザイン性の高い目次を作成したいのであれば、次の手順で作っていきましょう。

Step1. テキストエディターで目次を作成する

テキストウィジェットで目次を作成する

まずは、「テキストエディター」というウィジェットで目次を作成しましょう。

Step2. 見出しウィジェットのCSS IDを設定する

CSS IDにテキストを入力する 1

次に、見出しウィジェットを開きます。そして、「詳細」にいきます。ここに「CSS ID」という項目がありますので、この欄にユニークなIDを入力します。複数の見出しを用意するのであれば、必ず異なるIDを入力しましょう。また、日本語ではなく、アルファベットで入力します。例えば、「head1」みたいな感じです。

Step3. 目次にリンクを追加する

Elementorで目次にリンクを追加する

次に、テキストエディターで作成した目次にリンクを埋め込んでいきます。まずは、テキストを選択して、ツールバーの「リンクの挿入/編集」をクリックします。すると、リンクを挿入する欄が表示されるので、そこに先ほど設定した見出しのCSS IDを設定します。でも、1つ注意点があって、見出しに埋め込むリンクは、「#(CSS ID)」のように、必ずCSS IDの前に「#」をつけましょう。これを見出しの数だけ繰り返していくと、目次が完成します。

根本 耕輔

根本 耕輔

WordPressを使ったオンラインビジネスの構築が得意。

KClubマーケティング、KClubショーケースを運営。

Elementorの使い方を学びませんか?

Elementorの各ウィジェットの使い方からページの作り方まで網羅的にカバーしたコースが無料で受講できます。(通常¥980)

0コメント

コメントを提出

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

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。

Elementorの使い方

無料でElementorの使い方を網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?