CSS

wordpressでモバイル端末にも最適化されたレスポンシブなSNSボタンを実装する

 

最近良く見かけるフラットデザインなSNSシェアボタンをwordpressで使えるように実装します。

buttons

こんなアレです。ささっと集めてしまったのでグリーンばかり揃ってしまいましたが、国内外問わずコンバージョンを求める一手はグリーンが有効と考えられていることが顕著に現れているかと思います。

フラットデザインなSNSシェアボタンをwordpressで使う

今回はTwitter、Facebook、LINEの3つです。ちなみに当ブログをスマートフォンで表示するとこの3つが現れます。

ではまずHTMLから書いていきます。

classは仮に「snsbar」としておきましょう。

今回の3媒体はデフォルトのボタンを使わない場合このようにリンクを記述する形となります。

Twitter…http://twitter.com/intent/tweet?url=【ツイートするページのURL】&text=【ツイートするテキスト】
Facebook…http://www.facebook.com/share.php?u=【シェアするページのURL】
LINE…http://line.me/R/msg/text/?【LINEで送るタイトル】%0D%0A【LINEで送るURL】

といった感じです。ちなみにFacebookは「シェア」です。
次に、文中で関数になってる部分を書きます。

3~6、12～15行目のif(!is_home())は、トップページ以外での処理です。
$snsUrlにはget_permaink()で表示中のページのリンクを、$eTitleには表示中の記事のタイトルを格納しています。それぞれurlencode関数でURLに適した形にエンコードしましょう。

トップページの場合は$snsUrlにサイトトップページのURL、$eTitleには「表示中の記事のタイトル｜サイト名」という形で情報を格納しています。

全部同じやつで良くね？と思うかもしれませんが、TOPページで記事一覧を表示しているとその一番上の記事情報を取得してしまうっぽいのでif(!is_home())で条件分岐することにします。

ページが遷移しないように各リンクにjavascriptでonclickを指定してウィンドウを新しく開いてもらいましょう。

function onclickwindow($what){ //onclick=用の関数  　echo "window.open(this.href, '" . $what . "', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes');  　return false;";  }

単純に、onclick=””の処理を書いているだけです。onclick=””と書きます。Facebookの場合はonclick=””としましょう。

で、これらを纏めて「snsbar.php」などと名前をつけて別ファイルで保存し、single.phpやhome.php中で呼び出します。

1ページの中で複数回呼び出すときは必ず上記の関数をfunctions.php内に記述するようにしてください。

SNSシェアボタン用のCSSを書く

条件は

  • モバイル端末に最適化
  • フラットなボタン
  • マウスオーバー、タップ（クリック）したときにアニメーション
  • 常に画面上部に表示される

とします。状況に合わせて変更してください。

.snsbar {   width: 100%;   position: fixed;   top: 0;   display: table;   table-layout: fixed;   z-index:99;  }    .snsbar li {   display: table-cell;  }  	  .snsbar li a{   text-align: center;   padding: 8px;   display: block;   border-radius: 4px;   color: #fff;   font-weight: lighter;   font-size: .8em;	   text-decoration: none;   text-shadow: #999 -1px -1px 0px;   transition: all .12s ease-in-out 0s;   position:relative;   bottom:0;  }  .snsbar li a:hover , .snsbar li a:focus , .snsbar li a:active{   bottom:-3px;  }    .snsbar li.line a {   background-color: #51E451;   box-shadow: #138013 0 3px 0;  }  .snsbar li.line a:hover , .snsbar li.line a:focus , .snsbar li.line a:active{   box-shadow: #138013 0 0px 0;  }    .snsbar li.tw a {  background-color: #00aced ;   box-shadow: #006C95 0 3px 0;  }  .snsbar li.tw a:hover , .snsbar li.tw a:focus , .snsbar li.tw a:active{   box-shadow: #006c95 0 0px 0;  }  	  .snsbar li.fb a {   background-color: #3b5998;   box-shadow: #004040 0 3px 0;	  }  .snsbar li.fb a:hover , .snsbar li.fb a:focus , .snsbar li.fb a:active{   box-shadow: #004040 0 0px 0;  }

今回はTwitter、Facebook、LINEなので各イメージカラーをbackground-colorで指定しています。box-shadowはボタンの高さを出しているいわば側面の部分です。borderでも出来ますが、:hover , :activeなどの処理で要素の位置がズレ込んでしまいますので、box-shadowを使います。（レガシーブラウザに対応したくてどうしてもボタンの高さを出したいときはborderがいいです）

ボタンを含んでいる.snsbarにはdisplay:table; table-layout:fixed;とwidth:100%を指定します。ボタンを包んでいる.snsbar liにはdisplay:table-cellとしましょう。
この指定で、各要素が均等な幅で均等な高さで並びます。詳しく（?）はグローバルナビの実装に便利！CSSプロパティdisplay: table-cellを使おうに書いています！

今回のように「画面上部に常に表示」しない場合はposition: fixed;は外しましょう。

はい、これで画面上部にフィットするSNSシェアボタンが完成しました～！
しかしこのままだと、position:fixedで高さを認識されなくなったボタンでコンテンツが隠れてしまいます…

bt

当ブログの場合は#headerがボタンを包んでいるので、ここにmargin（padding）-top:【ボタンの高さ】を指定してボタン分の幅（スペース）を持たせましょう。bodyなどすべてのコンテンツを包む要素に指定してもOKです。
firebugとか開発者ツールで高さを測って普通にCSSを指定しても良いのですが、環境の違いで変に間があくことが無いように、ボタンそのものの高さをピッタリと取得して指定するためにjQueryを使いましょう！

SNSボタンのために書くjQuery

$(function(){     var containermt = $(".snsbar").height();   $("#header").css("padding-top" , containermt);	    })

$(“.snsbar”).height();で高さを取得します。変数containermtに格納して.cssでpadding-topを指定しています。
jQueryが動かなかった場合を考慮するなら、CSSで.snsbar li aにpaddingとheightで高さを調節して頂いて、直接#headerなどに記述してくださいね。

これでやっと画面上部にフィットして表示されます！お待ちどうさまでした！（需要は謎ですが）

しかし日本人なので余計な気遣いが好きなのです。スクロールして閲覧してくださっている方々にせめてもの敬意を払い、ある程度スクロールしたらボタンを半透明にする指示を加えましょう。

SNSボタンのために更に書くjQuery

$(function(){     var containermt = $(".snsbar").height();   $("#header").css("padding-top" , containermt);  	   $(window).scroll(function(){      var windowheight = window.innerHeight;    var scrollEvent = (windowheight - containermt) / 2;    var scrollTopValue = $(window).scrollTop();      if(scrollEvent < scrollTopValue){     $(".snsbar").fadeTo("fast" , .8 , function(){      $(">li a" , this).bind("click mouseover focus" , function(){       $(".snsbar").fadeTo(0 , 1);      })    });   }  });  	  })

5行目以降の記述です。スクロールしたら発動するイベントのためscroll()を使います。

変数windowheightには、window.innerHeight();で取得した画面の表示領域の高さが代入されています。
window.innerHeight – ウィンドウ内側の高さを得る – JavaScriptリファレンス
それからボタンの高さを引き、2で割った値を代入したのが関数scrollEventです。（この辺りは自由に数値など入れて頂いていいかもしれません。あくまで目安の値です）

$(window).scrollTopで画面上端からスクロールした値を取得しているのがscrollTopValueで、
element.scrollTopプロパティ – JavaScript（ジャバスクリプト）リファレンス

先ほどのscrollEventよりも、scrollTopが大きくなった時に（つまり、ある一定量スクロールして進んだ場合）に12行目以降の{～}内の処理でボタンを半透明にする、というカラクリです。

では半透明にする処理の内容を見ていきます。13~17行目に書かれているものです。

$(".snsbar").fadeTo("fast" , .8 , function(){   $(">li a" , this).bind("click mouseover focus" , function(){     $(".snsbar").fadeTo(0 , 1);   })  });

まず.snsbar（SNSボタンを包んでいる要素）を透過率80%までアニメーションさせます。続けて、コールバック関数で、半透明を解除する指示を追記しておきましょう。

$(“>li a” , this)は、「.snsbar直下のli要素」を指しています。続いている.bind(“click mouseover focus” , function(){～…は、「クリック、マウスを乗せた時、要素を選択している時に、function()の処理を発動する」という命令です。ここでさきほどスクロールして透明になってしまったボタンを通常まで戻します。
.bind() | jQuery 1.9 日本語リファレンス | js STUDIO

以上でスクロールで透過する処理は完了です！少し長くなってしまいましたね…

 

でわ！

コーディング
RELATED POST