SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

サンプルデモ真ん中寄せをして、ウィンドウの横幅が480px以上の場合は、5つのシェアボタンを横並びで表示し、スマホなど、ウィンドウの幅が狭いブラウザでは、LINEを含めた6つのボタンを1行に3つずつ表示するレスポンシブ仕様になっています。ここで表示している個々のボタンは画像を使用していますが、実際と同じように動作するので、ウィンドウの幅を広げたり縮めたりしてみて下さい。実際のシェアボタンでのデモを見たい人は、「サンプルデモを見る」のボタンから別ページにアクセスして下さい。 HTML <h2>シェアボタンの表示</h2> <p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p> <

[ftype]

onloadじゃなくてaddEventListener('load',~)のほうがよいのでは

[kijtra]

メデイアクエリにiPhone6と6+を考慮してない人多いよね。

[yunyunyunyn]

[シェアボタン］［SNS］

[atwata]

神まとめ

[momijitan]

めっちゃ参考になった！

[tokumita]

SNSのシェアボタンの設置方法

[t-saku31]

解説も上手いし、デザインが良くて読みやすい！参考にしょう

[noriyae]

ソーシャルボタンの設定

[isshyman]

シェアボタン

[pokotanu]

サイトのUIに好感がもてる

[srsrbilly]

シェアボタンなどの表示。facebookがいいねではなく、シェアがよい

[Arison]

SNSのシェアボタン参考にさせていただきました。

[nyarugo]

“/****************************** ソーシャルエリア全体を囲む要素 * 他のコンテンツと距離を取りたい場合は[margin]を設定して下さい ******************************/ .social-area-syncer { width: 100% ; min-height: 190px ; background: #F5F1E9 ; /* 背景色 */ padd

[kupoyuki]

最高

[h164tan1]

サンプルコードとカスタマイズ方法がまとめられているので、参考になる。

[muffxx]

“text”

[xxxcynical134xxx]

シェアボタン設置解説

[kiyo560808]

参考になる。

[glat_design]

色々情報まとまってて便利 /

[eu_z]

]

[kurobuchi]

ソーシャルボタンの設置方法を詳しく解説。必要な時に見る。

[jun5534]

今後のために

[exactman]

絶対

[yutakkhappy]

めも