読者の未来に、少しでも役立つネタを配信するブログ。

STINGER 記事内のSNSボタンを変更する方法

      2016/08/13


SNSボタンのカスタマイズ記事_記事挿入アイキャッチ画像

WordPress(STINGERテーマ)を使用していて、記事内のSNSボタンを変更したい方に、読んでほしい記事です。

STINGERテーマ(ここではSTINGER5)では、記事内のSNSボタンが「Twitter」「Facebook」「Google+」「はてなブックマーク」の順に並んでいますが、「LINE」「feedly」などのボタンを加えた上で、デザインを整えたかったので、下記のようにデザインを変更しました。

SNSボタンのカスタマイズ記事_before_after画像

SNSボタンのデザイン、変更方法は下記のブログを参考にしています。

【参考】stinger5 SNSボタンが不揃いなのでカスタマイズしてサイドバーにも設置した

もし、同じようにSNSボタンのデザイン変更を考えているようであれば、本記事を参考にカスタマイズを進めてみてください。

なお、カスタマイズにあたり、まだ子テーマを作成していないようであれば、先に子テーマを作成することをオススメします。

【参考】WordPress 子テーマのメリットと作成方法

スポンサーリンク

「sns.php」のコード変更

まず、使用しているFTPサーバーの子テーマフォルダ内に「sns.php」がない場合は、親テーマのフォルダ内にある「sns.php」のファイルをそのまま子テーマ内にコピーします。
(子テーマを使用しない方は、親テーマの「sns.php」を直接いじっていきます。)

SNSボタンのカスタマイズ記事_ファイル作成画像

コピーした「sns.php」内の下記コードを変更します。

▪︎変更箇所(変更前)

▪︎変更箇所(変更後)

「ツイートボタン」のコードにある【※ここにTwitterのアカウント名(例:
miraisyndrome)を入れてくだい※】を墨付きカッコ含めて削除し、自分のアカウント名を入れてください。(2箇所あり)

「feedlyボタン」のコードにある【※ここにドメイン名(例:mirasin.com)を入れてくだい※】を墨付きカッコ含めて削除し、自分のドメイン名を入れてください。(2箇所あり)

「記事のシェアや登録はコチラから!」の文字を変えたいようであれば、コードの<h4></h4>の中に書かれている文字を変更してください。

php言語で「<!– –>」内の記載内容は、サイトに反映されない内容になるので、コードの最初と最後に「変更時の日付」「変更内容」などのメモを残しておくと、コードを見返すときに便利になります。(無くても反映されます。)

「style.css」のコード変更

「style.css」はデザインを担当するコードのため、SNSボタンのデザインはここで実装していきます。

子テーマの「style.css」を開き、以下のコードを追記していきます。
(子テーマを使用しない方は、親テーマの「style.css」を直接いじっていきます。)

▪︎スマホおよびタブレット用

「 /*media Queries タブレットサイズ
—————————————————-*/
@media only screen and (max-width: 780px) { }」より前に以下のコードを記載。

▪︎PC用

「 /*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 780px){ }」より後、かつ、「/*– ここまで –*/」の直前に以下のコードを記載。

これで、SNSボタンの変更が完了しました。

SNSボタンのカスタマイズ記事_完成画像

それぞれのボタンを押してみて、それぞれのサービスが立ち上がれば完成です。

本記事は以上になります。

ほとんど参考サイトのコピペでしたが、無事完成しました。

記事の上部には、今回の方法とは別に、WordPressのプラグイン「WP Social Bookmarking Light」を使って、最低限のSNSボタンを設置しても良いのかなと思います。

お付き合い頂き、ありがとうございました!

 - ブログ運営