こんにちは！や～べ～です。
今回は、コピペでＯＫ！スマートフォン対応モーダルウィンドウ内にソーシャルボタンを設置する方法、ということで記事を書いていきたいと思います。
自分の創った記事をスマートフォンでチェックしていると、
「なんか、ソーシャルボタン小さいな。」
記事の上下のソーシャルボタンがもの凄く小さい事に気が付きました。
「もっと大きくしないと、誰も押せないなぁ～。」
「どうにかしたいなぁ。。。」
ライトボックス、Jquery、ポップアップウィンドウ、、、色々と調べてみると、
「モーダルウィンドウ」というものを使えば、ウィンドウを画面上にポップアップさせることが出来ることが分かりました！
っということで、実際、創ってみました！
ソーシャルボタンを設置したモーダルウィンドウをご覧ください！
画面左下の共有ボタンをクリックすると、
ソーシャルボタンを設置したモーダルウィンドウが画面上にポップアップします。
では、内容に入っていきます！
※WordPress Twenty Fourteenテーマでの実施内容になります。
コピペでＯＫ！スマートフォン対応モーダルウィンドウ内にソーシャルボタンを設置する方法
モーダルウインドウをポップアップさせる動きは、実は「jQuery」というスクリプトを使って実現しています。
ですので、まずはその「jQuery」の適用方法から説明していきます。
「jQuery」の適用方法としては、ダウンロードして自サーバーに設置し、そこから読み込む方法と、Googleなどのサーバーに設置してあるファイルを読み込む方法があります。
今回は、後者の「Googleなどのサーバーに設置してあるファイルを読み込む方法」でコードを書きますので、ここでの準備は特に必要ありません。
自サーバー用のコードもコメントアウトして書いておきますので、参考にしていただければと思います。
↓jQueryの適用方法について詳しく書かれたサイトがあります。自サーバーに設置する場合に参考にしてください。
↓自サーバーに設置される場合は、バージョンにも注意が必要です。
（みなラボは1.x 系を選びました！）
jQueryプラグインの設置方法
https://blog.raizzenet.com/installation-of-jquery-plug-ins/
初歩的なjQueryプラグインの設置方法
http://web-pc.net/jquery001
続いて、SNSのシェアカウントを取得する「SNS Count Cache」というプラグインを有効化しましょう！
シェア数のカウントにキャッシュを利用できるため、結果的にサイトの表示速度が速くなると言われています。
「SNS Count Cache」の詳細はコチラ↓の製作者まるぼんさんの記事をご覧ください。
[試] 表示速度改善のその先へ！進化するWordPressプラグイン SNS Count Cache
https://marubon.info/intro-update-wordpress-plugin-sns-count-cache-3-5403/
プラグインの追加方法が分からない場合はコチラを参考にして下さい。
「WordPressプラグインのインストール方法」をあえてまとめる
https://share-lab.net/wp-plugin-install1
HTMLコード
jQueryの準備とプラグインの有効化ができたら、コードを書いていきましょう！
っとその前に、
編集の前に！
テーマの編集をする前には、必ずバックアップをとっておきましょう！
簡単なバックアップの取り方は↓の記事を参考にして下さい。
簡単！BackWPupでWordPressをバックアップする方法
https://share-lab.net/backwpup1
併せて、簡易的なサイトの復旧方法↓も参考にしてみて下さい。
WordPressバックアップを使ってサイトを復旧する方法
https://share-lab.net/wp-restoration1
（特に、function.phpを編集する時は注意して下さい。編集を失敗すると、画面が真っ白になってブラウザからアクセス出来なくなります。その時は、FTPソフトで復旧します。↑の記事に復旧方法を解説しています。）
では、内容の続きです。
下のコードをfooter.phpの＜/body＞のすぐ上にコピペしましょう！
<!-- モーダルウインドウ ここから -->
<!-- JQUERYをグーグルから読み込む場合-->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- JQUERYを自サーバーへアップロードしたファイルから読み込む場合-->
<!-- <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>-->
<div id="modal-content">
<!-- 横ならびのシェアボタン挿入 -->
<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title());
?>
<div id="share4">
<ul class="clearfix">
<li class="twitter">
<div class="balloon">
<a href="https://twitter.com/search?q=<?php the_permalink(); ?>%2F" target="_blank"><?php if(function_exists('scc_get_share_twitter')) echo scc_get_share_twitter(); ?></a>
</div>
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=「自分のツイッター＠アカウント」&tw_p=tweetbutton"><span>Tweet</span></a>
</li>
<li class="facebook">
<div class="balloon"><?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?></div>
<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=300,width=600');return false;"><span>Facebook</span></a></li>
<li class="hatebu">
<div class="balloon"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" target="_blank"><?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?></a></div>
<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;" ><span>はてブ</span></a></li>
</ul>
<ul class="clearfix">
<li class="googlePlus">
<div class="balloon"><?php if(function_exists('scc_get_share_gplus')) echo scc_get_share_gplus(); ?></div>
<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;"><span>Google+</span></a></li>
<li class="pocket">
<div class="balloon"><?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?></div>
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="_blank"><span>Pocket</span></a></li>
<li class="feedly">
<div class="balloon feedly_count"><?php if(function_exists('scc_get_follow_feedly')) echo scc_get_follow_feedly(); ?></div>
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%「自分のサイト」%2Ffeed%2F" target="blank"><span><span>Feedly</span></a></li>
</ul>
</div>
<!-- ここまで横ならびのシェアボタン挿入 -->
<p><a id="modal-close" class="button-link">閉じる</a></p>
</div>
<div id="modal-overlay"></div>
<a id="modal-open" class="page_top_3">共</a>
<script type="text/javascript">
//モーダル連携シェアボタンを出現させる
$(function() {
var pageTop3 = $('.page_top_3');
pageTop3.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 600) {
pageTop3.fadeIn();
} else {
pageTop3.fadeOut();
}
});
});
$("#modal-open").click(
function(){
//[id:modal-open]をクリックしたら起こる処理
//キーボード操作などにより、オーバーレイが多重起動するのを防止する
$(this).blur() ; //ボタンからフォーカスを外す
//if($("#modal-overlay")[0]) return false ; //新しくモーダルウィンドウを起動しない [下とどちらか選択]
if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する [上とどちらか選択]
//オーバーレイ用のHTMLコードを、[body]内の最後に生成する
$("body").append('<div id="modal-overlay"></div>');
//[$modal-overlay]をフェードインさせる
$("#modal-overlay").fadeIn("slow");
//[$modal-content]をフェードインさせる
$("#modal-content").fadeIn("slow");
}
);
$("#modal-overlay,#modal-close").unbind().click(function(){
//[#modal-overlay]、または[#modal-close]をクリックしたら起こる処理
//[#modal-overlay]と[#modal-close]をフェードアウトする
$("#modal-content,#modal-overlay").fadeOut("slow",function(){
//フェードアウト後、[#modal-overlay]をHTML(DOM)上から削除
$("#modal-overlay").remove();
});
});
</script>
<!-- モーダルウインドウ ここまで -->
22行目の「自分のツイッター＠アカウント」というところは、自分のTwitterアカウントを入れてください。（＠を含まないように入れる）
ツイート内容に含みます。いらない場合は消してください。
41行目のFeedlyの部分にも「自分のサイト」のURLを入れてください。%2までの部分です。
例：みなラボの場合は、コード内の「自分のサイト」の部分を削除して、share-lab.netを入れる。
みなラボではWebフォントを使っていますが、今回は「共」という文字に代えさせて頂きました。
みなラボと同じWebフォントを使用される場合は、下のサイトを参考に「icomoon」を導入してもらい、「icon-share2」というWebフォントを適用してください。
【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方
http://shufulife.com/icomoon/
「icomoon」を適用できたら、上のHTMLコードの50行目の、
<a id="modal-open" class="page_top_3">共</span></a>
を、↓のように編集して下さい。
<a id="modal-open" class="page_top_3"><span class="icon-share2"></span></a>
これで、みなラボと同じWebフォントが適用されます！
CSSコード
続いて、CSSの編集です。
style.cssに下のコードをコピペして下さい。
style.cssの下の方に、「Media Queries」とありますので、その直前あたりに記入して下さい。
Media Queriesの設定の無いテーマの場合は、文末で問題ないです。
/*ついてくるシェアボタン横ならびモーダルウインドウ用↓*/
#share4 {
color: #000;
background:#fff; /*ボックス全体の背景色*/
width:99%; /*ボックス全体の横幅90px*/
padding:5px;
margin-left:0px; /*横の位置調整-115px*/
text-align:center;
/* position:fixed;*/
bottom:20px; /*下の位置調整*/
list-style-type:none;
border-radius: 5px;
}
#share4 ul {
list-style: none;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 0px;/*もとは10px*/
}
#share4 ul li {
/* float: left; */
display: inline-block;/*横並びにする為に追加*/
/* width: 80%;*/
width: 30%;
/* margin-bottom: 15%;*/
margin-bottom: 5%;
}
#share4 ul li > a {
overflow: hidden;
position: relative;
display: block;
width: 95%;
margin: 0 auto;
padding: 0.9em 0.5em; /*ボタンの余白で大きさを調整*/
color: #fff;
font-size: 60%;
text-align: center;
text-shadow: none;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#share4 ul li > a:hover {
top: 2px;
}
#share4 ul li > a:active {
top: 3px;
box-shadow: none;
}
#share4 ul li > a i {
margin-right: 0.25em;
color: rgba(0,0,0,0.3);
font-size: 1.5em;
vertical-align: middle;
}
/* ブランドカラー */
#share4 ul li.twitter > a {
background: #55acee;
box-shadow: 0 3px 0 #468EC5;
}
#share4 ul li.facebook > a {
background: #315096;
box-shadow: 0 3px 0 #1F3669;
}
#share4 ul li.hatebu > a {
background: #008fde;
box-shadow: 0 3px 0 #0270AC;
}
#share4 ul li.googlePlus > a {
background: #dd4b39;
box-shadow: 0 3px 0 #B94031;
}
#share4 ul li.pocket > a {
background: #ee4056;
box-shadow: 0 3px 0 #C53648;
}
#share4 ul li.feedly > a {
background: #6cc655;
box-shadow: 0 3px 0 #5CA449;
}
/* ブランドカラーマウスオーバー */
#share4 ul li.twitter > a:hover {
box-shadow: 0 1px 0 #468EC5;
}
#share4 ul li.facebook > a:hover {
box-shadow: 0 1px 0 #315096;
}
#share4 ul li.hatebu > a:hover {
box-shadow: 0 1px 0 #008fde;
}
#share4 ul li.googlePlus > a:hover {
box-shadow: 0 1px 0 #dd4b39;
}
#share4 ul li.pocket > a:hover {
box-shadow: 0 1px 0 #ee4056;
}
#share4 ul li.feedly > a:hover {
box-shadow: 0 1px 0 #6cc655;
}
/* ブランドカラーアクティブ */
#share4 ul li.twitter > a:active {
background: #468EC5;
}
#share4 ul li.facebook > a:active {
background: #1F3669;
}
#share4 ul li.hatebu > a:active {
background: #0270AC;
}
#share4 ul li.googlePlus > a:active {
background: #B94031;
}
#share4 ul li.pocket > a:active {
background: #C53648;
}
#share4 ul li.feedly > a:active {
background: #5CA449;
}
#share4 ul li.line {
display: none;
}
#share4 ul li.line > a {
background: #00c300;
}
/* シェア数吹き出し */
#share4 ul li .balloon {
position: relative;
margin: 0 auto 0.5em;
padding: 0.2em 0.25em; /*吹き出しの余白*/
width: 95%;
color: #aaa;
text-align: center;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#share4 ul li .balloon:before,
#share4 ul li .balloon:after {
content: "";
position: absolute;
left: 50%;
display: block;
width: 0;
height: 0;
margin-left: -7px;
border: 7px solid transparent;
}
#share4 ul li .balloon:before {
bottom: -14px;
border-top-color: #ddd;
}
#share4 ul li .balloon:after {
bottom: -12px;
border-top-color: #fff;
}
#share4 ul li .balloon a {
display: block;
}
/*ついてくるシェアボタン横ならびモーダルウインドウ用↑*/
/* モーダルウインドウここから */
#modal-content{
width:85%;/* width:50%;*/
margin:1.5em auto 0;
padding:10px 20px;
border:2px solid #aaa;
background:#fff;
z-index:9999;
position:fixed;
top:50px;/* top:50px;*/
left:1px;/* left:50px;*/
border-radius: 15px;
display: none;
}
.modal-p{
margin-top:1em;
}
.modal-p:first-child{
margin-top:0;
}
.button-link{
color: #24890d;
text-decoration:underline;
}
.button-link:hover{
cursor:pointer;
color: #41a62a;
}
#modal-overlay{
z-index:9998;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:120%;
background-color:rgba(0,0,0,0.75);
}
#modal-overlay{
/*追加分*/
width:100%;
height:120%;
position:fixed;
top:0;
left:0;
}
/* モーダルウインドウここまで */
/* モーダルウインドウポップアップ用ボタン（ページトップ3）ここから */
.page_top_3 {
position:fixed;
bottom:70px;
left:10px;
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color:#fff;
font-size:20px;
text-decoration:none;
background-color: rgba( 36, 137, 13, 0.55 );
border: 3px solid #ffffff;
text-align: center;
line-height: 50px;
z-index:9997;
}
.page_top_3:hover{
cursor:pointer;
color: #41a62a;
}
/* モーダルウインドウポップアップ用ボタン（ページトップ3）ここまで */
参考にさせていただいたサイト
初心者でも分かる！モーダルウィンドウの作り方
https://syncer.jp/jquery-modal-window
【WordPress】プラグインを使わずにページのTOPへ戻るリンクを設置してみた。
https://takayakondo.com/page-top-link/
コピペでOK！スクロールしてもついてくるオリジナルソーシャルボタンをブログに設置する方法
http://mama-hack.com/scroll-snsbox
まとめ
コピペでＯＫ！スマートフォン対応モーダルウィンドウ内にソーシャルボタンを設置する方法、ということで記事を書かせていただきましたが、いかがでしたでしょうか？
今はスマートフォンユーザーが多いので、スマートフォンユーザーの方にもなるべく便利に使ってもらえるサイトづくりが必要になっていると思います。
スマートフォンはＰＣと比べて、画面が狭いので、あまりゴチャゴチャと表示させると見辛くなってしまうし、かといって情報はソコソコ充実させないといけないと思うので、「何をどこに表示させるのか」が非常に難しいと思います。（真剣に考えると）
今回紹介した、モーダルウィンドウはポップアップで表示できるので、スマートフォンユーザーが記事をシェアしたいと思った時だけポップアップさせることができ、スマートフォンユーザーにとっての利便性が少しは向上するのではないかと思います。
コピペで実現できますので、気になった方、せひトライしてみて下さいね！
じゃあ、今回はここまでっ！！
ではではっ！(´∀｀*)ﾉｼ
おすすめのレンタルサーバー
『XSERVER』
みなラボもこの『XSERVER』を使っています！＾＾
プランによっては最安月額900円（税別）で、200GBのサーバー容量を確保できます！
継続更新は、クレジット引き落としで自動更新出来て楽チン！
サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心！
サーバーをコントロールするの為のインタフェースとなる「サ－バーパネル」の操作性も抜群！
サーバーデータの復元も、過去7日以内ならば、「サ－バーパネル」から簡単に操作可能！
もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪
ランキング
↓ランキング参加してます！よろしければ、クリックで応援して下さいっ！
にほんブログ村
↓こちらもお願いしますっ！
人気ブログランキングへ
