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

Elementor Proのシェアボタンウィジェットは、SNSのシェアボタンを追加するウィジェットです。FacebookやTwitter、Google+、LinkedIn、Pinterest、Tumblr、Skype、Pocketなどのシェアボタンを追加できます。また、ボタンのスタイルも複数用意されていて、自由にカスタマイズできます。他には、通常ならシェアボタンを追加したページのリンクがシェアされると思いますが、別の特定のページをシェアしてもらえるような設定もできます。

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

コンテンツのシェアボタンの使い方

デフォルトで「Facebook」、「Google +」、「Twitter」、「LinkedIn」の4つ用意されています。他のSNSのシェアボタンを追加したい場合は、「+ 項目を追加」ボタンをクリックします。削除したい場合は、「×」ボタンをクリックします。複製したい場合は、書類アイコンをクリックします。

項目をクリックすると次の項目が表示されます。

ネットワーク

SNSの種類をドロップダウンから選択します。

Custom Label

アイコンの表記を変更することができます。例えば、「Facebook」という表記を「フェイスブック」に変更したり。

表示

シェアボタンの表記タイプを「Icon & Text」、「Icon」、「Text」の3種類から選択できます。「Icon & Text」は、アイコンとテキストの両方が表示され、「Icon」はアイコンだけ、「Text」はテキストだけが表示されるようになります。それぞれ、ボタンの大きさが異なりますので、注意してください。

Count

「SHOW」にするとシェア数が表示されます。ただし、「donReach」という外部サービスでアカウントを作成し、WordPressのダッシュボードでElementorから「設定」から「連携」に行き、API keyを入力する必要があります。

スキン

「Skin」では、シェアボタンのタイプを変更できます。「Gradient」、「Minimal」、「Framed」、「Boxed Icon」、「Flat」の5種類から選択できます。

形状

シェアボタンの形を「Square-四角」、「Rounded-四角(角が丸いタイプ)」、「Circle-丸」の3種類から選択できます。

カラム

カラム数を変更できます。デフォルトでは、「Auto」になっていますが、変更する場合はドロップダウンから選択します。最大6カラムまで用意されています。

配置

シェアボタンの配置を設定できます。「左」、「中央」、「右」、「均等割付」の4つから選択します。「均等割付」は、ウィジェット内で複数のシェアボタンを均等のスペースで配置してくれます。

ターゲットURL

シェアボタンのURLを入力します。デフォルトでは、「Current Page」ということで、シェアボタンを設置している記事がシェアされるようになります。現在の記事ではなく、特定の記事をシェアしてもらいたいという場合は、「Custom」に切り替えて、その下の記入欄にシェアしてもらいたいURLを入力します。

スタイルのシェアボタンの使い方

シェアボタンの大きさやテキストなど、細かい設定をしていきます。

カラムのすき間

「コンテンツ」の「Columns」で2以上、または「Auto」を設定したら、ここでカラム間のスペースを設定できます。カラム間を均等にしたい場合は、「Alignment」で「Justify」を選択しましょう。

Rows Gap

シェアボタンが複数の行に表示する設定をしている場合は、ここで上下のボタンのスペースを調節します。

Button Size

デフォルトのボタンの大きさが嫌な場合は、ここでボタンの大きさが調節できます。

Icon Size

「コンテンツ」の「Share Buttons」では、「View」でボタンにアイコンかテキスト、もしくは両方を表示するという設定ができました。そこで、「Icon & Text」か「Icon」を選択していれば、この項目でボタンのアイコンの大きさを調節できます。

Button Height

ボタンの太さ（高さ）を設定します。

Border Size

「コンテンツ」の「Share Buttons」にある「Skin」では、シェアボタンを塗りつぶしとかボックスタイプに設定できますが、ここで「Framed」と「Boxed Icon」を選択した時に限り、この項目が表示されます。ここでは、ボタンのボーダーの太さを調節できます。

色

ボタンの色は「Official Color」と「Custom Color」の2種類あります。「Official Color」を選択すると、デフォルトの色が使用されます。例えば、Facebookなら青で、Twitterなら水色、Google+なら赤みたいな感じですね。一方、「Custom Color」を選択すると、自分で好きな色に設定することができます。次の項目が表示されるので、好きなように設定してみてください。

メインカラー

ボタンのメインカラーを設定します。

サブカラー

アイコンの色を設定します。「サブカラー」に関しては、「コンテンツ」の「シェアボタン」にある「スキン」で「フレームつき」以外を選んだ際に機能します。また、「普通」と「ホバー」が表示されていますが、「普通」は通常時のボタンの設定、「ホバー」はマウスカーソルが置かれた時の設定になります。

書体

「コンテンツ」の「View」で「Icon & Text」もしくは「Text」を選んだ場合、ここでテキストの書体を変更することができます。