STINGER ブログ

【STINGER7】記事下のSNSボタンをカスタマイズして幅を広げる方法

2017年2月25日

記事下のSNSボタンをオリジナルにカスタマイズしてみました。
ブログのテーマは「STINGER7」です。

ちなみにデフォルトのSNSボタンはこちら。

特に問題はないんだけど、もうちょっと大きくしたくないですか?
これに「RSS」と「Feedly」ボタンを加えて8種のSNSボタンへカスタマイズしました。

完成イメージはこちら。

どうでしょうか。
なんだかこっちの方がポチっとしてくれそうですよね。

では、手順をご紹介します。

記事下SNSボタンをカスタマイズ

まずは記事下のSNSボタンをカスタマイズしていきます。

「sns.php」コードを変更します。
外観→テーマ編集→sns.php

コードをすべて下記へ入れ替えます。

83行目の「ブログアドレス」のところはご自身のアドレスに変更してくださいね。

トップページ下SNSボタンをカスタマイズ

次にトップページのSNSボタンも連動させたい人は下記変更ください。

「sns-top.php」コードを変更します。
外観→テーマ編集→sns-top.php

コードをすべて下記へ入れ替えます。

こちらも同じく「ブログアドレス」をご自身のアドレスに変更してくださいね。
これで下準備は完了です。

スタイルシートで形を整える

最後にスタイルシートを変更して整えていきます。

「外観」→「テーマの編集」→「stily.css」

まずはこのコードを検索しましょう。
検索には「command+F」のショートキーが便利ですよ。

これのすぐ下に下記のコードを追記しましょう。

以上で完了です!
上手くいきましたでしょうか。

ちなみにスマホでの見え方はこちら。

焦らずに待ちましょう

最後に補足ですが、上記手順をしたのにも関わらず「レイアウトがおかしい!」という方は焦らずに待ちましょう。古いキャッシュが残ってたりして反映まで大体2,3分程度かかります。

例えば、こんな風になっていないでしょうか。

ちょっと待てば正常になりますので安心してください。
ではでは、これで少しでもシェアが増えたらいいですね。

-STINGER, ブログ