Elementor Proのシェアボタンウィジェットの使い方

ウェブサイトのコンテンツをSNSなどに気軽にシェアしてもらえるようなボタンがあったらいいな。
なんて思っていませんか?

Elementor Proの『シェアボタン』ウィジェットなら、FacebookやTwitterなどのSNSやE-mailで閲覧者がサイトのページをシェアすることのできるボタンを設置することができます。

実際のサイトにシェアボタンを設置したときのサンプル画像

ボタンクリックひとつで簡単に、視覚的にもわかりやすく閲覧者にシェアを促すことができるので、外部のシェア率を上げたいコンテンツに『シェアボタン』ウィジェットはうってつけです!

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

Elementor Proのシェアボタンウィジェットの使い方を動画でご覧になりたい方はこちらからどうぞ!

シェアボタンウィジェットを挿入

シェアボタンウィジェットをドラッグ&ドロップでカラムに挿入

シェアボタンウィジェットをカラムにドラッグ&ドロップで挿入します。

シェアボタンウィジェット挿入後のデフォルトの画面表示

するとこのようにデフォルトで以下のボタンが表示されます。

  • Facebook
  • Twitter
  • Linkedin

コンテンツタブの編集

コンテンツタブの設定

シェアボタンのエディター

シェアボタンのエディターを大まかに説明した図(項目を追加・複製ボタン・削除ボタン)

上記はシェアボタンのエディターを簡単に説明をした画像です。

項目とは各シェアボタンのことを言い、
新たにボタンを設置する場合はエディター下部の『+項目を追加』をクリックし追加をします。
また、項目は何個でも追加が可能です。

エディターの項目名の右側のボタンは『複製』、一番右の×ボタンは『消去』です。

項目の編集

エディターの項目名をクリックすると、その項目のエディターが開きます。

以下は新しく項目を追加し、その項目のエディターを表示したときの画面です。
※項目を新規追加するデフォルトで『Facebook』が表示されます。

『+項目を追加』でシェアボタンを新規追加した後の表示画面・デフォルトでFacebookのシェアボタンが表示

ネットワーク

ネットワークのリストから、欲しいシェアボタンの項目を選択

『ネットワーク』のプレイスホルダーをクリックすると上記のシェアボタンのリストが表示されますので、その中から欲しいシェアボタンを選択します。

※上記サンプルでは『Email』を選択しました。

以下はシェアボタンのリスト一覧です。

  • Facebook
  • Twitter
  • Linkedin
  • Pinterest
  • Reddit
  • VK
  • OK
  • Thumbir
  • Digg
  • Skype
  • StumbleUpon
  • Mix
  • Telegram
  • Pocket
  • XING
  • WhatsApp
  • Email
  • Print

Custom Label

Custom Labelの説明・プレイスホルダーに記入した文字がラベルになる

『Custom Label』はネットワーク名(ラベル)を自由に変更することができます。

※未記入なら『ネットワーク』で選択したものの名前がそのまま表示されます。

表示

『表示』の全オプションを表示した画面(Icon&Text/Icon/Text)
表示のすべてのオプションを表示した画像

『表示』はシェアボタンのボタンの表示形態を以下から選択します。

  • Icon & Text(デフォルト):アイコンとラベル両方
  • Icon:アイコンのみ
  • Text:ラベルのみ

Label

Labelを非表示にしたときの表示画面・アイコンのみの表示になる。

『Label』はラベル(項目名)の表示をするかどうかの選択です。

前セクションの『表示』で『Icon & Text』を選択したときのみエディターに追加され、Labelを『非表示』にすると上記画面のようにシェアボタンがアイコンだけの表示になります。

正直言ってこの設定は『表示』で『Icon』を選択するのとまったく同じです。

スキン

スキンのオプションを一覧で表示した画像(Gradient/Minimal/フレームつき/Boxed Icon/Flat)
スキンの全てのオプションを表示した画像

『スキン』はシェアボタンのデザインを以下から選択することができます。

  • Gradient(デフォルト)
  • Minimal
  • フレームつき
  • Boxed Icon
  • Flat

形状

 形状のオプションをすべて表示した画像(四角・丸み・円)

『形状』はボタンの形を以下から選択することができます。

  • 四角(デフォルト)
  • 丸み

円+アイコン

表示がアイコンのみ、またはスキンがMinimalの場合で『円』を選択するとアイコンが正円になる

アイコンのみの表示、またはスキンでMinimalを選択しているときに形状で『円』を選択するとアイコンは正円で表示されます。

カラム

カラムの説明・Auto選択時の表示画面

『カラム』はシェアボタンを1つのカラムに最大何個まで表示させるかをAuto、1〜6の中から選択します。

※上記画像はカラムで『Auto』(デフォルト)を選択したときの表示画面です。
Autoは各シェアボタンの大きさはラベルの文字数に合わせて自動調整されます。

カラムで『1』を選択したときの表示画面
『カラム:1 』を選択を選択したときの表示画面

『カラム』で『1』を選択するとシェアボタン1つにつき1つのカラムいっぱいにボタンが表示されます。

カラムで『2』を選択したときの表示画面
『カラム:2』を選択したときの表示画面

上記はカラムを『2』に選択したときの表示画面です。

1つのカラムに2つのシェアボタンが等間隔に表示されます。

カラム3〜6も同じ原理で選択した数字の数だけシェアボタンが等間隔に1つのカラムの中に集約されます。

配置

配置の説明・『左』を選択したときの表示画面(デフォルト)

『配置』はシェアボタンの配置を以下から選択します。

  • 左(デフォルト)
  • 中央
  • 均等割付

なお、配置は前セクションの『カラム』を『Auto』にしたときのみエディターに表示される設定です。

※上記画像は配置を『左』(デフォルト)に設定したときの表示画面です。

均等割付

配置を『均等割付』にしたときの表示画面

『均等割付』はカラム幅いっぱいにボタンが等間隔に割り振られ配置されますが、各ボタンのサイズは変更しません。

ターゲットURL

ターゲットURLのオプション一覧・Current Page/カスタム

『ターゲットURL』はシェアボタンでシェアさせるページを指定するものです。

Current Page

『Current Page』はシェアボタンが設置されているページを閲覧者にシェアさせることができます。

カスタム

ターゲットURLをカスタムにしたときの説明・プレイスホルダーにシェアさせたいページのURLを記入

『カスタム』は特定のページをシェアさせたいときに使用します。

シェアさせたいページのURLをプレイスホルダーに記入します。

スタイルタブの編集

スタイルタブの説明

カラムのすき間

カラムのすき間の説明・値を100(最大値)にしたときの表示画面

『カラムのすき間』はシェアボタンとシェアボタンの間のスペースをカーソルを左右にスライドさせることにより縮小・拡張することができます。

上記はカラムのすき間の値を『100』(最大値)にしたときの表示画面です。
※デフォルトは『10』の値に設定されています。

Rows Gap

Rows Gapの説明・値を100(最大値)にしたときの表示画面

『Rows Gap』は縦列したシェアボタンとシェアボタンの間のスペースをカーソルを左右にスライドさせることにより縮小・拡張することができます。

上記はRows Gapの値を『100』(最大値)に設定したときの表示画面です。
※デフォルトは『10』の値に設定されています。

Button Size

Button Sizeの説明・値を2(最大値)にしたときの表示画面

『Button Size』はボタンの大きさをカーソルを左右にスライドさせることにより縮小・拡大することができます。

上記はButton Sizeの値を『2』(最大値)に設定したときの表示画面です。
※デフォルトは『1』の値に設定されています。

設置するボタンの数によりますが、全てのボタンが1つのカラムに収まらない場合は上記画像のようにはみ出たボタンは改行され表示されます。

Icon Size

Icon Size の説明・値を4(最大値)にしたときの表示画面

『Icon Size』はアイコンの大きさをカーソルを左右にスライドさせることにより縮小・拡大することができます。

上記はIcon Sizeの値を『4』(最大値)にしたときの表示画面です。
※デフォルトは約1.6〜1.7辺りの値に設定されています。

Button Height

Button Heightの説明・値を7(最大値)にしたときの表示画面

『Button Height』はシェアボタンの高さの幅をカーソルを左右にスライドさせることにより縮小・拡張することができます。

また、Button Heightの高さはButton Sizeの設定に比例します。

上記はButton Heightの値を『7』(最大値)に設定したときの表示画面です。
※デフォルトの値は『4.5』に設定されています。

色のオプション(Official/カスタムの説明・Official選択時の表示サンプル

『色』ではシェアボタンの色を以下から選択することができます。

  • Official(デフォルト):公式カラー
  • カスタム:自分で色を変更できる。

カスタム

色で『カスタム』を選択した後のデフォルトの表示画面

『カスタム』を選択すると『普通/ホバー』各時の『メインカラー/サブカラー』を変更することができます。

上記画像は色でカスタムを選択したときのデフォルトカラーです。

カスタムでは全てのボタンの色が統一され、ボタンごとに色を変更することはできません。

カスタムの『普通』時のメインカラーとサブカラーを変更したときの画面
普通

上記は『普通』(マウスオーバーしていないとき)時のメインカラーとサブカラーを変更したときの表示画面です。

  • メインカラー:シェアボタンの背景色
  • サブカラー:アイコンとラベルの色
カスタムの『ホバー』時のメインカラーとサブカラーを変更したときの表示画面
ホバー

上記はホバー時のメインカラーとサブカラーを変更したときの表示画面です。

マウスオーバーしたボタンのみ、ここで指定した色に変更します。

書体

タイポグラフィでラベルの書体を変更したときの表示画面

『書体』の『タイポグラフィ』でラベルの書体を自由に変更することができます。

タイポグラフィのくわしい使い方について知りたい方は【Elementorの『テキストエディター』ウィジェットの使い方】の記事の同セクションを参考にしてください。


シェアボタンはサイトのコンテンツを外部に拡散させたいときに、視覚的にも閲覧者にシェアを促すことができ、さらにボタンクリックで簡単にシェアしてもらえるのでとても便利ですね!

また、SNS以外にもE-mailやPrintボタンがあるのも嬉しいところです。

シェアボタンウィジェットを便利なサイト作りに活用してみてはいかがですか?

Elementor Proでは今回紹介したシェアボタンウィジェット以外にも、他にもSNSと連携した便利なウィジェットがあります。

特にFacebookとの連携は強く、Facebookだけに特化したウィジェットだけで4つもあります。

また、以下のようにTwitterと連携したウィジェットもありますのでぜひ参考にしてくださいね!

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

Naomi Suzuki

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

目次

コメントする

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

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

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

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

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