Elementorのソーシャルアイコンウィジェットの使い方
- 2022年2月17日
- 2022年2月17日
- Elementorの使い方
- Elemenotrの使い方コース
多くのWebサイトのフッターやヘッダーにSNSにリンクするアイコンを見かけることってよくありますよね？
SNSのアイコンをサイトに設置したいなら、Elementorの一般ウィジェット、『ソーシャルアイコン』を使用すれば簡単に設置することが可能です。
ソーシャルアイコンウィジェットには、メジャーなものはもちろんたくさんの種類のソーシャルアイコンが最初から搭載されていますし、欲しいアイコンが見つからなければSVGをアップロードしアイコンを追加することもできます。
Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。
ソーシャルアイコンウィジェットの使い方を動画でご覧になりたい方はこちらからどうぞ！
ソーシャルアイコンウィジェットの挿入
『ソーシャルアイコン』ウィジェットをカラムにドラッグ＆ドロップで挿入します。
するとデフォルトで『Facebook』『Twitter』『YouTube』のアイコンが表示されます。
コンテンツタブの編集
ソーシャルアイコン
『ソーシャルアイコン』ではアイコンを追加・複製・削除・並び替えをすることができます。
- アイコンを追加：『＋項目を追加』をクリックします。
- アイコンを複製：各項目名の左側のボタンをクリックするとその項目のアイコンが複製されます。
- アイコンを削除：各項目の一番左側の『×』をクリックするとその項目（アイコン）は削除されます。
- アイコンを並び替え：エディターの項目名をドラッグドロップでアイコンを自由に並び替えすることができます。
なお、アイコンの並び順はエディターの上から下に表示された順番で編集画面上に左から右に表示されます。
また各項目名をクリックすると、その項目のエディターが上記のように開きます。
項目を追加
『＋項目を追加』すると上記画面のようにアイコンが追加されます。
デフォルトでWordPressのアイコンが表示されます。
アイコン
『アイコン』ではアイコンをアイコンライブラリーから選択し、自由に変更することができます。
欲しいアイコンがアイコンライブラリーで見つからなかった場合は自分でSVGファイルをアップロードして追加することができます。
リンク
『リンク』にアイコンをクリックしたときのリダイレクト先のURLを記入します。
色
『色』ではソーシャルアイコンの色を変更することができます。
- 公式カラー（デフォルト）：公式カラーは、各SNSの公式から指定された配色になります。
- カスタム：メインカラー（背景色）とサブカラー（アイコンの色）をカラーピッカーより自由に変更することができます。
形状
『形状』ではアイコンを囲む枠の形を以下より選択することができます。
- 丸み（デフォルト）
- 円
- 正方形
カラム
『カラム』はアイコンのカラム数を『自動』（デフォルト）または最小1〜最大6の間で変更することができます。
上記はカラム数を『6』に設定したときの表示画面です。
1から6
カラム数を1から6で設定した場合、必ずそのカラム数で表示されます。
例えば、カラムで設定した数のアイコンの合計幅がカラム幅を上回る場合は、上記画面のようにアイコンが重なり合って表示されます。
自動（デフォルト）
『自動』はアイコンのサイズによりカラム数が決まります。
アイコンが重ならずにカラム幅に収まる数で配置され、はみ出る分は改行されます。
配置
『配置』はアイコンの配置を『左 / 中央 / 右』のいずれかで選択することができます。
- 左：カラムの左端に一番左側のアイコン左側面が合わさる
- 中央（デフォルト）：カラムの中央とアイコンのちょうど中央に当たる部分が合わさる
- 右：カラムの右端と一番右側の右側面が合わさる
上記は上から左、中央、右の各配置の表示サンプルです。
スタイルタブの編集・アイコン
色
スタイルタブの『色』で『カスタム』を選択すると、アイコンの『メインカラー』（背景色）と『サブカラー』（アイコンの色）を変更することができますが、すべてのアイコンの色が統一されます。
※デフォルトは『公式カラー』に設定されています。
もし各アイコンごとに色をカスタムしたい場合は、『コンテンツタブ』の『色』でアイコンの色を変更してください。
サイズ
『サイズ』ではアイコンのサイズを『最小値6〜最大値300』の間で変更することができます。
※デフォルトのサイズは『25』の値に設定されています。
パディング
『パディング』はアイコンを囲む枠の縁からアイコンまでの距離のことです。
パディングの値は『最小値0〜最大値5』の間で0.1刻みで変更することができます。
※デフォルトの値は『0.5』に設定されています。
間隔
『間隔』は横に隣り合ったアイコンの間のスペースを『最小値0〜最大値100』の間で変更することができます。
上記は間隔の値を『100』（最大値）にしたときの表示画面です。
なお、値を『0』にするとアイコンの間に隙間はなく、ピッタリと隣合わせになります。
※デフォルトの値は『10』に設定されています。
行ギャップ
『行ギャップ』は縦に隣り合ったアイコンの間のスペースを『最小値0〜最大値100』の間で変更することができます。
上記は行ギャップの値を『100』（最大値）にしたときの表示画面です。
※デフォルトの値は『0』に設定されています。
ボーダー(枠線）の編集
『ボーダー』とは、アイコンを囲む枠線のことです。
ボーダーに関わる以下の編集が可能です。
- ボーダータイプ：枠線の線種一覧のリストより選択することができます。
- 幅：枠線の幅を上下左右でそれぞれ設定が可能です。
- 色：枠線の色をカラーピッカーから」自由に選択することができます。
- 枠線の丸み：枠線の丸みの値を上下左右でそれぞれ設定が可能です。
くわしいボーダー（枠線）の説明については、【Elementorの『画像』ウィジェットの使い方】の記事の同セクションを参考にしてください。
スタイルタブの編集・アイコンマウスオーバー
枠線の色
『枠線の色』ではアイコンにホバーしたときの枠線の色を変更することができます。
ホバー時のアニメーション
『ホバー時のアニメーション』はポインターがアイコンにマウスオーバーしたときに付くアニメーションをリストの中から選択することができます。
上記はホバー時のアニメーションを『Wobble Skew』に選択したときのサンプル動画です。
アニメーションの種類はたくさんありますので、ぜひ色々と試してみてください。
『ソーシャルアイコン』ウィジェットはサイトにクリック一つでSNSにリンクする各種ソーシャルネットワークのアイコンを設置することのできるウィジェットです。
見た目もアイコンだけなのでとてもシンプルで使いやすいですね。
おしゃれなサイト制作にぜひ、ソーシャルアイコンウィジェットを取り入れてみてはいかがでしょうか？
また、ソーシャルアイコンウィジェットに似たウィジェットでSNSのページのシェアを閲覧者に促すこのとできる【Elementor Proのシェアボタンウィジェットの使い方】というものもありますのでよかったら参考にしてください！※なおこちらはElementor Pro（有料版）のウィジェットになります。
Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。
