Luxeritas(ルクセリタス)のSNSボタンをカスタマイズしてみよう!【SNSシェアボタン(1)(2) 編】

2018年10月13日ブログ管理Luxeritas, Luxeritasカスタマイズ, SNSシェアボタン, アニメーション, ブログ管理, 初心者

SNSシェアボタンヘッダー

ぐず夫
ぐず夫
おいトリ!
いつになったらパンプキンケーキはできるんや!
トリ師匠
トリ師匠
(…パンプキンケーキ?)
よく分からんがパンプキンケーキなんぞ作ってへんよ。よっしゃ、なら今回はSNS用のシェアボタンでもさわってみるかの。
ぐず夫
ぐず夫
ぱ、パンプキン、パンプキン、ぱ、パンプ。パンプ…
トリ師匠
トリ師匠
(いよいよ壊れたんか?)

ということで、今回はLuxeritasのカスタマイズ機能を使ってSNS用のシェアボタンのカスタマイズを行いましょう。

SNSシェアボタン(1) 機能

SNSシェアボタン1選択

トリ師匠
トリ師匠
記事上、記事下などについてるSNSシェア用のボタンを設定する機能じゃの。そこまで複雑なもんでもないで、さっさと「SNSシェアボタン(1)」を選択するんじゃ。

 

① SNS カウントをキャッシュする

SNSへ投稿されたカウント情報をサーバーにキャッシュする機能。なお、以下④⑤にて「SNS通常ボタン」を設定している場合は動作しない。

トリ師匠
トリ師匠
サーバーのWAF(Web・アプリケーション・ファイアウォール)が有効のままでもカウント数をキャッシュできる親切設計や。ちなみにMixHostでもWAFは自動で有効になってるけど大丈夫やで!

● SNSカウントを非表示にしていても、カウント数を取得してキャッシュする

以下④⑤にてSNSカウントを非表示にしている場合もカウント数をキャッシュする機能。

トリ師匠
トリ師匠
カウント数はLuxeritasの管理画面で確認可能じゃ。また今度触れるわ。

② キャッシュ再構築までのインターバル

数値の反映までに必要なインターバル時間を設定する。

トリ師匠
トリ師匠
時間が短いほど数値の反映は早いかもしれんけど、そこまで気にするもんでもないと思うで。

③ 週に一度の自動キャッシュ整理

キャッシュを自動的に整理する機能。

トリ師匠
トリ師匠
カウント機能を使うなら「ゴミと判別できるキャッシュを削除」が無難やの

④ 記事上SNSボタンの種類と配置

記事上に表示するSNSシェアボタンの種類と配置を設定する機能。配置するSNSの種類はSNSシェアボタン(2)を参照。

● ボタンの種類

以下、各ボタンの表示例となります。

【 通常ボタン 】

通常ボタン

 

【 カラータイプ 】

SNSカラーボタン

 

【 ホワイトタイプ 】

SNSホワイトボタン

 

【 可変幅フラットタイプ(カラー) 】

可変フラットカラー

 

【 可変幅フラットタイプ(ホワイト) 】

可変フラットホワイト

 

【 名無しアイコンタイプ(カラー) 】

名無しアイコンカラー

 

【 名無しアイコンタイプ(ホワイト) 】

名無しアイコンホワイト

 

● ボタンの配置

SNSシェアボタンの配置を決定します。なお一部ボタンは左右寄せ不可。

【 左 】

左寄せ

 

【 中央 】

中央寄せ

 

【 右 】

右寄せ

 

● ボタン表示詳細

【 記事上のSNSボタン表示 】

記事上にSNSシェアボタンを配置します。なおチェック無しの場合は非表示のため設定は反映されません。

 

【 記事上のSNSカウント表示 】

SNSシェアボタンを使用した数を表示する機能。

カウント表示

 

【 記事上SNSボタン2段組表示 】

SNSシェアボタンを2段組に表示する機能。

二段組表示

トリ師匠
トリ師匠
可変幅のボタンや通常ボタンやと左右寄せできんとか制限はあるけど、好きなようにカスタマイズして見栄えを良くしてみてな!

 

⑤ 記事下SNSボタンの種類と配置

記事下に表示するSNSシェアボタンの種類と配置を設定する機能。項目は④記事上SNSボタンの種類と配置と同様。説明は省略。

 

⑥ 記事下のSNSシェアメッセージ

記事下のシェアメッセージ(文言)を設定する。

記事下のメッセージ例

 

⑦ トップページリスト下にSNSボタン表示

トップページの一覧下にSNSボタンを表示する機能。

トップページ一覧下

 

⑧ 固定ページにもSNSボタン表示

固定ページのSNSボタンの表示/非表示を設定する。(例:プロフィールページ下)

固定ページ下
投稿ページとの差別化が可能

 

⑨ 画像ホバー時にPinterestの保存ボタンを表示する

Pinterest(ネット上の画像を収集できるサービス)仕様の保存ボタンを表示させる機能。

Pinterestホバー画像
マウスホバーにて「保存」マークが表示される

 

⑩ Facebook fb:app_id

Facebookのカウント数取得に使用する。

トリ師匠
トリ師匠
Facebook使ってる人はIDの設定したってな!

 

SNSシェアボタン(2) 機能

SNSシェアボタン2選択

トリ師匠
トリ師匠
こちらはどのSNSボタンを使うか選択できる設定じゃの。「SNSシェアボタン(2)」を選択するんじゃ。

 

① 記事上SNSボタンの表示/非表示

記事上に表示させるSNSボタンの種類を選択する機能。

【表示例1:全ボタンを表示させた場合】

全ボタン表示

 

【表示例2:全ボタンを2段組表示させた場合】

全ボタン二段組表示

トリ師匠
トリ師匠
組み合わせは自由やで、自分の使いたいボタンを有効にするとええで!

 

② 記事下SNSボタンの表示/非表示

記事下に表示させるSNSボタンの種類を選択する機能。①記事上と同様のため省略。

トリ師匠
トリ師匠
これでSNSシェアボタンの説明はお終いじゃ。自由に設定してSNSで拡散してみ!

 

SNSシェアボタンの設定を終えて…

トリ師匠
トリ師匠
いよいよシェアボタンの設定も終わったで。
ぐず夫
ぐず夫
この長すぎたマラソンもようやく終わりや! ワシは自由や!
トリ師匠
トリ師匠
これが終わっても書くことなんぞ山ほどあるで。
ぐず夫
ぐず夫
オニめッ!

以上でSNSシェアボタン(1)(2)編のカスタマイズを終了します。

ではまた次回をお楽しみに!