アプリやバイラルメディアのようなタップで、画面の真ん中にぽわっと出てくるSNSのシェアボタン。CSSだけで表示するので軽量です。またコピペだけで設置できるコードを共有します!
こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。
IE8以上ならスクリプト無しでもOKなモーダルウィンドウ
css部分
/*-------------------------------- モーダルウィンドウ ---------------------------------*/ .modal-window { -webkit-transform: translate(0, 100%); -moz-transform: translate(0, 100%); -o-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; opacity: 0; line-height: 1.3; display: none; } .modal-window:target { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } .is-active.modal-window { display: block; } .modal-window:target { display: block; } .modal-window .modal-inner { position: absolute; top: 100px; left: 5%; z-index: 20; padding:5%; margin:0 auto; width: 80%; overflow-x: hidden; border-radius: 6px; background: #fff; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); } .modal-window .modal-close { display: block; text-indent: -100px; overflow: hidden; } .modal-window .modal-close:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: #333; -moz-opacity: 0.7; opacity: 0.7; } .modal-window .modal-close:after { content: '/*-------------------------------- モーダルウィンドウ ---------------------------------*/ .modal-window { -webkit-transform: translate(0, 100%); -moz-transform: translate(0, 100%); -o-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; opacity: 0; line-height: 1.3; display: none\9; } .modal-window:target { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } .is-active.modal-window { display: block\9; } .modal-window:target { display: block\9; } .modal-window .modal-inner { position: absolute; top: 100px; left: 5%; z-index: 20; padding:5%; margin:0 auto; width: 80%; overflow-x: hidden; border-radius: 6px; background: #fff; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); } .modal-window .modal-close { display: block; text-indent: -100px; overflow: hidden; } .modal-window .modal-close:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: #333; -moz-opacity: 0.7; opacity: 0.7; } .modal-window .modal-close:after { content: '\00d7'; position: absolute; top: 78px; right:15%; z-index: 20; margin:0 auto; background: #fff; border-radius: 2px; padding: 2px 8px; text-decoration: none; text-indent: 0; } .modal-window { -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; } /*-------------------------------- SNSの部分 ---------------------------------*/ .modal-window .modal-inner.sns{ margin:0 auto; text-align:center; } .modal-inner ul { list-style:none; } .modal-inner li { list-style:none; float:left; width:44%; margin:3%; } .modal-inner li a { font-size:150%; position:relative; display:block; padding:10px; color:#fff; border-radius:6px; text-align:center; text-decoration: none; text-shadow:1px 1px 0 rgba(255,255,255,0.3); } .modal-inner li a:hover { -webkit-transform: translate3d(0px, 5px, 1px); -moz-transform: translate3d(0px, 5px, 1px); transform: translate3d(0px, 5px, 1px); box-shadow:none; } /* ツイッター */ .modal-inner .twitter a { background:#00acee; box-shadow:0 5px 0 #0092ca; color:#fff; } .modal-inner .twitter a:hover { background:#0092ca; } /* Facebook */ .modal-inner .facebook a { background:#3b5998; box-shadow:0 5px 0 #2c4373; } .modal-inner .facebook a:hover { background:#2c4373; } /* グーグル */ .modal-inner .googleplus a { background:#db4a39; box-shadow:0 5px 0 #ad3a2d; } .modal-inner .googleplus a:hover { background:#ad3a2d; } /* はてぶ */ .modal-inner .hatebu a { background:#5d8ac1; box-shadow:0 5px 0 #43638b; } .modal-inner .hatebu a:hover { background:#43638b; } /* Font Awesome hatena bookmark */ .fa-hatena:before { content: "B!"; font-family: Verdana; font-weight: bold } /* LINE */ .modal-inner .line a { background:#25af00; box-shadow:0 5px 0 #219900; } .modal-inner .line a:hover { background:#219900; } /* Pocket */ .modal-inner .pocket a { background:#f03e51; box-shadow:0 5px 0 #c0392b; } .modal-inner .pocket a:hover { background:#c0392b; }d7'; position: absolute; top: 78px; right:15%; z-index: 20; margin:0 auto; background: #fff; border-radius: 2px; padding: 2px 8px; text-decoration: none; text-indent: 0; } .modal-window { -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; } /*-------------------------------- SNSの部分 ---------------------------------*/ .modal-window .modal-inner.sns{ margin:0 auto; text-align:center; } .modal-inner ul { list-style:none; } .modal-inner li { list-style:none; float:left; width:44%; margin:3%; } .modal-inner li a { font-size:150%; position:relative; display:block; padding:10px; color:#fff; border-radius:6px; text-align:center; text-decoration: none; text-shadow:1px 1px 0 rgba(255,255,255,0.3); } .modal-inner li a:hover { -webkit-transform: translate3d(0px, 5px, 1px); -moz-transform: translate3d(0px, 5px, 1px); transform: translate3d(0px, 5px, 1px); box-shadow:none; } /* ツイッター */ .modal-inner .twitter a { background:#00acee; box-shadow:0 5px 0 #0092ca; color:#fff; } .modal-inner .twitter a:hover { background:#0092ca; } /* Facebook */ .modal-inner .facebook a { background:#3b5998; box-shadow:0 5px 0 #2c4373; } .modal-inner .facebook a:hover { background:#2c4373; } /* グーグル */ .modal-inner .googleplus a { background:#db4a39; box-shadow:0 5px 0 #ad3a2d; } .modal-inner .googleplus a:hover { background:#ad3a2d; } /* はてぶ */ .modal-inner .hatebu a { background:#5d8ac1; box-shadow:0 5px 0 #43638b; } .modal-inner .hatebu a:hover { background:#43638b; } /* Font Awesome hatena bookmark */ .fa-hatena:before { content: "B!"; font-family: Verdana; font-weight: bold } /* LINE */ .modal-inner .line a { background:#25af00; box-shadow:0 5px 0 #219900; } .modal-inner .line a:hover { background:#219900; } /* Pocket */ .modal-inner .pocket a { background:#f03e51; box-shadow:0 5px 0 #c0392b; } .modal-inner .pocket a:hover { background:#c0392b; }
SNSのアイコンフォントはFont AwesomのCDNを利用しています。使用していなければ<hrad>内に下記のコードを追記するだけでOKです。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
style.cssの/*media Queries タブレットサイズという記載より上の部分にコピペしてください。
はてブボタン部分のアイコンは以下のサイトを参考にさせていただきました。
リンク部分
これはfooter.phpなどに記載したり、外部PHPファイルで挿入したりしてください。
<!-- このリンクでモーダルが表示--> <a href="#modal-p01">クリック</a> <div class="modal-window" id="modal-p01"> <div class="modal-inner"><!-- ここからモーダルウィンドウの中身--> <?php $url_encode=urlencode(get_permalink()); $title_encode=urlencode(get_the_title()); ?> <ul class="clearfix"> <!--ツイートボタン--> <li class="twitter"> <a href="https://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=●●●●● &tw_p=tweetbutton"><i class="fa fa-twitter"></i></a> </li> <!--Facebookいいね!/シェアボタン--> <li class="facebook"> <a href="https://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><i class="fa fa-facebook"></i></a> </li> <!--Google+1ボタン--> <li class="googleplus"> <a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i></a> </li> <!--はてブボタン--> <li class="hatebu"> <a href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><i class="fa fa-hatena"></i></a> </li> <!--LINEボタン--> <li class="line"> <a href="https://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"> LINE</a> </li> <!--ポケットボタン--> <li class="pocket"> <a href="https://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>">Pocket</a></li> </ul> <!-- ここまでモーダルウィンドウの中身--> </div> <a href="#!" class="modal-close">×</a> </div>
<pツイッターのvia=●●●●●のところにはご自信のツイッターのアカウントを入力してください
2014/11/4にLINEボタンとPoketボタンのコードを追記しました。LINEボタンとPoketボタンのアイコンフォントはFont Awesomにはないので文字です。わたしのブログのシェアボタンにアイコンが表示してあるのはアイコンフォントをicomoonで自作しているでためです。
SNSのコードはこちらを参考にさせていただきました。
このコードはスマホのみでの表示を前提としている為、PCでの表示ではSNSアイコンが横に伸びます!PCではis_mobileなどの分岐条件を使って非表示にしてください。
また、上記はSNSボタンの設置にPHPを利用しているのでPHP部分に記述しなければなりませんのでご注意ください。しかしモーダル自体はCSSのみで出来ているのでSNS部分を削除してpタグなんかて括ると投稿ページでも使えます。
どこに設置するのか
スクロールしてもフッター部分についてくる固定式のナビの設置方法をご紹介しているのですが、それなんかにこのシェアボタンをつけてもいいかも。あとはトップに戻るボタンをこれに変えてしまったり。。。
まとめ
最近リニューアルしたLIGさんのサイトもスマホの表示ではこんな感じの(もっともっとかっこいいけど!)SNSボタンが表示されるようになりました。流行っているのかもしれません。参考になるとうれしいです。