Diviのソーシャルメディアのフォローモジュールの使い方

こんにちは、根本です。今回は、Diviのソーシャルメディアのフォローというモジュールの使い方をご紹介していきます。

Diviのソーシャルメディアのフォローモジュールとは？

ソーシャルメディアのフォローモジュールでは、SNSのフォローボタンを埋め込むことができます。埋め込んだページで直接いいね！を押してもらったり、フォローしてもらうのではなく、それぞれのSNSのページに飛んでもらって、いいね！なりフォロワーになってもらいます。

コンテンツ設定

まず、「コンテンツ」の設定を確認していきます。デフォルトでFacebookとTwitterの2つのアイコンが追加されていますが、詳しい設定はギアアイコンで、複製する場合はギアアイコンの右のアイコンで、削除する場合はゴミ箱アイコンで行います。全く新しいアイコンを追加する際は、プラスボタンをクリックします。

では、ギアアイコンをクリックして、設定をしていきましょう。まずは「ネットワーク」です。ここで、使用するSNSの種類を選択します。

次の「リンク」では、SNSのプロフィールリンクを入力します。

最後の「背景」では、アイコンのメインカラーを設定します。基本的にデフォルトのままでOKだと思いますが、サイトのデザインに合わせて黒で統一してみたりしてください。

アイコン

• リンク先：アイコンをクリックした際に、「同じウィンドウで」開くのか「新しいタブで」開くのかを選択します。
• フォローボタン：「オン」に切り替えると、アイコンの右側に「フォロー」というテキストを表示することができます。

デザイン設定

属性

「属性」では、ソーシャルアイコンをモジュールの中のどの位置に設置するのかを設定します。

アイコン

• アイコンの色：ソーシャルアイコンの色を設定します。
• カスタムアイコンサイズを使用：「はい」に切り替えることで「アイコンフォントサイズ」が表示され、アイコンの大きさを調節できるようになります。
• アイコンフォントサイズ：アイコンの大きさを調節します。

テキスト

• テキストの色：フォローボタンのテキストの色を「暗い」色にするか、「明るい」色にするか選択します。
• 文字サイズ：フォローテキストのつけるシャドー効果を設定します。

フォローボタン

• フォローボタンにカスタムスタイルを使用：「はい」に切り替えると以下の設定項目が表示され、フォローボタンの細かい設定が可能になります。
• フォローボタン 文字サイズ：フォローボタンの文字の大きさを設定します。
• フォローボタン テキストカラー：フォローボタンの文字色を設定します。
• フォローボタン Background：フォローボタンの背景色（メインとなる色）を設定します。
• フォローボタン ボーダー幅：フォローボタンのボーダーの幅を調節します。
• フォローボタン ボーダーの色：フォローボタンのボーダーの色を設定します。
• フォローボタン 境の半径：フォローボタンの角の丸みを調節します。
• フォローボタン 文字間隔：フォローボタンテキストの字間を調節します。
• フォローボタン フォント：フォローボタンテキストのフォントを選択します。
• フォローボタン ソフトライト：フォローボタンテキストの書体を変更できます。
• フォローボタン 書式のコピー：フォローボタンテキストの書式を設定します。
• フォローボタン 文字サイズ：フォローボタンテキストのシャドウの設定ができます。
• フォローボタンのマージン：フォローボタン単体のマージンを設定できます。
• フォローボタンのパディング：フォローボタン単体のパディングを設定できます。
• ボタンのボックス影：フォローボタンにシャドウをつける場合は、こちらからデザインを選択します。