シンプルでレスポンシブ！オリジナルSNSシェアボタンのソースを公開。
2016/02/16
ブログのシェアボタンを一新しました。
↑こんなふうになりました。シンプルで上品な感じに。
なので、例によってソースを公開しようと思います。
公式ボタンを捨てて、オリジナルのSNSボタンにした経緯
今までシェアボタンのカスタム記事としては、こんな記事とかあんな記事とか書いてきましたが、そういうのはいったん全部リセットして、新規オリジナルデザインに変更しました。
公式のfacebookボタンが重すぎる
一番大きかったのは、facebookボタンの存在です。facebookボタンは、公式ソースを使うと激遅なのです。どのくらい激遅なのかというと、PageSpeed Insightsのテスト結果を10点下げるくらいに激遅。さすがに看過できません。
というわけで、どうせオリジナルボタンにするなら、他のボタンもデザインを一新して、表示を揃えようと、前から思っていたのです。
参考にした記事
オリジナルデザインを作る上で、今回は下記ページで公開されているソースを参考にしました。ありがとうございます。
といっても、結構いじったので、あんまり面影はないかもしれません。
早速、オリジナルのシェアボタンのソースを公開
早速、ソースを公開します。内容物としては、以下です。
- sns.phpに貼り付けるphpコード
- スマホ用のCSS
- PC用のCSS
基本的に、自分の使っているStinger5で使用することを前提に解説しますが、貼る位置を気を付ければ、別のテーマでも問題なく動くんじゃないかなと思います。
sns.phpに貼り付けるphpコード
以下のソースで、sns.phpの中身を置き換えます。(バックアップは忘れずに)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <?php $url_encode=urlencode(get_permalink()); $title_encode=urlencode(get_the_title()); ?> <div class="share"> <?php if(is_mobile()) { //以下スマホの場合 ?> <div class="sns"> <ul class="clearfix"> <!--ツイートボタン--> <li class="twitter"> <a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=nai_nari&tw_p=tweetbutton&related="nai_nari">Twitter <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a> </li> <!--Facebookボタン--> <li class="facebook"> <a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"> Facebook <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a> </li> <!--Google+1ボタン--> <li class="googleplus"> <a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" >Google+ <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a> </li> <!--はてブボタン--> <li class="hatebu"> <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>">はてブ <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a> </li> <!--LINEボタン--> <li class="line"> <a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">LINE</a> </li> <!--ポケットボタン--> <li class="pocket"> <a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>">Pocket <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li> <!--RSSボタン--> <li class="rss"> <a href="<?php echo home_url(); ?>/?feed=rss2">RSS</a></li> <!--feedlyボタン--> <li class="feedly"> <a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fseminimalist.info%2Ffeed%2F" target="blank">feedly <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li> </ul> </div> <?php } else { //以下PCの場合?> <div class="sns"> <ul class="clearfix"> <!--ツイートボタン--> <li class="twitter"> <a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=nai_nari&tw_p=tweetbutton&related="nai_nari" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">Twitter <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a> </li> <!--Facebookボタン--> <li class="facebook"> <a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=1000');return false;">Facebook <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a> </li> <!--Google+1ボタン--> <li class="googleplus"> <a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">Google+ <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a> </li> <!--はてブボタン--> <li class="hatebu"> <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" >はてブ <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a> </li> <!--LINEボタン--> <li class="line"> <a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="blank">LINE</a> </li> <!--ポケットボタン--> <li class="pocket"> <a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="blank">Pocket <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li> <!--RSSボタン--> <li class="rss"> <a href="<?php echo home_url(); ?>/?feed=rss2" target="blank">RSS</a></li> <!--feedlyボタン--> <li class="feedly"> <a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fseminimalist.info%2Ffeed%2F" target="blank">feedly <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li> </ul> </div> <?php } ?> </div> |
当ブログでは今のところ使っていませんが、SNS Count Cacheというプラグインによるカウント表示にも対応しているようです。
この辺りのコードは、参考記事のソースまま。「導入していなくても表示に問題ない」「その内気が向いたら導入するかも」という理由により、そのまま残してあります。
sns-top.phpも同様に置き換え。
スマホ用のCSS
次は、こちら。style.cssの中でスマホ用snsボタンについて記述している箇所(Stinger5だと761行目)を、下記で置き換えてください。バックアップ忘れずに。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | /*-------------------------------- SNS ---------------------------------*/ .share{ width:100%; } .share h4{ font-size:120%; text-align:center; } .sns{ margin:0 auto; text-align:center; } .sns ul { list-style:none; padding: 0 0 20px 0; } .sns li { float:left; width: 24.5%; /*IE9未満とかプレフィックス使ってもだめなブラウザやOS対応*/ widht: -webkit-calc(25% - 1px);/*Chrome19~25対応*/ width: -moz-calc(25% - 1px);/*Firefox4~15対応*/ width: calc(25% - 1px); margin:0 1px 1px 0; } .sns li a { font-size:60%; position:relative; display:block; padding:10px; color:#666; border-radius:3px; text-align:center; text-decoration: none; text-shadow:1px 1px 0 rgba(255,255,255,0.3); } .sns li a:hover { color:#fff; background:#837054; } .sns .twitter a:hover { background:#0092ca; } .sns .facebook a:hover { background:#2c4373; } .sns .googleplus a:hover { background:#ad3a2d; } .sns .hatebu a:hover { background:#43638b; } .sns .line a:hover { background:#219900; } .sns .pocket a:hover { background:#c0392b; } .sns .rss a:hover { background:#e09900; } .sns .feedly a:hover { background:#74a436; } .sns a { background:#dbdbbc; } |
ちなみに、白眉なのは、ボタンの横幅をcalcで自動制御しているところです。CSSの中で四則演算できる日がくるなんて…！ 時代は変わるものです。CSS3さまさま。
PC用のCSS
最後は、これ。PC用のCSSです。Stinger5の場合は、style.cssの最後の方にある「/*– ここまで –*/」の上に貼りつけてください。
自分の場合、スマホ版とPC版のデザインをほぼ共通化してしまったので、コード量少な目。ただ、PC版の方は、多少、文字サイズとかを大きくしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | /*-------------------------------------- 780px SNS --------------------------------------*/ .share{ padding-bottom:10px; } .sns ul { margin:0 auto; list-style:none; padding: 0 0 20px 0; } /* .sns li { width:24.8%; margin:0 1px 1px 0; } */ .sns li a { font-size:75%; padding:10px 2px; } .sns li:nth-child(4n) { margin-right:0; } |
まとめ
というわけで、上記コードを適用すると、表示がこんなかんじになります。
↑シンプルな二行四列デザイン
↑マウスを当てると、各SNSのイメージカラーに変わるよ
いかがでしょうか。個人的には「フォーカスすると色が変わるけど、基本は目立たない色」という辺りが気に入っています。奥ゆかしくて。基本色については、皆さまのブログのテーマカラーにあわせて、変えてみてもいいかもしれません。
もっとカスタムしたい人は…。かわりにやろうか？
wordpressのカスタム依頼とかも受け付けていますので、もっと高度だったりオリジナルだったりなカスタマイズがしたい人はお声がけください。⇒「書くと叶う！らしいので、自分の得意なことを書いてみる。こんなないなりはいかがですか？」
↑他ミニマリストたちの生息地最近書いた記事とか
- 【NEW】ブログやサロンやコンサルで収益化しようとするのは、他に技能がないから。
- 節約vs時短！エアコンをつけるべきか否かひたすら考える。
- レコーディング者の苦悩を救う有線/bluetooth両対応ヘッドホン「MPBH059AB」の使用感がかなりいい話。
- 夢中になると、それ以外がどんどん簡略化していく。最近の時短施策傾向について。
- とある男性ミニマリスト志向者が「捨てなくてよかったぁ」と思ったアイテム2つ。
反応・感想・リクエスト等お待ちしております。
カーソルが当たると各カラーに変わるのが良いですねー☆
シックで良い感じです（＾＾*）
しぃさん
色はかなり迷いましたが、結果的にいいかんじに落ち着いた気がします！
記事下はまだいいのですが、記事上にたくさん色があると、ごちゃごちゃしちゃって。ヾ(:３ﾉｼヾ)ﾉｼ