SNSシェアボタンをHTMLとJavaScriptでつくる【Twitter/Facebook/LINE/hatena/pocket】
ブログやメディアサイトではほとんどが実装しているSNSシェアボタン。 公式のプラグインを使うと、簡単にシェアボタンを作成することができます。 しかし、デザインがプラットフォームによってバラバラであることや文言の調整が難しい点からスクラッチでつくりたいなーと思い、CSSで自由にカスタマイズ可能なHTML側のコピペ用SNSシェアボタンのコードをまとめてみました。 スクラッチでつくれば、統一したデザインでつくれるので、ぜひ参考にしていただければと思います。 SNS ボタンをスクラッチでつくる際の注意点 ボタンをつくってデザインを編集する際、一旦SNSのプラットフォーム側のブランドガイドラインを確認しましょう。 公式のブランドガイドラインには、アイコンを斜めにしてはいけない・視認性の悪い組み合わせにしない等のルールが書いてあります。 あと、現在開いているページのURLをシェアするにはJavaScr
個性的なデザインのSNSシェアボタン17選【CSS/JavaScript】 - Workship MAGAZINE(ワークシップマガジン)
さまざまなジャンルのWebサイトで目にする、SNSシェアボタン。せっかくなら既存のデザインを使うのではなく、Webサイトの雰囲気にあわせたオリジナルのボタンを使いたいですよね。 今回は、CSSやJavaScriptで制作されたSNSシェアボタンをご紹介します。 1. ブログにおすすめのサイド配置SNSシェアボタン はじめにご紹介するのは、ブログやメディアサイトなどでよく使われている、サイドに配置されたSNSシェアボタン。見出し近くの最上部に固定することも、スクロールに追従させることも可能です。 デザイン性に優れており、自然にWebページに溶け込みます。ブログにオリジナルのSNSシェアボタンを使いたいなら、まずこのテンプレートからはじめてみましょう。 See the Pen Share Buttons Inspired by IGN by Michael Schofield (@michae
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
