【WordPress】CSSのモーダルでSNSシェアボタン表示させるコードを紹介します!

 2014/10/17

モーダルウィンドウ

アプリやバイラルメディアのようなタップで、画面の真ん中にぽわっと出てくるSNSのシェアボタン。CSSだけで表示するので軽量です。またコピペだけで設置できるコードを共有します!

スポンサーリンク


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\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;
}

SNSのアイコンフォントはFont AwesomのCDNを利用しています。使用していなければ<hrad>内に下記のコードを追記するだけでOKです。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Stinger5では

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="http://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="http://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="http://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="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</a></li>   
</ul>
<!-- ここまでモーダルウィンドウの中身-->      
</div>
<a href="#!" class="modal-close">&times;</a> 
</div>
ツイッターのvia=●●●●●のところにはご自信のツイッターのアカウントを入力してください

Memo

2014/11/4にLINEボタンとPoketボタンのコードを追記しました。LINEボタンとPoketボタンのアイコンフォントはFont Awesomにはないので文字です。わたしのブログのシェアボタンにアイコンが表示してあるのはアイコンフォントをicomoonで自作しているでためです。

SNSのコードはこちらを参考にさせていただきました。

Attention

このコードはスマホのみでの表示を前提としている為、PCでの表示ではSNSアイコンが横に伸びます!PCではis_mobileなどの分岐条件を使って非表示にしてください。

また、上記はSNSボタンの設置にPHPを利用しているのでPHP部分に記述しなければなりませんのでご注意ください。しかしモーダル自体はCSSのみで出来ているのでSNS部分を削除してpタグなんかて括ると投稿ページでも使えます。

どこに設置するのか

スクロールしてもフッター部分についてくる固定式のナビの設置方法をご紹介しているのですが、それなんかにこのシェアボタンをつけてもいいかも。あとはトップに戻るボタンをこれに変えてしまったり。。。

まとめ

最近リニューアルしたLIGさんのサイトもスマホの表示ではこんな感じの(もっともっとかっこいいけど!)SNSボタンが表示されるようになりました。流行っているのかもしれません。参考になるとうれしいです。

それではちゅんこ@shufulifeがお送りしましたー。

WordPress

Please comment!

  

Messege




現在トラックバックはありません。