MB blog

こちらは主に自分用のメモです。

Divi のソーシャルメディアフォローモジュールのカスタマイズ(Google レビューへリンク)


スポンサードリンク

Divi 「ソーシャルメディアのフォロー」モジュール

各種ソーシャルメディアへのフォローを促すアイコンを設置するモジュールがあります。
f:id:lake_michigan:20190823135221p:plain

事前定義されたいくつかのソーシャルアイコンを選べるようになっていますが、ここに存在しないものをモジュールからアップすることはできません。
f:id:lake_michigan:20190823135335p:plain
今回は、Google Map のレビューへのリンクを貼りたいと思います。

また、マウスオーバー時に "title" 属性から「twitter をフォロー」などの事前定義メッセージが表示されてしまいますが、これもモジュールからは編集不可。
Google Map のレビューをチェック」などにに変更したいと思います。

1. Socicon で目当てのアイコンをさがす

www.socicon.com

f:id:lake_michigan:20190823150420p:plain

アイコンの ID (ここでは \e937), カラーコード、そして "Download" ボタンを押した先にある URL をメモしておきます。・

2. ソーシャルメディアフォローモジュールを配置・設定

まずは適当なソーシャルメディアを選択してモジュールを設定します。今回は、dribbble を選択。
そして、モジュールの「背景」で、1. でメモったカラーコードに背景色を変更しておきます。

3. コードモジュールを設置

ソーシャルメディアフォローモジュールのすぐ上に、コードモジュールを挿入します。
f:id:lake_michigan:20190823142548p:plain

4. コードモジュールにコード追加

Socicon スタイルシートの読み込みと、css / jQuery の追記を行います。

<link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?u8vidh">

<style>
li.et_pb_social_icon.et-social-dribbble a.icon:before {
   font-family: "Socicon" !important;
   content: '\e937' !important; 
}
</style>

<script>
jQuery(function($){
  $('.et-social-dribbble a').attr('title', 'Google Map のレビューをチェック');
});
  
</script>

こんな感じに修正できました!

f:id:lake_michigan:20190823151030p:plain