Emanon設定 SNSは、SNSフォローボタンとSNSシェアボタンの表示指定が可能です。SNSフォローボタンは、ヘッダー上部とページ下部に配置できます。SNSシェアボタンは、ページ本文の上部・下部と、スクロール追従型の配置が可能です。

SNS設定

WordPress管理画面にログイン後、メニュー名「Emanon設定」をクリックし、タブ「SNS」をご覧ください。

Emanon設定-SNS

SNS URL設定

Webサイト訪問者にフォローを促したいSNSのURLを入力します。入力したURLは、SNSフォローボタンのリンクとして反映されます。

SNSフォロー設定

フォローボタンを表示したいSNSにチェックを入れます。Twitter・Facebook・Instagram・LINE・YouTube・Linkedinは、SNS URL設定でURLの入力が必要です。

[ヘッダー]の表示[PC]

ヘッダー上部のまたはにSNSフォローボタンの配置が可能です。スマホからWebサイトを表示した場合、SNSフォローボタン[ヘッダー]は非表示となります。

SNSフォローボタン[ヘッダー]の表示例

SNSフォローボタン[ヘッダー]は、ヘッダーメニューの右上または左上に表示されます。

SNSフォローボタン[ヘッダー]のアイコンの色を各SNSのブランドカラーに変更したい場合、外観 > カスタマイズ > 配色設定 > ヘッダー設定でSNSブランドカラーを有効にしてください。

[ページ]の表示

投稿ページと固定ページ(トップページに指定した固定ページ適用外)の下部にSNSフォローボタンを表示します。ページの編集画面にてアイキャッチ画像が設定されている場合、背景画像としてアイキャッチ画像が反映されます。アイキャッチ画像が未設定の場合は、背景色としてプライマリー(外観>カスタマイズ>配色設定>ベース配色設定で指定)が反映されます。

マイクロコピーとは、ボタンフォームなどWebサイトの訪問者に行動を促すパーツ周辺に配置する短い文章(例:最新情報をお届けします)です。Webサイトの訪問者が抱く不安感の軽減行動するメリットを伝え、ボタンのクリックやフォームの入力などを後押します。

SNSフォローボタン[ページ]の表示例

配色設定

メニュー名「外観」>「カスタマイズ」>「配色設定」>「ページ本文設定」をクリックします。タイトルやマイクロコピーの文字色や背景画像がない場合の背景色は、背景色[SNSフォローボタン(ページ)]文字[SNSフォローボタン(ページ)]で指定できます。

SNSボタンスタイルを変更する設定

メニュー名「外観」>「カスタマイズ」>「デザイン設定」>「ページ本文設定」に進みます。SNSフォローボタン[ページ]のSNSボタンスタイルを「通常」から「アイコンのみ」に指定すると下記の表示例になります。

SNSフォローボタン[ページ]の表示「アイコンのみ」

アイキャチ画像を背景画像に適用しない設定

SNSフォローボタン[ページ]の背景画像に投稿ページや固定ページのアイキャッチ画像を適用したくない場合、メニュー名「外観」>「カスタマイズ」>「デザイン設定」>「ページ本文設定」に進み、 SNSフォローボタン[ページ]の背景画像を有効をオフにします。

SNSフォローボタン[ページ]の背景画像を有効をオフにすると下記のように背景色のみの表示になります。

スマホでタイトルの一部を改行する設定

SNSフォローボタン[ページ]のタイトルをスマホで改行を加えたい場合、次のHTMLを挿入します。u-display-spは、スマホでWebサイトをみた場合にdisplay: block;が適用されるclassです。

<br class='u-display-sp'>
入力例

ハンバーガーメニュー[左サイド]の表示

外観>カスタマイズ>デザイン設定>ハンバーガーメニュー設定>ハンバーガーメニュー[左サイド]が有効時に適用します。

ハンバーガーメニュー[左サイド] のSNS表示例

SNSシェア設定

SNSシェアボタンで表示したいSNSにチェックを入れてください。

投稿ページ・固定ページ(トップページに指定した固定ページ適用外)の上部または下部にSNSシェアボタンを配置(参照:図[1])することが可能です。SNSシェア[追従型:PC]とは、画面スクロールに追従する縦配置のSNSシェアボタンです。SNSシェア[追従型:PC]は、パソコンからWebサイトを表示した場合のみ適用されます。(参照:図[2]

Twitter設定

ページをTwitterでシェアした際に「メンションの表示」が可能です。SNSプロフィールURL設定で入力したTwitter URLから@Twitterユーザー名を自動で抽出し、ツイート本文の末尾に@Twitterユーザー名を挿入する機能です。

メンションの表示例

赤枠の@innocordがTwitterユーザ名です。

クリップボード設定

ページURLをコピーするボタンを表示します。メール本文やSNSの投稿欄にページURLをコピー&ペーストするのに便利な機能です。

クリップボードの表示例

ボタンをクリックするとページURLがコピーされた状態になります。