Elementor Proのシェアボタンウィジェットの使い方
- 2022年2月8日
- 2022年1月2日
- Elementorの使い方
- Elemenotrの使い方コース, Elementor Pro
ウェブサイトのコンテンツをSNSなどに気軽にシェアしてもらえるようなボタンがあったらいいな。
なんて思っていませんか？
Elementor Proの『シェアボタン』ウィジェットなら、FacebookやTwitterなどのSNSやE-mailで閲覧者がサイトのページをシェアすることのできるボタンを設置することができます。
ボタンクリックひとつで簡単に、視覚的にもわかりやすく閲覧者にシェアを促すことができるので、外部のシェア率を上げたいコンテンツに『シェアボタン』ウィジェットはうってつけです！
Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。
Elementor Proのシェアボタンウィジェットの使い方を動画でご覧になりたい方はこちらからどうぞ！
シェアボタンウィジェットを挿入
シェアボタンウィジェットをカラムにドラッグ＆ドロップで挿入します。
するとこのようにデフォルトで以下のボタンが表示されます。
コンテンツタブの編集
シェアボタンのエディター
上記はシェアボタンのエディターを簡単に説明をした画像です。
項目とは各シェアボタンのことを言い、
新たにボタンを設置する場合はエディター下部の『＋項目を追加』をクリックし追加をします。
また、項目は何個でも追加が可能です。
エディターの項目名の右側のボタンは『複製』、一番右の×ボタンは『消去』です。
項目の編集
エディターの項目名をクリックすると、その項目のエディターが開きます。
以下は新しく項目を追加し、その項目のエディターを表示したときの画面です。
※項目を新規追加するデフォルトで『Facebook』が表示されます。
ネットワーク
『ネットワーク』のプレイスホルダーをクリックすると上記のシェアボタンのリストが表示されますので、その中から欲しいシェアボタンを選択します。
※上記サンプルでは『Email』を選択しました。
以下はシェアボタンのリスト一覧です。
- VK
- OK
- Thumbir
- Digg
- Skype
- StumbleUpon
- Mix
- Telegram
Custom Label
『Custom Label』はネットワーク名（ラベル）を自由に変更することができます。
※未記入なら『ネットワーク』で選択したものの名前がそのまま表示されます。
表示
『表示』はシェアボタンのボタンの表示形態を以下から選択します。
- Icon ＆ Text（デフォルト）：アイコンとラベル両方
- Icon：アイコンのみ
- Text：ラベルのみ
Label
『Label』はラベル（項目名）の表示をするかどうかの選択です。
前セクションの『表示』で『Icon & Text』を選択したときのみエディターに追加され、Labelを『非表示』にすると上記画面のようにシェアボタンがアイコンだけの表示になります。
正直言ってこの設定は『表示』で『Icon』を選択するのとまったく同じです。
スキン
『スキン』はシェアボタンのデザインを以下から選択することができます。
- Gradient（デフォルト）
- Minimal
- フレームつき
- Boxed Icon
- Flat
形状
『形状』はボタンの形を以下から選択することができます。
- 四角（デフォルト）
- 丸み
- 円
円＋アイコン
アイコンのみの表示、またはスキンでMinimalを選択しているときに形状で『円』を選択するとアイコンは正円で表示されます。
カラム
『カラム』はシェアボタンを1つのカラムに最大何個まで表示させるかをAuto、1〜6の中から選択します。
※上記画像はカラムで『Auto』（デフォルト）を選択したときの表示画面です。
Autoは各シェアボタンの大きさはラベルの文字数に合わせて自動調整されます。
『カラム』で『1』を選択するとシェアボタン1つにつき1つのカラムいっぱいにボタンが表示されます。
上記はカラムを『2』に選択したときの表示画面です。
1つのカラムに2つのシェアボタンが等間隔に表示されます。
カラム3〜6も同じ原理で選択した数字の数だけシェアボタンが等間隔に1つのカラムの中に集約されます。
配置
『配置』はシェアボタンの配置を以下から選択します。
- 左（デフォルト）
- 中央
- 右
- 均等割付
なお、配置は前セクションの『カラム』を『Auto』にしたときのみエディターに表示される設定です。
※上記画像は配置を『左』（デフォルト）に設定したときの表示画面です。
均等割付
『均等割付』はカラム幅いっぱいにボタンが等間隔に割り振られ配置されますが、各ボタンのサイズは変更しません。
ターゲットURL
『ターゲットURL』はシェアボタンでシェアさせるページを指定するものです。
Current Page
『Current Page』はシェアボタンが設置されているページを閲覧者にシェアさせることができます。
カスタム
『カスタム』は特定のページをシェアさせたいときに使用します。
シェアさせたいページのURLをプレイスホルダーに記入します。
スタイルタブの編集
カラムのすき間
『カラムのすき間』はシェアボタンとシェアボタンの間のスペースをカーソルを左右にスライドさせることにより縮小・拡張することができます。
上記はカラムのすき間の値を『100』（最大値）にしたときの表示画面です。
※デフォルトは『10』の値に設定されています。
Rows Gap
『Rows Gap』は縦列したシェアボタンとシェアボタンの間のスペースをカーソルを左右にスライドさせることにより縮小・拡張することができます。
上記はRows Gapの値を『100』（最大値）に設定したときの表示画面です。
※デフォルトは『10』の値に設定されています。
Button Size
『Button Size』はボタンの大きさをカーソルを左右にスライドさせることにより縮小・拡大することができます。
上記はButton Sizeの値を『2』（最大値）に設定したときの表示画面です。
※デフォルトは『1』の値に設定されています。
設置するボタンの数によりますが、全てのボタンが1つのカラムに収まらない場合は上記画像のようにはみ出たボタンは改行され表示されます。
Icon Size
『Icon Size』はアイコンの大きさをカーソルを左右にスライドさせることにより縮小・拡大することができます。
上記はIcon Sizeの値を『4』（最大値）にしたときの表示画面です。
※デフォルトは約1.6〜1.7辺りの値に設定されています。
Button Height
『Button Height』はシェアボタンの高さの幅をカーソルを左右にスライドさせることにより縮小・拡張することができます。
また、Button Heightの高さはButton Sizeの設定に比例します。
上記はButton Heightの値を『7』（最大値）に設定したときの表示画面です。
※デフォルトの値は『4.5』に設定されています。
色
『色』ではシェアボタンの色を以下から選択することができます。
- Official（デフォルト）：公式カラー
- カスタム：自分で色を変更できる。
カスタム
『カスタム』を選択すると『普通/ホバー』各時の『メインカラー/サブカラー』を変更することができます。
上記画像は色でカスタムを選択したときのデフォルトカラーです。
カスタムでは全てのボタンの色が統一され、ボタンごとに色を変更することはできません。
上記は『普通』（マウスオーバーしていないとき）時のメインカラーとサブカラーを変更したときの表示画面です。
- メインカラー：シェアボタンの背景色
- サブカラー：アイコンとラベルの色
上記はホバー時のメインカラーとサブカラーを変更したときの表示画面です。
マウスオーバーしたボタンのみ、ここで指定した色に変更します。
書体
『書体』の『タイポグラフィ』でラベルの書体を自由に変更することができます。
タイポグラフィのくわしい使い方について知りたい方は【Elementorの『テキストエディター』ウィジェットの使い方】の記事の同セクションを参考にしてください。
シェアボタンはサイトのコンテンツを外部に拡散させたいときに、視覚的にも閲覧者にシェアを促すことができ、さらにボタンクリックで簡単にシェアしてもらえるのでとても便利ですね！
また、SNS以外にもE-mailやPrintボタンがあるのも嬉しいところです。
シェアボタンウィジェットを便利なサイト作りに活用してみてはいかがですか？
Elementor Proでは今回紹介したシェアボタンウィジェット以外にも、他にもSNSと連携した便利なウィジェットがあります。
特にFacebookとの連携は強く、Facebookだけに特化したウィジェットだけで4つもあります。
- 【Elementor Pro『Facebook Comments』ウィジェットの使い方】
- 【Elementor Pro『 Facebookボタン』ウィジェットの使い方】
- 【Elementor Pro『Facebook Embed』ウィジェットの使い方】
- 【Elementor Pro『Facebook Page』ウィジェットの使い方】
また、以下のようにTwitterと連携したウィジェットもありますのでぜひ参考にしてくださいね！
Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。
