※↑それぞれのクリックで「みなラボ」へ1票＆「みなラボ」のランキング状況を確認いただけます！
こんにちは！や～べ～です。
今回は、コピペでＯＫ！スマートフォン対応モーダルウィンドウ内にソーシャルボタンを設置する方法、ということで記事を書いていきたいと思います。
自分の創った記事をスマートフォンでチェックしていると、
「なんか、ソーシャルボタン小さいな。」
記事の上下のソーシャルボタンがもの凄く小さい事に気が付きました。
「もっと大きくしないと、誰も押せないなぁ～。」
「どうにかしたいなぁ。。。」
ライトボックス、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＞のすぐ上にコピペしましょう！
|
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 96 97 98 |
<!-- モーダルウインドウ ここから --> <!-- 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行目の、
|
1 |
<a id="modal-open" class="page_top_3">共</span></a> |
を、↓のように編集して下さい。
|
1 |
<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の設定の無いテーマの場合は、文末で問題ないです。
|
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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 |
/*ついてくるシェアボタン横ならびモーダルウインドウ用↓*/ #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日以内ならば、「サ－バーパネル」から簡単に操作可能！
もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪
ランキング
↓ランキング参加してます！よろしければ、クリックで応援して下さいっ！
にほんブログ村
↓こちらもお願いしますっ！
人気ブログランキングへ
①どんなブログにするのか考える。
⇒さあ始めよう！なせば成る「0から始めるwordpressサイトづくり」
②レンタルサーバーを借りる。
③ドメインを取得する。
④ネームサーバーDNS設定をする。
⇒ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法
⑤WordPressをインストールする。
⇒エックスサーバーへワードプレスを簡単にインストールする方法
⑥テーマをインストールする。
⇒僕が「AFFINGER5」を激推しする「3つの理由」
⇒【かんたん解説】AFFINGER5（アフィンガー5）テーマを購入する方法＆手順
⇒「AFFINGER5」をWordPressへインストールする手順
⑦アイコン、ヘッダーなどを作る。
⇒フリーソフトのみでアイコン作成する方法まとめ
⇒WPサイト用オリジナルヘッダーデザイン作ってみた
⑧お好みにサイトデザインする。
⑨サーチコンソール、アナリティクスへ登録する。
⑩アドセンスや各アフィリエイトへ登録する。
⑪記事を書く。
⑫試行錯誤しながら、ブログ運営を続けていけば、徐々に収益を上げることができると思います！(＞∀＜)ﾉ☆
・僕が「AFFINGER5」を激推しする「3つの理由」～WordPressブログ収益化への近道のために～
・たぶん新型コロナウイルスに感染したであろう僕が完治するまでの症状を記録した闘病日記
・Androidスマホで楽天モバイルの申し込みができない時の解決方法
・急げ！【300万名限定】楽天モバイルが月額料金プラン『1年間無料』キャンペーン実施中！
・『2020年更新版』Windows10も可！ Movie Maker「ムービーメーカー」をダウンロードする方法
・嫁の遺伝子検査結果をコソッと紹介（笑）GeneLife（ジーンライフ）の肥満遺伝子検査DIET（ダイエット）を試してみた結果。。。
・【2020年版】メルカリ匿名配送「らくらくメルカリ便」「ゆうゆうメルカリ便」の送料・サイズ・重量一覧＆出品手数料について
スポンサーリンク
こちらの記事もよく読まれています。↓（※広告含む）
最後までお読みいただいて、ありがとうございます。
もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです！どうぞ、よろしくお願いいたします！m(_ _)m
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterで『みなラボ』をフォローしよう！
Follow @share_labFeedly、RSS、Push7はこちら！！
Line@はこちら！！