モカどっとこむ

WordPressのcustomize、iPhoneやPC、アフィリエイトなどのジャンルを中心にブログを更新中。投資に関する情報(FX、投資信託)も記事にしています。

WordPress全般

stinger5のSNSボタンを目立つようにカスタマイズしてみよう!

snsボタン-1

SPONSORD LINK

こんにちは!モカです。stinger5のSNSボタンが何だか寂しかったので、少し目立つようにカスタマイズしてみました。色々なサイトを見て勉強しましたが、今回は「JUNICHI」さんのサイトを参考にカスタマイズしましたので、その手順も含めてご紹介しますね!

stinger5のSNSボタン

▼stinger5のデフォルト

snsボタン-0▼変更後

snsボタン-1

如何でしょう?かなりイメージも変わり、シェアしたくなりませんか?(笑)。では、早速SNSのカスタマイズをしていきましょう。大体1時間もあれば変更できます!

変更する個所

今回の変更箇所は「style.css」「sns.php」「sns-top.php」の3個所になります。(バックアップは必須ですよ!)

1.「style.css」の編集

簡単なので、難しく考えずに修正して行きましょう!

その1.「style.css」を編集しよう!

▼以下のコードを「style.css」に貼り付けます。

▼この画像の部分を「置き換えます」

snsボタン-2

カーソルで選択いている部分です。「SNS」などのキーワードで該当箇所を検索すると簡単に見つかります。

その2.「style.css」を編集しよう!

▼続いて「style.css」の最後の辺り「ここまで」の前に、以下のコードを貼り付けます。

▼貼り付けるところはここです。(今回は挿入です!)

snsボタン-3

「ここまで」の上のカーソルの部分に「挿入」して下さい。「style.css」の修正は、これで終わりです。

 2.「sns.php」の編集

こちらはもっと簡単!以下のコードを「sns.php」の内容と置き換えます!(元のに上書きですね!)

貼り付けが終わったら、以下の4ヶ所を修正して下さい。

  1. 【@なしのTwitterアカウントを記載】*2 → 皆さんのアカウントへ変更
  2. 【サイトのドメイン】*2 → moca.com など

これで、「sns.php」の修正も完了です!

3.「sns-top.php」の編集

後少しで終わりですよ(笑)。

▼「sns-top.php」以下のコードに全て上書きします

  1. 【@なしのTwitterアカウントを記載】*2 → 皆さんのアカウントへ変更
  2. 【サイトのドメイン】*2 → moca.com など

これで終了です!お疲れさまでした。

まとめ

色々なサイトを見ましたがモカはブログ初心者という事もあり、中々上手く行かずに困っていた際、JUNICHIさんのサイトを見つけ非常に助かりました。(私自身、結構困ったので、備忘録も兼ねて記載しておく事にしました。

これでシェア数が増える事を期待!(笑) 

SPONSORD LINK

-WordPress全般