【Stinger7】記事下のSNSシェアボタンをオリジナルにカスタマイズする方法

      2016/03/17

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズする方法

@yuichico_です。今回はStinger7の単一記事下のツイッター、フェイスブック、グーグルプラス、ポケット、はてなブックマーク、ラインのSNSシェア(共有)ボタンとその上に文章(シェアしていただけると助かります。)をオリジナルにカスタマイズしました。デフォルトからあったボタンをカスタマイズしましたので、案外簡単にできました。完成図としてはこんな感じです。スマホ版だと縦3列横2列に設置しました。

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズ シェアされない場合 スマホ版

PC版だと縦6列横1列に表示します。

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズ シェアされない場合 PC版

 

Stinger7ではTwitterとLINEを除いて、各ソーシャルネットワークからシェア数を取ってこれる設定になっています。もし、記事がシェアされた場合は以下のように表示されるようにしました。スマホ版です。

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズ シェアされた場合 スマホ版

PC版です。

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズ シェアされた場合 PC版

スポンサードリンク

ダウンロードしてインストール

リンク Stinger7親テーマと子テーマのダウンロードとインストールのやり方

子テーマは必ずインストールしてください。

子テーマへアップロード

sns-top.phpとsns.phpを子テーマへアップしてください。

リンク Stinger7で特定の親テーマのファイルを子テーマへアップロードする方法

カスタマイズ

※追記 一番下の まとめ に新しいsns.phpとstyle.cssが掲載してあります。そちらのコピペしてください。オリジナルSNSボタンのサイズとアイコンの位置が合っていなかったためです。またsns-top.phpはすべて削除してください。トップページにも反映されてしまいます。

sns-top.phpとsns.php、style.cssをカスタマイズします。なおStinger7のみのカスタマイズになりますので、他Stingerシリーズをカスタマイズする方は参考にしないでください。

sns-top.php

デフォルトのトップページ下にあるSNSシェアボタンは削除しました。理由は右サイドバーにすでに設置したためです。

リンク 【Stinger7】右サイドバーにSNSフォローボタンを簡単に設置するカスタマイズ

外観→テーマ編集→sns-top.phpへ 全て空白にして削除してください。そのあと ファイルを更新 をクリックします。ご自身のブログを確認するとトップページにあるSNSシェアボタンは削除されているはずです。

sns-top.phpの記述を全て削除して ファイルを更新

sns.php

外観→テーマ編集→sns.phpで以下をコピペしてください。シェアしていただけると助かります。は、お好きな文章に変えても、変えなくても問題ございません。

CSS

PC版とスマホ版に分けて記述しました。.sns li のwidthをパーセント指定することでスマホの機種ごとに、snsシェアボタンの幅を均等に表示します。なお、画像はシェアされた場合のものです。シェアされない場合は数字は表示されませんが、アイコンは表示されます。

スマホ版

それぞれ縦と横に応じてカスタマイズしてみました。縦横の列を変えたい場合は、.sns li の%を変えます。外観→テーマ編集→style.cssの一番下へ以下をコピペします。

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズ シェアされた場合 スマホ版

縦2列横3列

横3列縦2列 SNSオリジナルボタン カスタマイズ

縦1列横6列

横6列縦1列 SNSオリジナルボタン カスタマイズ

縦6列横1列

この場合のCSSは、シェアの数字が改行されるようになります。均等にシェアされれば問題ないですが、はてぶが1000を超えてフェイスブックが10ほどでしたら、はてぶのシェア数が改行されておかしくなります。こんな感じになりますので、ここには記述しません。

横1列縦6列 SNSオリジナルボタン 記述しない

PC版

スマホと同様、縦横の列を変えたい場合は、.sns li の%を変えます。外観→テーマ編集→style.cssの一番下へ以下をコピペします。

【Stinger7】記事下のSNS共有ボタンをバランスよくカスタマイズ シェアされた場合 PC版

縦3列横2列

横2列縦3列 SNSオリジナルボタン カスタマイズ PC版

縦2列横3列

横3列縦2列 SNSオリジナルボタン カスタマイズ PC版

縦1列横6列

横6列縦1列 SNSオリジナルボタン カスタマイズ PC版

まとめ

いかがでしたか?Twitterからのシェア数を取ってこれなくなったのは残念ですが、他SNSからは取ってこられます。オリジナルSNSシェアボタンにすることで公式よりも軽くなり、サイトが表示される速度が早くなったことがいいですね。参考にしてみてください。

※追記 オリジナルSNSシェアボタンのサイズとアイコンの位置が合わない、との問い合わせがありましたので、修正しました。今現在2016/03/17以降使用しているカスタマイズです。これで問題ないと思います。また、違うようでしたら再度お問い合わせください。

sns.php

外観→テーマ編集→sns.phpに記述してある、すべて削除して以下をコピーして貼り付けをしてください。

style.css

外観→テーマ編集→style.cssに以下を一番下へコピペしてください。

シェアしていただけると助かります。

 - Stinger7, カスタマイズ