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

アプリやバイラルメディアのようなタップで、画面の真ん中にぽわっと出てくる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">

Stinger5では

style.cssの/*media Queries タブレットサイズという記載より上の部分にコピペしてください。

はてブボタン部分のアイコンは以下のサイトを参考にさせていただきました。

[browser-shot url=”https://hayashikejinan.com/webwork/css/913/” width=”150″]

Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法

リンク部分

これは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">&times;</a> 
 </div>

<pツイッターのvia=●●●●●のところにはご自信のツイッターのアカウントを入力してください

Memo

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

[browser-shot url=”http://shufulife.com/icomoon/” width=”150″]

【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方 – Shufulife

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

[browser-shot url=”https://webshufu.com/seo-make-social-buttons-likes-tweets-plus1-hatebu/#i-5″ width=”150″]

【WordPress高速化日記】ソーシャルボタン（SNS用シェアボタン）を自作・設置すると効果的｜ウェブシュフ

Attention

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

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

どこに設置するのか

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

[browser-shot url=”http://shufulife.com/footer-menu/” width=”150″]

【STINGER5】スクロールしてもフッターで固定するメニューを設置してみたよ！ – Shufulife

まとめ

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