Wordpressテーマ【DIVI】:サブチュートリアル  SNSシェアプラグインを使ってアクセス数を増やそう!【MONARCH】 – 初心者のためのWordpress完全マニュアル

誰でも作れる低予算のウェブサイト作り

TUTORIAL BLOG


このブログでは、初心者でも分かりやすいよう、WORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、オススメのプラグインの紹介や使い方、SEO対策やアフィリエイトの運営方法まで、STEP BY STEPで紹介しています。

WordPressテーマ【DIVI】:サブチュートリアル  SNSシェアプラグインを使ってアクセス数を増やそう!【MONARCH】

September 03, 2017

monarch thumbnail

いつも【初心者のためのWordpress完全マニュアルブログ】をご覧いただきありがとうございます。
Webサイトは誰でも作れる!このブログでは、Web開発知識や経験のない初心者の方でも、ドラッグ&ドロップなどの簡単操作でできるウェブサイト作りを提案しています。

今回は世界人気NO.1Wordpressテーマ【DIVI】のサブチュートリアルとして、 Diviが会員の方に無料で配布しているSNSシェアプラグイン【MONARCH】が、簡単に設定できてオシャレなデザインなので、ご紹介してみたいと思います。

このプラグインを使うと下の画像の様にいろんなSNSのアイコンのバーが現れます。ビューワーの方がこのアイコンをクリックすると、あなたのウェブサイトやブログ記事をSNSでシェアしてくれる便利なプラグインなんです。

monarch サンプル

 

FacebookやTwitterなどのSNSを使うことによって、あなたのウェブサイトの集客数を大幅にアップすることができます!しかもDIVIを一度購入した方なら、無料でダウンロードできちゃいます。

 

今回はDIVIテーマを使ったチュートリアルとなります。Diviテーマを知らないという方は、下のリンクにてDIVIテーマのStep By Stepチュートリアルをご覧いただけますので、興味がある方は是非のぞいてみてください。

Elegant Theme: https://www.elegantthemes.com

DIVIテーマ Step by Step チュートリアルhttps://wpbeginnertutorial.com/divi_tutorial1/

 



 

 MONARCHの使い方

 

①  MONARCHをダウンロードをする。

まずはこちらをクリックして、 Elegant Themeのオフィシャルサイトにアクセスします。

ログインして、早速MONARCHをダウンロードしてみます。

monarch tutorial screencapture

 

ログインすると、 Member Areaという画面に飛ぶので、ここからMONARCHをダウンロードします。Downloadボタンをクリックすると、 monarch.zipファイルが自動でダウンロードされます。

monarch tutorial screen capture

 

② プラグインを追加する。

次にWordpressのダッシュボードにアクセスして、先ほど追加したMONARCHのzipファイルをアップロードします。

プラグイン  >> 新規追加から新規プラグインを追加します。

monarch tutorial screen capture

 

ファイルをアップロードするをクリックして、先ほどダウンロードしたzipファイルをアップロードします。

monarch tutorial screen capture

 

monarch tutorial screen capture

 

正常にプラグインが下の画像の様にインストールされたら、プラグインを有効化します。

monarch tutorial screen capture

 

③ プラグインを設定する。

プラグイン >> インストール済みプラグインをクリックすると、先ほど追加した Monarfch Pluginが一覧に追加されているので、 Settingをクリックします。

monarch tutorial screen capture

 

設定を画面をに行くと、この様な画面が表示されますので、まずは 左サイドバーのLOCATIONをクリックして、SNSのアイコン一覧を表示させたい場所を洗濯します。今回私は、SIDEBARを選択してみました。

 

次に表示させたいSNSを選択します。

左サイドバーからNETWORKSをクリックして、 MANAGE NETWORKSの ADD NETWORKSをクリックすると一覧からお好きなSNSを追加することができます。

monarch tutorial screen capture

 

monarch tutorial screen capture

 

また一度選択したSNSは、アイコンにマウスを当てると現れる -ボタンをクリックすることによって削除できます。

monarch tutorial screen capture

 

次に左サイドバーから SIDEBARをクリックして、アイコンのスタイルやバーの配置などを細かい設定をします。

CHOOSE ICON STYLE: アイコンのホバーアニメーションが選べます。

CHOOSE ICON SHAPE: アイコンの形が選べます。

monarch tutorial screen capture

 

その他細かい設定は以下の通りです。

Sidebar Orientation: サイドバーの配置を右か左か選べます。

Intro Animation:最初がアイコンが出現するときのアニメーションを選択できます。

Display Share Counts: シェアされた数を表示するかを選べます。

Minimum Count Display: カウントが表示される一番小さい数を選択できます。

Display Total Shares: トータルシェアされた数をアイコンの上に表示させることができます。

Display ‘All Networks’ Button: 先ほど選択しなかったSNSアイコンを、ユーザーの方が SNSバー一覧の下に表示される...ボタンをクリックすることによって、一覧表示させることができます。

Add Icon Spacing: アイコン間にスペースを挿入できます。

Hide On Mobile Devices: モバイル端末でアクセスした時に、このSNSシェアプラグインを表示させるかどうかを選べます。

monarch tutorial screen capture

 

その他、アイコンの色をカスタマイズしたり、背景色を選択することもできます。

POST TYPE SETTINGとは、SNSシェアリンクを表示させるページを選択することができます。例えば、HOMEボタンのチェックを外すと、トップページでSNSシェアリンクが表示されなくなります。

monarch tutorial screen capture

 

設定が全て終了したら、 SAVE CHANGESボタンをクリックして、設定を保存します。

Screen Shot 2017-09-02 at 12.08.30 PM

 

ホームページに戻ってみると、画像の様にSNSのシェアアイコンが表示される様になります ^^

monarch tutorial screen capture

 

まとめ

 

今回のDIVIサブチュートリアル、 SNSシェアリンクプラグイン【MONARCH】はいかがだったでしょうか?

一度DIVIテーマを購入すると、この様にElegant Themesが提供しているサービスは全て無料で使えるのも、 DIVIテーマの魅力の1つです^^

またサードパーティが開発したArticle CardなどのDIVI専用のプラグインもたくさんネット上に出回っていますので、色々を検索してみてください ^^

ウェブサイトを運営するにあたって、SNSは今では集客のツールとして欠かせないものの一つです!ウェブサイトを作ったら、ぜひ取り入れましょう。

 

今回もわからないところや、質問等ございましたら、コメント欄やSNSまたはメールにてお答えします。また、Wordpressに関して使ってみたいけど、使い方が分からないプラグインやテーマ、こんな事してみたいけどどういうプラグインを使ったらいいか分からない等のリクエストもどしどし受け付けてます!

お気軽にご連絡ください!

 

 

この記事をシェアする!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Powered by Shutterstock