物を捨てきれないなりにミニマリスト目指す。

部屋や服や持ち物に気ままに最小限主義を取り入れる男性ミニマリスト系ブログ。断捨離の記事もそこそこ。あと、創作ヲタです。

最近の人気記事 | トータル人気記事

シンプルでレスポンシブ!オリジナルSNSシェアボタンのソースを公開。

      2016/02/16

23e84a79cf02784fc215719b4b1b6577_s

ブログのシェアボタンを一新しました。

↑こんなふうになりました。シンプルで上品な感じに。

なので、例によってソースを公開しようと思います。

公式ボタンを捨てて、オリジナルのSNSボタンにした経緯

今までシェアボタンのカスタム記事としては、こんな記事とかあんな記事とか書いてきましたが、そういうのはいったん全部リセットして、新規オリジナルデザインに変更しました。

公式のfacebookボタンが重すぎる

一番大きかったのは、facebookボタンの存在です。facebookボタンは、公式ソースを使うと激遅なのです。どのくらい激遅なのかというと、PageSpeed Insightsのテスト結果を10点下げるくらいに激遅。さすがに看過できません。

というわけで、どうせオリジナルボタンにするなら、他のボタンもデザインを一新して、表示を揃えようと、前から思っていたのです。

参考にした記事

オリジナルデザインを作る上で、今回は下記ページで公開されているソースを参考にしました。ありがとうございます。

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

といっても、結構いじったので、あんまり面影はないかもしれません。

スポンサーリンク

スポンサーリンク

早速、オリジナルのシェアボタンのソースを公開

早速、ソースを公開します。内容物としては、以下です。

  • sns.phpに貼り付けるphpコード
  • スマホ用のCSS
  • PC用のCSS

基本的に、自分の使っているStinger5で使用することを前提に解説しますが、貼る位置を気を付ければ、別のテーマでも問題なく動くんじゃないかなと思います。

sns.phpに貼り付けるphpコード

以下のソースで、sns.phpの中身を置き換えます。(バックアップは忘れずに)

当ブログでは今のところ使っていませんが、SNS Count Cacheというプラグインによるカウント表示にも対応しているようです。

この辺りのコードは、参考記事のソースまま。「導入していなくても表示に問題ない」「その内気が向いたら導入するかも」という理由により、そのまま残してあります。

sns-top.phpも同様に置き換え。

スマホ用のCSS

次は、こちら。style.cssの中でスマホ用snsボタンについて記述している箇所(Stinger5だと761行目)を、下記で置き換えてください。バックアップ忘れずに。

ちなみに、白眉なのは、ボタンの横幅をcalcで自動制御しているところです。CSSの中で四則演算できる日がくるなんて…! 時代は変わるものです。CSS3さまさま。

PC用のCSS

最後は、これ。PC用のCSSです。Stinger5の場合は、style.cssの最後の方にある「/*– ここまで –*/」の上に貼りつけてください。

自分の場合、スマホ版とPC版のデザインをほぼ共通化してしまったので、コード量少な目。ただ、PC版の方は、多少、文字サイズとかを大きくしています。

まとめ

というわけで、上記コードを適用すると、表示がこんなかんじになります。

 

↑シンプルな二行四列デザイン

↑マウスを当てると、各SNSのイメージカラーに変わるよ

いかがでしょうか。個人的には「フォーカスすると色が変わるけど、基本は目立たない色」という辺りが気に入っています。奥ゆかしくて。基本色については、皆さまのブログのテーマカラーにあわせて、変えてみてもいいかもしれません。

もっとカスタムしたい人は…。かわりにやろうか?

wordpressのカスタム依頼とかも受け付けていますので、もっと高度だったりオリジナルだったりなカスタマイズがしたい人はお声がけください。⇒「書くと叶う!らしいので、自分の得意なことを書いてみる。こんなないなりはいかがですか?

 

他にも色々書いてます

 - SNS, web, wordpress, ブログ

にほんブログ村 ライフスタイルブログ ミニマリスト(持たない暮らし)へにほんブログ村 その他生活ブログ 断捨離へにほんブログ村 その他生活ブログへ

にほんブログ村に参加しています。この記事が一番当てはまるジャンルをお選び下さい

  あわせて読みたい関連記事

ブログ」カテゴリの人気記事 (more)

>>このカテゴリの記事をもっと読む

SNS」カテゴリの人気記事 (more)

>>このカテゴリの記事をもっと読む

wordpress」カテゴリの人気記事 (more)

>>このカテゴリの記事をもっと読む

web」カテゴリの人気記事 (more)

>>このカテゴリの記事をもっと読む

Comment

  1. しぃ より:

    カーソルが当たると各カラーに変わるのが良いですねー☆
    シックで良い感じです(^^*)

    • ないなり より:

      しぃさん

      色はかなり迷いましたが、結果的にいいかんじに落ち着いた気がします!
      記事下はまだいいのですが、記事上にたくさん色があると、ごちゃごちゃしちゃって。ヾ(:3ノシヾ)ノシ

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

▼コメント欄を開く