ソーシャルメディアフォローモジュールをモナークのように修正する方法

公開: 2017-08-07

今日のチュートリアルでは、ソーシャルメディアフォローモジュールを特定のニーズに合わせる方法を紹介します。ソーシャルメディアフォローは、どのWebサイトのどのページからもめったに欠落しないモジュールです。これは、ソーシャルメディアチャネルをWebサイトに接続するための主な方法の1つです。あなたのウェブサイトとソーシャルメディアチャンネルの間の望ましい接続を達成するのを助けるために、私たちはモナークを持っています。ウェブサイトのソーシャルメディアフォローボタンを簡単に表示するのに役立つプラグイン。ただし、Diviビルダーを使用してモナークの結果の一部を達成したい場合は、この投稿が役立つ場合があります。

Monarchプラグインが提供するものの1つである、Webサイト用の固定ソーシャルメディアフォローモジュールを作成する方法を紹介します。左側または右側（モナーク内の標準設定）に配置するだけでなく、ページの上部と下部に固定する方法も示します。ページの上部に貼り付けるだけでなく、ソーシャルメディアフォローモジュールをWebサイトのプライマリメニューの下に表示する方法（プライマリメニューが固定されているかどうかに関係なく）を示す部分も含まれます。。

以下の最終結果を見てみましょう。

左側の例

ソーシャルメディアがフォロー

右側の例

ソーシャルメディアがフォロー

上の例（標準）

ソーシャルメディアがフォロー

固定ナビゲーションなし

ソーシャルメディアがフォロー

固定ナビゲーション付き

下の例

ソーシャルメディアがフォロー

ソーシャルメディアフォローモジュールをモナークのように修正する方法

私たちのYoutubeチャンネルを購読する

一般的な手順

ソーシャルメディアフォローモジュールをページに追加する基本的な手順はすべての例で同じであるため、これを1回だけ示します。右側、上部または下部の配置で同じ結果を達成したい場合は、この投稿の次の部分で説明するように、最初にソーシャルメディアフォローモジュールを追加する必要があります。

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

これを簡単にするために、ソーシャルメディアフォローモジュールをページの最初のセクションに追加します。そうすることで、将来変更を加えたいときにどこにあるかがすぐにわかります。このモジュールには固定位置を割り当てるため、このモジュールに個別の行は実際には必要ありません。

ソーシャルメディアにソーシャルメディアチャネルを追加するFollowModule +

次に行う必要があるのは、必要なソーシャルメディアチャネルをソーシャルメディアフォローモジュールに追加することです。モジュール設定を開き、[新しいソーシャルネットワークの追加]をクリックします。それが済んだら、追加したいソーシャルメディアネットワークを選択して、それにURLを割り当てることができます。

ソーシャルネットワークごとに、ソーシャルネットワークに一致するアイコンの色が自動的に割り当てられます。ただし、自分のWebサイトのスタイルで色を使用したい場合は、[デザイン]タブで別の色を選択できます。作成方法を示す例では、4つのソーシャルネットワークを含めます。 Facebook、Twitter、Google +、LinkedIn。標準の色を使用する代わりに、ソーシャルネットワークのそれぞれに同じ色を与えますが、不透明度は異なります。また、重要度に応じてソーシャルメディアチャネルを注文します。

Facebookの設定

「新しいソーシャルネットワークの追加」をクリックします。ソーシャルネットワークオプションで、Facebookを選択します。 [コンテンツ]タブにいる間に、FacebookソーシャルメディアチャネルにリンクされたURLを追加します。

次に、[デザイン]タブに移動します。この場合、Facebookは最も重要なソーシャルネットワークです。だからこそ、最も注目を集める色合いを与えるつもりです。使用した色は「rgba（59,89,152,0.94）」です。

Twitterの設定

次に、新しいソーシャルネットワークを追加します。今回はFacebookを選ぶ代わりに、Twitterを選んでください。同じ[コンテンツ]タブにURLを追加し、[デザイン]タブに移動します。 [デザイン]タブで、背景色として「rgba（59,89,152,0.76）」を選択します。この場合、Twitterは重要なソーシャルメディアチャネルですが、Facebookほど重要ではありません。そのため、2番目の列になり、少し透明度が高く、目立たない色になっています。

LinkedInの設定

[コンテンツ]タブのLinkedInソーシャルネットワークに対して同じプロセスを繰り返し、[デザイン]タブに移動します。 [デザイン]タブで、アイコンに「rgba（59,89,152,0.6）」の色を割り当てます。

Google+の設定

そして最後になりましたが、重要なことです。 Google+ソーシャルアイコンを追加します。 URLを入力し、[デザイン]タブに移動します。これは、この例のリストに追加したい「最も重要でない」ソーシャルネットワークであり、「rgba（59,89,152,0.42）」アイコンの色になります。

左側のサイドバーを作成するソーシャルメディアフォロー

ソーシャルメディアがフォロー

作成方法を示す最初の固定ソーシャルメディアフォローモジュールは、ページの左側にあります。これは最も頻繁に使用されるものであり、すぐにモナークについて最も考えさせるものかもしれません。最初に一般的な手順に従い、この投稿の次の部分にあるCSSコードを追加して続行します。 CSSコードを追加する2つの方法を紹介します。テーマオプション、特に1ページに。この例の後、他の例でも2つのオプションから選択できます。

テーマオプションにCSSコード行を追加する

追加のCSSコードを追加する方法の1つは、テーマオプションを使用することです。この方法は、Webサイト全体に効果を作成する場合に最も頻繁に使用されます。でも覚えておいて; この効果を使用している場合は、Webサイトの各ページ（または表示したいページ）にソーシャルメディアフォローモジュールを含める必要があります。

CSSコードをテーマオプションに追加するには、 WordPressダッシュボード> Divi>テーマオプション>一般>に移動します。 [一般]タブを下にスクロールして、CSSコードの次の行を[カスタムCSS]フィールドに追加します。

ul.et_pb_social_media_follow { 
position: fixed; 
left: 0; 
top: 35%;
padding: 0 !important; 
z-index: 999 !important;
} 
.et_pb_social_media_follow li { 
margin: 0 !important; padding: 0 !important; 
} 
.et_pb_social_media_follow li a.icon.rounded_rectangle { 
border-radius: 1px; 
margin: 0 !important; 
}

特に1つのページにCSSコード行を追加する

CSSコードを適用するのに役立つもう1つの方法は、CSSコードを特に1つのページに追加することです。この方法は、ソーシャルメディアフォローモジュールを特定の1ページのみに追加する場合に最も一般的に使用されます。この方法を使用することにより、Webサイトはソーシャルメディアフォローモジュールを含まないWebサイトの他のすべてのページにCSSコード行をロードしません。または、他のページのソーシャルメディアフォローモジュールを通常どおりに動作させたい場合は、この方法も役立ちます。

Diviビルダーの次のボタンをクリックします。

次に、CSSコードをコピーして[カスタムCSS]フィールドに貼り付けます。

右側のサイドバーソーシャルメディアを作成するフォロー

ソーシャルメディアがフォロー

次に共有するコードは、ソーシャルメディアフォローモジュールをWebサイトの右側に配置するのに役立ちます。

必要なCSSコード行

上記の例で説明したように、次のCSSコード行をテーマオプションまたは特に1つのページに追加します。

ul.et_pb_social_media_follow {
position: fixed;
top: 40%; 
padding: 0 !important; 
right: 0; 
width: 30px;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

トップソーシャルメディアを作成するフォロー

ソーシャルメディアがフォロー

次に進むと、Webサイトの上部にソーシャルメディアフォローモジュールを見つけることもできます。これは実際、ソーシャルメディアアイコンがWebサイトを通じて訪問者をフォローできるようにする非常に興味深い方法です。あまり使われないので人の目を引きます。

必要なCSSコード行

次のCSSコード行をコピーしてテーマオプションに貼り付けるか、特に1つのページに追加します。

ul.et_pb_social_media_follow {
position: fixed;
left: 45%; 
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

トップソーシャルメディアを作成するプライマリメニューの下をフォローする

ソーシャルメディアフォローモジュールをWebサイトに追加する前に示した方法では、プライマリメニューは考慮されていません。ただし、ソーシャルメディアフォローをメインメニューの下に表示し、スクロール時に一番上に戻るようにしたい場合は、投稿のこの部分が役立つ場合があります。

CSSコードを追加する

固定ナビゲーションがアクティブになっている場合とアクティブになっていない場合の両方で、CSSコードの次の行をテーマオプションに追加するか、特に1つのページに追加する必要があります。

ul.et_pb_social_media_follow {
position: fixed;
left: 45%; 
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

その後、jQueryコードも追加する必要があります。 jQueryコードは、固定ナビゲーションをアクティブにしたかどうかによって異なります。

固定ナビゲーション付き

固定ナビゲーションをアクティブにしている場合は、次のjQueryコード行をWebサイトのヘッドまたはページ内のコードモジュールに追加する必要があります。

<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
});
});
</script>

CSSコード行も使用することを忘れないでください。 jQueryコードは追加です。また、スクロールするときは、プライマリの高さが同じままであることを確認してください。これを行うには、 WordPressダッシュボード>外観>カスタマイズ>ヘッダーとナビゲーション>固定ナビゲーション設定>固定メニューの高さの最小値を選択します。

ソーシャルメディアがフォロー

固定ナビゲーションなし

ソーシャルメディアがフォロー

同じ結果を達成したいが、固定ナビゲーションがない場合、コードはわずかに異なります。

<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
else {
$("ul.et_pb_social_media_follow").css("margin-top", 0);
}
});
});
</script>

ボトムソーシャルメディアの作成フォロー

行の最後のものは、一番下のソーシャルメディアフォローモジュールです。

ソーシャルメディアがフォロー

必要なCSSコード行

次のCSSコード行をテーマオプションのカスタムCSSフィールド、または特に1つのページに追加します。

ul.et_pb_social_media_follow { 
position: fixed; 
left: 45%; 
bottom: 0; 
padding: 0 !important; 
z-index: 999 !important;
} 
.et_pb_social_media_follow li { 
margin: 0 !important; 
padding: 0 !important; 
} 
.et_pb_social_media_follow li a.icon.rounded_rectangle { 
border-radius: 1px; 
margin: 0 !important; 
}

最終的な考え

このチュートリアルでは、Monarchプラグインと同じスタイルでソーシャルメディアフォローモジュールを作成する方法を示しました。この方法を使用すると、ソーシャルメディアチャネルを共有するためだけに使用している場合は、Monarchプラグインをダウンロードする必要がありません。ソーシャルメディアを共有するには、Monarchプラグインを使用する必要があります。質問や提案がある場合; 下のコメントセクションにコメントを残してください。連絡が取れます。

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

SnopekNadiaによる注目の画像/shutterstock.com