Diviのプライマリメニューにソーシャルアイコンを追加する方法

専用のソーシャルメディアの存在なしに成功するウェブサイトを運営することは事実上不可能です。 Instagram、Twitter、TikTok、Facebook、またはそれらとその他の組み合わせのいずれを選択した場合でも、人々はあなたやあなたのブランドと直接やり取りしたいと考えています。 Diviのメインメニューにソーシャルアイコンがあることを確認することは、Webサイトから選択したネットワークにトラフィックを集中させるための優れた方法です。 それは速くて簡単です、そして、我々はあなたにすべてのステップを案内するつもりです。

始めましょう！

プレビュー

デスクトップ

モバイル

Diviテーマビルダーを使用してグローバルヘッダー景品をアップロードする

この記事では、TennisClubレイアウトパックとヘッダー/フッターの景品を使用します。 レイアウトパックはDiviBuilder内からダウンロードでき、ヘッダー/フッターパックはブログからダウンロードできます。 ダウンロードすると、ファイルは.zipアーカイブになります。 Diviにアップロードする.jsonファイルがあるように、必ずそれらを抽出してください。

次に、WordPressダッシュボードに移動し、 Divi – ThemeBuilderの下にあるDiviThemeBuilderを見つけます。 ページの右上隅にある上下の矢印アイコンをクリックします。 これにより、 Portabilityモーダルが開き、[インポート]タブを選択し、ダウンロードしたヘッダー/フッターの.jsonファイルを見つけて、[ Diviテーマビルダーテンプレートのインポート]をクリックします。

次に、サイトのヘッダーセクションに移動します。 ソーシャルアイコンであるため、サイトのすべてのページに表示する必要があると判断したため、グローバルヘッダーに配置します（特に指定のない限り）。

これでビルダーの中にいるはずです。 上記の指示に従った場合、アップロードした新しいヘッダーはすでに配置されているはずです。

ここにはすでにソーシャルアイコンがあることに気付くかもしれません。 ただし、これらのソーシャルアイコンは、現在取り組んでいるDiviプライマリメニューには含まれていません。 それでは、雑草の中に入りましょう。

プライマリメニューバーにソーシャルアイコンを追加する

まず最初に、行/列の構造を変更しましょう。 セクション2（ホーム/連絡先リンクのある一番下の行）で行を見つけたいと思います。

このチュートリアルでは2列の構造を選択していますが、サイトに最適なものは何でも構いません。 それを選択したら、[行の設定]に移動し、[デザイン]タブに移動します。 [サイズ設定]メニューを見つけて、[カスタムガター幅を使用]をオンに切り替えます。 ガター幅の値を1に設定します。数値を入力するか、スライダーを使用してこれを行うことができます。

緑色のチェックマークをクリックして、設定を保存します。 次に、行の設定に戻ります。 今回は、上/最初/左の列の設定ギアを選択します。

次に、[詳細設定]タブに移動します。 カスタムCSS領域を見つけて、[メイン要素]フィールドをクリックします。 このフィールド内に、次のCSSを追加する必要があります。

width:80%;

また

width:80%!important;

この要素のスタイルを設定するには、！importantタグを追加する必要がある場合があります。 大丈夫。 単一の要素であるため、パフォーマンスの問題や対処するスパゲッティコードを作成するべきではありません。

次に、[応答性]設定に移動し、同じコードを使用して、モバイルデバイスの列の幅を100％に戻します。

次に、2番目の列に対してこの手順を繰り返します。 今回のみ、デフォルト値を20％に設定し、モバイル値は100％のままにします。

これが完了したら、変更を保存して、ソーシャルメディアアイコンを追加してスタイルを設定する準備をします。

ソーシャルメディアフォローモジュールを追加する

列2の黒い+アイコンをクリックして新しいモジュールを追加し、 Social MediaFollowが見つかるまでスクロールします。 挿入します。

使用しているヘッダーに関係なく、デフォルトのソーシャルメディアアイコンはおそらくあなたのスタイルと一致しません。 また、正しく配置されません。 次のステップは、それらを正しくスタイル設定して間隔を空けることです。 Social Media Followモジュールの設定内で、[ Design] 、[ Alignment]の順に移動します。 モジュールを配置する場所を選択します。

デスクトップ用に右揃えを選択してから、応答性オプションに移動して中央に配置します。

次は、アイコンメニューにスクロールダウンします。 必要なアイコンの色を選択します。 これはFacebookのf 、Twitterの鳥、Instagramのカメラです。 たとえば、これは青い背景ではありません。

次はスペーシングです。 本当に調整が必要な主なものはトップマージンです。 1.5 vwの上マージンを適用して、メニューテキストの中央に配置します。 モバイル向けに多かれ少なかれ必要な場合は、それを調整することもできます。

次に、[コンテンツ]タブをクリックして、カスタマイズする個々のソーシャルネットワークアイコンに移動します。 サイト用に選択したアイコンごとに、これらの手順を繰り返します。

[背景]まで下にスクロールして、サイトのデザインに一致する色を選択します。 繰り返しますが、これはこの特定のアイコンの背景のみを変更することを忘れないでください。

この特定のアイコンの色を変更することもできます。 モジュール全体と同じように、[デザイン]タブと[アイコン]セクションでこれを行うことができます。 この設定は一般的な設定を上書きするため、1回限りの色が必要な場合でも、他の人に干渉することを心配する必要はありません。

次に、[デザイン]タブの下の[境界線]エントリまで下にスクロールすると、その中に[境界線の幅]が表示されます。 この値を3pxに設定してから、Diviプライマリメニューの背景から目立つ境界線の色を選択します。

この時点で、[コンテンツ]タブに戻り、表示するソーシャルネットワークアイコンごとにこれらの手順を繰り返します。 このモジュールの各アイコンで同じデザインを共有する場合は、デザインしたアイコンを右クリックして、[アイテムスタイルのコピー]を選択するだけです。

次に、スタイルを設定する他のネットワークを右クリックして、[アイテムスタイルの貼り付け]を選択します。

以上です！ 画面の右下隅にある[保存]ボタンをクリックして、全体のレイアウトを保存してください。 そうすれば、右上隅の編集画面からXを安全に外すことができます。

Divi ThemeBuilderページの左上に[保存されたすべての変更]が表示されていることを確認してください。 そうでない場合は、[変更を保存]をクリックします。 完了すると、サイトがライブになり、Diviプライマリメニューにソーシャルメディアアイコンが表示されます。

最終結果

そして、これはあなたの最終結果が似ているべきものです。

デスクトップ

モバイル

まとめ

あなたの聴衆があなたの主要なソーシャルネットワークを常に見つけることができることを確実にすることはDiviの簡単なことです。 ほんの数ステップで、無料のヘッダー/フッターパックの1つを調整して、ソーシャルメディアアイコンをプライマリメニュー（またはその他の必要な場所）に含めることができます。 幸運を！

プライマリメニューのソーシャルメディアアイコンについてどう思いますか？ どこに配置する傾向がありますか？