Divi を開発している Elegant Themes にはSNSとの連携をより容易にすることができるプラグイン MONARCH もあります。Divi を購入していると MONARCH も利用できます。今回はそのインストールと設定方法を図解します。
WordPress DiviのSNSプラグイン
MONARCH のインストールと設定
１．MONARCH のインストール
MONARCH をインストールするには、まず、Elegant Themes のサイトからインストールファイルをダウンロードします。
１）MONARCH をダウンロードする
Elegant Themes の公式サイトを表示し、上部メニューの「 Account 」をクリックしてメンバーエリアにログインします。
 | メンバーエリアの「 PRODUCT DOWNLOADS 」の中から、 |
 | 「MONARCH」を探して「DOWNLOAD MONARCH」をクリックし、monarch.zip をダウンロードします。 ダウンロードフォルダ等、わかりやすい場所に保存します。
|
２）MONARCH をインストールする
ワードプレスダッシュボードの、
 | 「プラグイン」＞「新規追加」をクリックします。 |
 | プラグインの新規追加の画面で、「プラグインのアップロード」をクリックします。 |
下記のように表示されるので、「ファイルを選択」をクリックします。
 | 先ほどダウンロードしたファイルを保存した場所を開き、 monarch.zip を選択し開きます。 |
 | 「今すぐインストール」をクリックします。 |
 | インストールが終わったら有効化します。 |
２．MONARCH の設定をする
１）MONARCH の設定場所
MONARCH の設定を行うには、
 | 「ツール」＞「Monarch Setteings」をクリックします。 |
２）SOCIAL SHARING （記事のシェア）の設定をする
(1) LOCATIONS
記事のシェアボタンの設置場所を設定できます。それぞれアイコンの位置に表示されます。クリックして設定すると緑色のチェックマークがつきます。再度クリックすると外れます。ちなみに POP UP はページを表示しているとポップアップしてくるので正直うっとうしいです。
 | チェックを入れたら最後に「SAVE CHANGES」をクリックします。 |
SIDEBAR状のアイコン表示だとパソコンだったら邪魔にもならないし追従するので良いと思います。
(2) NETWORKS
NETWORKS で実際に表示させるSNSを設定します。
 | 「ADD NETWORKS」をクリックします。 |
表示させることができるSNSの一覧が表示されるので、表示させたいもののアイコンをクリックして選択し、最後に「Apply」をクリックします。
選択したSNSが下記のように表示されます。
 | SNSのアイコンの右側の枠に「表示名称」とSNSの「@を除く名前」とが設定できます。 |
 | 消したい場合はSNSアイコンの「－」マイナスをクリックします。 |
| 設定したら最後に「SAVE CHANGES」をクリックします。 |
(3) SIDEBAR
- CHOSE ICON STYLE：アイコンのスタイルを選べます
- CHOSE ICON SHAPE：アイコンの形を選べます
- DISPLAY SETTINGS：
Sidebar Orientation：サイドバーの配置を左右選べます
Intro Animation：アニメーションを選べます
Display Share Counts：シャア数を表示できます
Display Total Shares：トータルシェア数を表示できます
Display ‘All Networks’ Button：「すべて」のアイコンを表示させるかどうか選択できます
Add Icon Spacing：アイコンとアイコンの間に隙間を入れます
Hide On Mobile Devices：モバイルデバイスで消すかどうか選択できます - COLOR SETTINGS：Use Custom Colors にチェックを入れることで色を選択できます
Use Custom Colors
Background Color
Hover Background Color
Icon Color
Hover Icon Color - POST TYPE SETTINGS：どこに表示させるかを選べます
Home：ホームページ
Post：投稿ページ
Page：固定ページ
Project：プロジェクトページ
(4) INLINE
ほとんどの設定項目が上述のSIDEBAR設定と同じなので、INLINE設定にだけ存在するものについて記述します。
- Choose Location：記事の上か下か両方か
- Icon Alignment：アイコンの水平配置位置
- Number of Columns：カラムの数
- Display Network Names：名称表示の有無
- Outer Text Color：外部の文字の色（トータル数等表示させた場合のみ）
- Remove Icon Spacing：アイコン間の隙間をなくせます
他の配置については今回は使わないので割愛します。設定は英語ですが簡単なのでわかると思います。
３）SOCIAL FOLLOW
SNS フォローを表示させるための設定を行います。
(1) NETWORKS
SOCIAL FALLOW の NETWORK をクリックします。
| 「ADD NETWORKS」をクリックします。 |
フォローを表示できるSNSの一覧が表示されるので、表示させたいものにチェックを入れ「Apply」をクリックします。
それぞれのSNSアイコンの右側、下記の赤枠のところに、リンクさせたいアカウントのリンクアドレスを入力します。SNSの種類によっては、アカウント名の入力枠もあります。
| 設定したら最後に「SAVE CHANGES」をクリックします。 |
３．MONARCH による SNS の表示サンプル
１）SIDEBAR
画面の左あるいは右に配置できる、細長い棒状のアイコンによる表示です。
２）INLINE
記事あるいは固定ページ内の上、下、あるいはその両方に配置できる、アイコンのリストです。
３）POP UP
サイトの訪問者に、設定したタイミングで、SNS のパネルをポップアップ表示させます。
４）FLY IN
画面の隅に飛び込むようにSNSのパネルを表示します。
５）ON MEDIA
サイトのメディアをホバー（マウスオーバー）した際に、上に重なるようにアイコンを表示させます。
MONARCH を利用することで非常に便利にサイトにSNSのボタンを設置できます。Divi を利用されているなら無料で利用できますので、ダウンロードしてみてください。
ワードプレス Divi レッスン Diviの使い方図解
写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。
