※↑それぞれのクリックで「みなラボ」へ1票＆「みなラボ」のランキング状況を確認いただけます！
こんにちは！や～べ～です。
今回は、コピペでＯＫ！スマートフォン対応モーダルウィンドウ内にソーシャルボタンを設置する方法、ということで記事を書いていきたいと思います。
自分の創った記事をスマートフォンでチェックしていると、
「なんか、ソーシャルボタン小さいな。」
記事の上下のソーシャルボタンがもの凄く小さい事に気が付きました。
「もっと大きくしないと、誰も押せないなぁ～。」
「どうにかしたいなぁ。。。」
ライトボックス、Jquery、ポップアップウィンドウ、、、色々と調べてみると、
「モーダルウィンドウ」というものを使えば、ウィンドウを画面上にポップアップさせることが出来ることが分かりました！
っということで、実際、創ってみました！
ソーシャルボタンを設置したモーダルウィンドウをご覧ください！
画面左下の共有ボタンをクリックすると、
ソーシャルボタンを設置したモーダルウィンドウが画面上にポップアップします。
では、内容に入っていきます！
※WordPress Twenty Fourteenテーマでの実施内容になります。
スポンサーリンク
コピペでＯＫ！スマートフォン対応モーダルウィンドウ内にソーシャルボタンを設置する方法
モーダルウインドウをポップアップさせる動きは、実は「jQuery」というスクリプトを使って実現しています。
ですので、まずはその「jQuery」の適用方法から説明していきます。
「jQuery」の適用方法としては、ダウンロードして自サーバーに設置し、そこから読み込む方法と、Googleなどのサーバーに設置してあるファイルを読み込む方法があります。
今回は、後者の「Googleなどのサーバーに設置してあるファイルを読み込む方法」でコードを書きますので、ここでの準備は特に必要ありません。
自サーバー用のコードもコメントアウトして書いておきますので、参考にしていただければと思います。
↓jQueryの適用方法について詳しく書かれたサイトがあります。自サーバーに設置する場合に参考にしてください。
初歩的なjQueryプラグインの設置方法
http://web-pc.net/jquery001
↓自サーバーに設置される場合は、バージョンにも注意が必要です。
（みなラボは1.x 系を選びました！）
jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など
http://web-pc.net/jquery012
続いて、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へ戻るリンクを設置してみた。
http://takayakondo.com/page-top-link/
コピペでOK！スクロールしてもついてくるオリジナルソーシャルボタンをブログに設置する方法
http://mama-hack.com/scroll-snsbox
スポンサーリンク
まとめ
コピペでＯＫ！スマートフォン対応モーダルウィンドウ内にソーシャルボタンを設置する方法、ということで記事を書かせていただきましたが、いかがでしたでしょうか？
今はスマートフォンユーザーが多いので、スマートフォンユーザーの方にもなるべく便利に使ってもらえるサイトづくりが必要になっていると思います。
スマートフォンはＰＣと比べて、画面が狭いので、あまりゴチャゴチャと表示させると見辛くなってしまうし、かといって情報はソコソコ充実させないといけないと思うので、「何をどこに表示させるのか」が非常に難しいと思います。（真剣に考えると）
今回紹介した、モーダルウィンドウはポップアップで表示できるので、スマートフォンユーザーが記事をシェアしたいと思った時だけポップアップさせることができ、スマートフォンユーザーにとっての利便性が少しは向上するのではないかと思います。
コピペで実現できますので、気になった方、せひトライしてみて下さいね！
じゃあ、今回はここまでっ！！
ではではっ！(´∀｀*)ﾉｼ
おすすめのオンラインスクール
『TECH ACADEMY オンラインブートキャンプ』
TECH ACADEMY オンラインブートキャンプとは、
Webアプリケーションスキル（Ruby on Rails）、PHP、WordPressなどのWeb開発周辺スキル習得のコースを中心に、iPhoneアプリ、Androidアプリ、Unityなどのオリジナルアプリ開発コースや、WebデザインやWebマネジメント、さらにはWindows Excelのスキルを習得できるコースもラインナップされている、プログラミングをこれから始めてみようと思っている方から、エンジニアを目指している方までの幅広い方々にとって非常に心強い『プログラミング系オンラインスクール』です。
WordPressを使って自分のオリジナルWebサイトを構築しようとする場合、何かしらのプログラミング言語の基礎が分かっていれば、インターネットで検索した情報をフルに活用すれば、独学でもサイトを構築することは可能だと思います。
自分もこのタイプで、独学でサイトのカスタマイズを行っているのですが、現在のサイトのカタチに持っていくまでに、非常に多くの時間が掛かってしまっています。
もっと早い段階で、この『TECH ACADEMY オンラインブートキャンプ』を知っていて、受講するだけの予算が確保できていたのなら、短時間でかなりレベルの高いのスキルを習得できていたのではないかと思います。
っと、ちょっと気になるなぁと思ったそこのあなた！！
もっと詳しく内容を知りたいと思ったら、、、
↑『TECH ACADEMY』公式サイト上部のメニューバーに表示されている、『無料説明会』から無料説明会動画を見ることが出来ますよぉ！＾＾
受講希望のコースを選択し、
メールアドレス（GmailでもOK!＾＾）かSNSアカウントを入力すると、希望コースの無料説明会動画を見ることができます。
受講申し込みを検討する際に気になる、「受講終了時点の成果目標」「習得できるスキル」「具体的な学習方法」などの解説と、短期間で高い学習目標に到達することが可能となる裏付けについて、丁寧に説明されています。
『無料説明会』のページには、カリキュラムの詳細も紹介されています。
その他『説明会動画特典』として、受講料が割引になる特典も準備されてるようですよ♪＾＾
気になるんだけど、少し試してみないと分からないよなぁ～なんて思ってるあなたには、、、
『一週間のブートキャンプ無料体験』もありますよっ♪
ぜひ体験してみて下さいね♪(*^▽^*)
おすすめのレンタルサーバー
『XSERVER』
みなラボもこの『XSERVER』を使っています！＾＾
プランによっては最安月額900円（税別）で、200GBのサーバー容量を確保できます！
継続更新は、クレジット引き落としで自動更新出来て楽チン！
サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心！
サーバーをコントロールするの為のインタフェースとなる「サ－バーパネル」の操作性も抜群！
もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪
ランキング
↓ランキング参加してます！よろしければ、クリックで応援して下さいっ！
にほんブログ村
↓こちらもお願いしますっ！
人気ブログランキングへ
・たぶん新型コロナウイルスに感染したであろう僕が完治するまでの症状を記録した闘病日記
・「スムーズに！」「お得に！」引越しを完了する為のコツまとめ～引っ越し準備⇒当日⇒その後の転居手続きまでリストアップ～
・『2020年更新版』Windows10も可！ Movie Maker「ムービーメーカー」をダウンロードする方法
・【毎月約4千円節約できる】簡単にデュアルSIM(DSDS)スマホでドコモSIMと格安SIMを両方同時に使う方法
・嫁の遺伝子検査結果をコソッと紹介（笑）GeneLife（ジーンライフ）の肥満遺伝子検査DIET（ダイエット）を試してみた結果。。。
スポンサーリンク
こちらの記事もよく読まれています。↓（※広告含む）
最後までお読みいただいて、ありがとうございます。
もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです！どうぞ、よろしくお願いいたします！m(_ _)m
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterで『みなラボ』をフォローしよう！
Follow @share_labFeedly、RSS、Push7はこちら！！
Line@はこちら！！