SIMPLESTERのカスタマイズ【SNSボタンの変更】

simplester

 

STINGER+SIMPLESTERのカスタマイズ記事。

SNSボタンを変更するにあたり、CSSで色々手間取ったので備忘録として。

スポンサーリンク

SNSボタン変更の概要

SNSボタン変更デザイン

デフォルト↓

simplestersns

変更後↓

snsボタン変更後

人気のちゅんこ@shufulifeさんのSNSボタンです。

SNSボタン変更の目的

  • ユーザビリティ向上
  • デザイン性
  • 表示速度の向上

サイズも大きくて、色も分かりやすいのでユーザビリティやデザインは文句無いです。

特に僕の場合は表示速度向上の目的が大きいです。やはり、公式のSNSボタンを並べるとかなり遅いですね。速度アップに期待!

カスタマイズ手順

上手くいかなかったところも備忘録的に書き残します。

【参考記事】【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ

こちらの記事にちょっと一手間加えただけです。

*SIMPLESTER ver4を利用しています。

プラグインSNS Count Cacheをインストール

SNSのシェア数をキャッシュして表示してくれるプラグイン。プラグインの新規追加から検索してインストールして有効化しておきます。それだけで良いです。

*シェア数の表示が必要無い人は不要です。

プラグインの詳細は開発者のページで確認してください!

バックアップを取る

触る箇所は以下。

  • style.css (SIMPLESTER)
  • style.css (STINGER5)
  • sns.php(STINGER5)
  • sns-top.php(STINGER5)

以上をバックアップしておきます。

STINGER5のstyle.cssを書き換え

cssの中のsnsの記述を以下に書き換えます。

↑この配置になるようにコピペです。

@media only screen and (min-width: 780px)の下に書くという部分だけ注意すればOK。

sns.phpとsns-top.phpを書き換え

以下のphpコードをそのまま書き換える。

  • ツイッターの【●ツイッターアカウント名(@なし)●】に自分のアカウントを入れる
  • feedlyの【●ドメイン名(例:shufulife.com)●】に自分のドメインを入れる

【】も外してくださいね。

sns.phpとsns-top.phpの両方を書き換えます。

SIMPLESTER用にcssを修正

上記の手順で本家の手順は終わりなのですが、SIMPLESTERの場合はもう一手間。

SIMPLESTERのcssのsns部分を削除

小テーマ内のcssが優先されるので、sns関連の記述を削除。以下の2カ所。

 

はい。これで、めでたくこうなります↓

snsボタン修正前

何か、黒い点と白い点線が入っていますね。これを消すのにsimplesterのcssに修正用の記述をします。

修正用コードです。

場所は以下↓

【タイポグラフィ周り】より後ろ、かつ【@media only screen and (min-width: 1150px)】より手前であればどこでもいいはず。

特にこだわりなければ、【/*media Queries PCサイズ(最低1150pxのサイズ)–*/】の直前でいいです。

完成です!

表示速度の変化

ある個別ページで前後の表示速度の比較を取りました。日時が少し異なるので、若干信頼性にかけますが、0.3〜0.5秒くらい早くなった感じがします。遅くはなってないと思いますw

まとめ

STINGER5のcssがSIMPLESTERのcssで上書きされてうまく表示出来ないので、元に戻るように更にcssで上書き修正するというやり方でした。

記事を書くにあたり、ちゅんこ@shufulifeさんのコードをお借りしました。

またCSSの修正について、SIMPLESTER開発者のこふす@_cofusさんにアドバイス頂きました。

お二方ありがとうございます!

スポンサーリンク

ご購読ありがとうございます。