ホーム » ソーシャルアイコンの使い方

ソーシャルアイコンの使い方

ソーシャルアイコンの使い方

InstagramやYouTubeなどの公式アカウントへの入口を作れます。

このページでできること
公式SNSへのリンクを並べる

スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で行います。

① 「ソーシャルアイコン」を追加する

  1. 編集したいページを「Elementorで編集」で開きます。
  2. 左上の「+」(要素を追加)を押し、「ソーシャルアイコン」で検索します。
  3. 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。

② SNSごとのURLを設定する

ソーシャルアイコン:コンテンツの実際の設定画面1234
1 SNSの項目 / 2 アイコン / 3 リンク / 4 項目を追加
赤い番号は手順の番号に対応しています。
  1. 一覧から「Facebook」などの項目を開きます。
  2. 「アイコン」で使うSNSを選びます。
  3. 「リンク」に自分のアカウントページのURLを入力します。
  4. 「項目を追加」で必要なSNSを増やし、「形状」と「カラム」で並び方を決めます。
ここを確認:各アイコンが自分のアカウントにリンクしている。

③ 見た目と表示を確認する

ソーシャルアイコン:スタイルの実際の設定画面12
1 色 / 2 サイズ
赤い番号は手順の番号に対応しています。
  1. 「スタイル」→「アイコン」で公式カラーかカスタム色を選びます。
  2. 「サイズ」と「間隔」で押しやすい大きさにします。
  3. スマホで横からはみ出す場合は、サイズや列数を調整します。
入力・使い方の例

Instagramのアイコン → 自社のInstagramプロフィールへ移動

④ スマホで確認して保存する

上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。

完了チェック
  • 各アイコンが自分のアカウントにリンクしている。
  • サンプルのSNSや空リンクが残っていない。

スマホ表示の調整方法保存・公開の手順

うまくいかないとき

記事のシェア画面が出ない

ソーシャルアイコンはアカウントへのリンクです。記事を共有するシェアボタンとは異なります。

画面は撮影時のバージョンです。同じ名前のAtomic版・Pro版・追加プラグインのウィジェットは設定が異なる場合があります。


← Elementor使い方マニュアルの目次へ