>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

ルクセリタスのSNSシェアボタン表示方法・種類とデザイン＆プチカスタマイズ

ルクセリタス・使い方
2019.08.05
この記事は約5分で読めます。
     

ルクセリタスのSNSシェアボタンは、アイコンのみでの表示、文字の表示、カラーで表示など、７種類の表示方法があります。

 

2019/9/3追記
Ver.3.6.13～「Copy」ボタンのリンクアイコンが変更されたり、並びの微調整などがされた為、この記事どおりの見た目とは少し異なります。

 


 

SNSシェアボタンの基本設定

表示する場所

  • 記事の上
  • 記事の下
  • トップページのリスト下
  • 固定ページ

それぞれに表示するかしないかを設定できます。

 

外観→カスタマイズ→SNSシェアボタン(1)で設定します。

  • キャッシュの設定
  • 記事上・記事下のボタンタイプ、配置
  • 固定ページでの表示・非表示
  • トップページでの表示・非表示
  • Facebook　App IDの設定

 

表示SNSの種類

現在１０種類あります。

　外観→カスタマイズ→SNSシェアボタン（２）
  • 各ボタンの表示・非表示

 

Twitter、Facebook、Linkedin、Pinterest、はてブ、Pocket、LINE、RSS、Feedly、Copy

 

Ver.3.6.10から「Copy」ボタンが追加

 

コピーを押すと以下のように表示

デフォルトでは、クリップボードにタイトルとアドレスがコピーされます。

タイトル●● | https://xxxx.xxx.jp

 

アドレスのみにするには、外観→カスタマイズ→SNSシェアボタン(1)　から設定

コピーボタンが要らない場合は、SNSシェアボタン(2)でチェックを外せばOK。

 

 

SNSシェアボタンのアニメーション

　外観→カスタマイズ→アニメーション
  • アニメーション効果なし、ズームイン、ズームアウト、上方移動

 

 

表示ボタンのデザイン

記事上、記事下のボタンは７種類のデザインから選択できます。

外観→カスタマイズ→SNSシェアボタン(1)で設定します。

 

 

通常ボタン

 

可変幅フラットタイプ（カラー）

 

可変幅フラットタイプ（ホワイト）

 

名無しアイコンタイプ（カラー）

 

名無しアイコンタイプ（ホワイト）

 

固定幅タイプ（カラー）

 

固定幅タイプ（ホワイト）

 

更にそれぞれのカウントを数字で表示する事も可能です。

 

 

お勧めしないカスタマイズ

2019/9/3追記
Ver.3.6.13でCopyボタンのアイコンがリンクアイコンに変更されてボタンの意味がわかりやすくなった為、当サイトではこの項で解説しているカスタマイズをやめました。　↓

 

 

文字列を変える

今回のカスタマイズは、親テーマのPHPファイルを直接さわったので、お勧めしません！

 

お勧めしないカスタマイズを何故したかというと、コピーボタンがアドレスのコピーである事が判りやすいようにする為です。

当サイトはCSSやカラーコードなど、コピーして利用して頂くコンテンツが多いのですが、基本的にページにはプロテクトがかかっており、コード等以外のテキストコピーができないようにしています。

CSSコードなどは、その部分のみコピーできるようシンタックスハイライターを使っていて、それも「Copy」ボタンが出ますので、訪問者さんたちに誤解を与えないよう、それとの区別の為でもあります。

 

　↓

 

「Copy」ボタンの文字を「URL Copy」に変更しただけなのですが、親テーマのファイルを直接編集したため、今後のアップデートで上書きされるので、このカスタマイズを維持したい場合は、以下の２択です。

  • 対象ファイルを子テーマにコピーしておくか
  • 親テーマのアップデートごとに、再度ファイルを編集するか

 

編集ファイルは「sns.php」

※Ver.3.6.10では268行目にありました。

 

「Copy」を「URL Copy」に変更

 

<li id="cp-button-<?php echo $luxe['sns_layout'] === 'tops' ? 'tops' : 'bottoms'; ?>" class="cp-button">
<a title="Copy" onClick="luxeUrlCopy();return false;"><i class="<?php echo $fas; ?>fa-file-alt">&nbsp;</i>
<?php if( $icon_only !== true ): ?><span class="cpname">URL Copy</span><?php if( $cnt_enable === true ): ?><span class="<?php echo $cls_cnt; ?> clipboard-check">-</span><?php endif; ?><?php endif; ?></a></li>

 

 

コピーボタンに限らず、このソースの上部にはすべてのSNSボタンのコードがありますので、それぞれにカスタマイズは可能ですが、上記２つの方法のどちらにしても、自己責任でお願いします。

 

 

＜余談＞
ついでにウィジェットエリアにフォローボタンを表示する場合は、外観→ウィジェットから「#6 SNSフォローボタン（Luxelitasオリジナル）」を追加して設定します。

 

コメント

タイトルとURLをコピーしました