Elementorのソーシャルアイコンウィジェットの使い方

多くのWebサイトのフッターやヘッダーにSNSにリンクするアイコンを見かけることってよくありますよね?

SNSのアイコンをサイトに設置したいなら、Elementorの一般ウィジェット、『ソーシャルアイコン』を使用すれば簡単に設置することが可能です。

ソーシャルアイコンウィジェットには、メジャーなものはもちろんたくさんの種類のソーシャルアイコンが最初から搭載されていますし、欲しいアイコンが見つからなければSVGをアップロードしアイコンを追加することもできます。

ソーシャルアイコンのサンプル

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

ソーシャルアイコンウィジェットの使い方を動画でご覧になりたい方はこちらからどうぞ!

ソーシャルアイコンウィジェットの挿入

ソーシャルアイコンウィジェットをドラッグ&ドロップでカラムに挿入

『ソーシャルアイコン』ウィジェットをカラムにドラッグ&ドロップで挿入します。

ソーシャルアイコンウィジェット挿入後の表示画面

するとデフォルトで『Facebook』『Twitter』『YouTube』のアイコンが表示されます。

コンテンツタブの編集

コンテンツタブのエディター

ソーシャルアイコン

ソーシャルアイコンのエディターを大まかに説明した画像

『ソーシャルアイコン』ではアイコンを追加・複製・削除・並び替えをすることができます。

  • アイコンを追加:『+項目を追加』をクリックします。
  • アイコンを複製:各項目名の左側のボタンをクリックするとその項目のアイコンが複製されます。
  • アイコンを削除:各項目の一番左側の『×』をクリックするとその項目(アイコン)は削除されます。
  • アイコンを並び替え:エディターの項目名をドラッグドロップでアイコンを自由に並び替えすることができます。

なお、アイコンの並び順はエディターの上から下に表示された順番で編集画面上に左から右に表示されます。

項目名をクリックすると開く追加エディターの表示画面

また各項目名をクリックすると、その項目のエディターが上記のように開きます。

項目を追加

『+項目を追加』をクリックした後のデフォルトの表示画面

『+項目を追加』すると上記画面のようにアイコンが追加されます。

デフォルトでWordPressのアイコンが表示されます。

アイコン

アイコンの選択方法を説明した画像・アイコンライブラリー/SVGをアップロード

『アイコン』ではアイコンをアイコンライブラリーから選択し、自由に変更することができます。

欲しいアイコンがアイコンライブラリーで見つからなかった場合は自分でSVGファイルをアップロードして追加することができます。

リンク

『リンク』にアイコンをクリックしたときのリダイレクト先のURLを記入します。

色・カスタム選択時のエディターの表示画面

『色』ではソーシャルアイコンの色を変更することができます。

  • 公式カラー(デフォルト):公式カラーは、各SNSの公式から指定された配色になります。
  • カスタム:メインカラー(背景色)とサブカラー(アイコンの色)をカラーピッカーより自由に変更することができます。
メインカラーとサブカラーを変更した後の表示サンプル

形状

形状・丸み/正方形/円をそれぞれ表示したサンプル画面

『形状』ではアイコンを囲む枠の形を以下より選択することができます。

  • 丸み(デフォルト)
  • 正方形

カラム

『カラム』で『6』を選択したときのサンプる表示

『カラム』はアイコンのカラム数を『自動』(デフォルト)または最小1〜最大6の間で変更することができます。

上記はカラム数を『6』に設定したときの表示画面です。

1から6

カラムで設定した数のアイコンの合計幅がカラム幅を上回っているときの表示画面(アイコンが重なり合う)

カラム数を1から6で設定した場合、必ずそのカラム数で表示されます。

例えば、カラムで設定した数のアイコンの合計幅がカラム幅を上回る場合は、上記画面のようにアイコンが重なり合って表示されます。

自動(デフォルト)

カラムの『自動』に設定したときの表示サンプル

『自動』はアイコンのサイズによりカラム数が決まります。

アイコンが重ならずにカラム幅に収まる数で配置され、はみ出る分は改行されます。

配置

配置の『左/中央/右』それぞれの表示サンプル

『配置』はアイコンの配置を『左 / 中央 / 右』のいずれかで選択することができます。

  • 左:カラムの左端に一番左側のアイコン左側面が合わさる
  • 中央(デフォルト):カラムの中央とアイコンのちょうど中央に当たる部分が合わさる
  • 右:カラムの右端と一番右側の右側面が合わさる

上記は上から左、中央、右の各配置の表示サンプルです。

スタイルタブの編集・アイコン

スタイルタブ・アイコン

スタイルタブの『色』で『カスタム(カラー)』の説明・ここで変更したメインカラー・サブカラーは全てのアイコンに適応される。

スタイルタブの『色』で『カスタム』を選択すると、アイコンの『メインカラー』(背景色)と『サブカラー』(アイコンの色)を変更することができますが、すべてのアイコンの色が統一されます。

※デフォルトは『公式カラー』に設定されています。

もし各アイコンごとに色をカスタムしたい場合は、『コンテンツタブ』の『色』でアイコンの色を変更してください。

サイズ

サイズを最小値『6』と最大値『300』にしたときの表示画面

『サイズ』ではアイコンのサイズを『最小値6〜最大値300』の間で変更することができます。

※デフォルトのサイズは『25』の値に設定されています。

パディング

パディングの説明・パディングの値を『2』にしたときの表示サンプル

『パディング』はアイコンを囲む枠の縁からアイコンまでの距離のことです。

パディングの値は『最小値0〜最大値5』の間で0.1刻みで変更することができます。

※デフォルトの値は『0.5』に設定されています。

間隔

間隔を『100』(最大値)にしたときの表示サンプル

『間隔』は横に隣り合ったアイコンの間のスペースを『最小値0〜最大値100』の間で変更することができます。

上記は間隔の値を『100』(最大値)にしたときの表示画面です。

なお、値を『0』にするとアイコンの間に隙間はなく、ピッタリと隣合わせになります。

※デフォルトの値は『10』に設定されています。

行ギャップ

行ギャップを『100』(最大値)にしたときの表示サンプル

『行ギャップ』は縦に隣り合ったアイコンの間のスペースを『最小値0〜最大値100』の間で変更することができます。

上記は行ギャップの値を『100』(最大値)にしたときの表示画面です。

※デフォルトの値は『0』に設定されています。

ボーダー(枠線)の編集

ボーダー(枠線)の編集各種の説明

『ボーダー』とは、アイコンを囲む枠線のことです。

ボーダーに関わる以下の編集が可能です。

  • ボーダータイプ:枠線の線種一覧のリストより選択することができます。
  • 幅:枠線の幅を上下左右でそれぞれ設定が可能です。
  • 色:枠線の色をカラーピッカーから」自由に選択することができます。
  • 枠線の丸み:枠線の丸みの値を上下左右でそれぞれ設定が可能です。

くわしいボーダー(枠線)の説明については、【Elementorの『画像』ウィジェットの使い方】の記事の同セクションを参考にしてください。

スタイルタブの編集・アイコンマウスオーバー

スタイルタブ・アイコンマウスオーバー

枠線の色

枠線の色を変更した後の表示画面

『枠線の色』ではアイコンにホバーしたときの枠線の色を変更することができます。

ホバー時のアニメーション

『ホバー時のアニメーション』はポインターがアイコンにマウスオーバーしたときに付くアニメーションをリストの中から選択することができます。

上記はホバー時のアニメーションを『Wobble Skew』に選択したときのサンプル動画です。

アニメーションの種類はたくさんありますので、ぜひ色々と試してみてください。


『ソーシャルアイコン』ウィジェットはサイトにクリック一つでSNSにリンクする各種ソーシャルネットワークのアイコンを設置することのできるウィジェットです。

見た目もアイコンだけなのでとてもシンプルで使いやすいですね。

おしゃれなサイト制作にぜひ、ソーシャルアイコンウィジェットを取り入れてみてはいかがでしょうか?

また、ソーシャルアイコンウィジェットに似たウィジェットでSNSのページのシェアを閲覧者に促すこのとできる【Elementor Proのシェアボタンウィジェットの使い方】というものもありますのでよかったら参考にしてください!※なおこちらはElementor Pro(有料版)のウィジェットになります。

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

Naomi Suzuki

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

目次

コメントする

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

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

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

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

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