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

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

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

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

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

タイトル

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

リンク

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

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

サイズ

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

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

HTML タグ

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

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

配置

• 左
• 中央
• 右
• 均等割付

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

スタイルのタイトル設定

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

文字色

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

書体

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

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

テキストシャドウ

• 色
• ぼかし
• 水平
• 垂直

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

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

ボタンモード

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

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

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

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

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

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

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

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

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