modal-top1

コピペでOK!スマートフォン対応モーダルウィンドウ内にソーシャルボタンを設置する方法

いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ

↑みなラボのページに「いいね!」はコチラから↑(>∀<)ノ☆ 


こんにちは!や~べ~です。

 
今回は、コピペでOK!スマートフォン対応モーダルウィンドウ内にソーシャルボタンを設置する方法、ということで記事を書いていきたいと思います。

 
自分の創った記事をスマートフォンでチェックしていると、

 
「なんか、ソーシャルボタン小さいな。」

 
記事の上下のソーシャルボタンがもの凄く小さい事に気が付きました。

ボタンが小さい。。。

 
「もっと大きくしないと、誰も押せないなぁ~。」

「どうにかしたいなぁ。。。」

 
ライトボックス、Jquery、ポップアップウィンドウ、、、色々と調べてみると、

 
「モーダルウィンドウ」というものを使えば、ウィンドウを画面上にポップアップさせることが出来ることが分かりました!

 
っということで、実際、創ってみました!

ソーシャルボタンを設置したモーダルウィンドウをご覧ください!

 
画面左下の共有ボタンをクリックすると、

共有ボタンをクリックすると

 
ソーシャルボタンを設置したモーダルウィンドウが画面上にポップアップします。

画面上にポップアップします。

 
では、内容に入っていきます!

※WordPress Twenty Fourteenテーマでの実施内容になります。

 

スポンサーリンク

コピペでOK!スマートフォン対応モーダルウィンドウ内にソーシャルボタンを設置する方法

 
モーダルウインドウをポップアップさせる動きは、実は「jQuery」というスクリプトを使って実現しています。

 
ですので、まずはその「jQuery」の適用方法から説明していきます。

 
「jQuery」の適用方法としては、ダウンロードして自サーバーに設置し、そこから読み込む方法と、Googleなどのサーバーに設置してあるファイルを読み込む方法があります。

今回は、後者の「Googleなどのサーバーに設置してあるファイルを読み込む方法」でコードを書きますので、ここでの準備は特に必要ありません。

自サーバー用のコードもコメントアウトして書いておきますので、参考にしていただければと思います。

 
↓jQueryの適用方法について詳しく書かれたサイトがあります。自サーバーに設置する場合に参考にしてください。

初歩的なjQueryプラグインの設置方法
http://web-pc.net/jquery001

wpc-shoho

 
↓自サーバーに設置される場合は、バージョンにも注意が必要です。
(みなラボは1.x 系を選びました!)

jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など
http://web-pc.net/jquery012

wpc-chigai

 
続いて、SNSのシェアカウントを取得する「SNS Count Cache」というプラグインを有効化しましょう!

シェア数のカウントにキャッシュを利用できるため、結果的にサイトの表示速度が速くなると言われています。

 
「SNS Count Cache」の詳細はコチラ↓の製作者まるぼんさんの記事をご覧ください。

[試] 表示速度改善のその先へ!進化するWordPressプラグイン SNS Count Cache
https://marubon.info/intro-update-wordpress-plugin-sns-count-cache-3-5403/

sikousakugo1

 
プラグインの追加方法が分からない場合はコチラを参考にして下さい。

「WordPressプラグインのインストール方法」をあえてまとめる
http://share-lab.net/wp-plugin-install1

 

スポンサーリンク

HTMLコード

jQueryの準備とプラグインの有効化ができたら、コードを書いていきましょう!

っとその前に、

 

編集の前に!

テーマの編集をする前には、必ずバックアップをとっておきましょう!

簡単なバックアップの取り方は↓の記事を参考にして下さい。

簡単!BackWPupでWordPressをバックアップする方法
http://share-lab.net/backwpup1

 
併せて、簡易的なサイトの復旧方法↓も参考にしてみて下さい。

WordPressバックアップを使ってサイトを復旧する方法
http://share-lab.net/wp-restoration1

(特に、function.phpを編集する時は注意して下さい。編集を失敗すると、画面が真っ白になってブラウザからアクセス出来なくなります。その時は、FTPソフトで復旧します。↑の記事に復旧方法を解説しています。)

 
では、内容の続きです。

下のコードをfooter.phpの</body>のすぐ上にコピペしましょう!

 

 
22行目の「自分のツイッター@アカウント」というところは、自分のTwitterアカウントを入れてください。(@を含まないように入れる)

ツイート内容に含みます。いらない場合は消してください。

41行目のFeedlyの部分にも「自分のサイト」のURLを入れてください。%2までの部分です。

例:みなラボの場合は、コード内の「自分のサイト」の部分を削除して、share-lab.netを入れる。

 
みなラボではWebフォントを使っていますが、今回は「共」という文字に代えさせて頂きました。

みなラボと同じWebフォントを使用される場合は、下のサイトを参考に「icomoon」を導入してもらい、「icon-share2」というWebフォントを適用してください。

 
【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方
http://shufulife.com/icomoon/

icomoon-11

 
「icomoon」を適用できたら、上のHTMLコードの50行目の、

を、↓のように編集して下さい。

 
これで、みなラボと同じWebフォントが適用されます!

 

スポンサーリンク

CSSコード

続いて、CSSの編集です。

style.cssに下のコードをコピペして下さい。

style.cssの下の方に、「Media Queries」とありますので、その直前あたりに記入して下さい。

Media Queriesの設定の無いテーマの場合は、文末で問題ないです。

 

 
参考にさせていただいたサイト

 
初心者でも分かる!モーダルウィンドウの作り方
https://syncer.jp/jquery-modal-window

mo-dary-sho1

 
【WordPress】プラグインを使わずにページのTOPへ戻るリンクを設置してみた。
http://takayakondo.com/page-top-link/

office-kondo1

 
コピペでOK!スクロールしてもついてくるオリジナルソーシャルボタンをブログに設置する方法
http://mama-hack.com/scroll-snsbox

mamahac-sns1

 

まとめ

コピペでOK!スマートフォン対応モーダルウィンドウ内にソーシャルボタンを設置する方法、ということで記事を書かせていただきましたが、いかがでしたでしょうか?

今はスマートフォンユーザーが多いので、スマートフォンユーザーの方にもなるべく便利に使ってもらえるサイトづくりが必要になっていると思います。

スマートフォンはPCと比べて、画面が狭いので、あまりゴチャゴチャと表示させると見辛くなってしまうし、かといって情報はソコソコ充実させないといけないと思うので、「何をどこに表示させるのか」が非常に難しいと思います。(真剣に考えると)

今回紹介した、モーダルウィンドウはポップアップで表示できるので、スマートフォンユーザーが記事をシェアしたいと思った時だけポップアップさせることができ、スマートフォンユーザーにとっての利便性が少しは向上するのではないかと思います。

 
コピペで実現できますので、気になった方、せひトライしてみて下さいね!

 
じゃあ、今回はここまでっ!!

ではではっ!(´∀`*)ノシ

 

ランキング

 
↓ランキング参加してます!よろしければ、クリックで応援して下さいっ!

にほんブログ村

 
↓こちらもお願いしますっ!

人気ブログランキングへ
 

 

最後までお読みいただいて、ありがとうございます。

もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです!どうぞ、よろしくお願いいたします!m(_ _)m

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで『みなラボ』をフォローしよう!

Feedly、RSSはこちら!!

follow us in feedly

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です