breakこのウェブサイトはご利用の端末での閲覧に対応していません。1st,2016ウェブサイトの記事をソーシャルネットワークサービス(SNS)やソーシャルブックマークなどでシェア、共有してもらうためのソーシャルボタン。そのソーシャルボタンをオリジナルのデザインにする方法を紹介。ソーシャルボタン“ソーシャルボタン”とは?オリジナルのソーシャルボタンのメリットオリジナルのソーシャルボタンのコードFacebooktwittergoogle+LINEはてなブックマークPocketソーシャルボタン#“ソーシャルボタン”とは?“ソーシャルボタン”はニュースサイトやブログなどでよく見られる、閲覧しているウェブサイトの記事や情報などをソーシャルネットワークサービス(SNS)やソーシャルブックマークなどで共有するための機能を持ったボタンです。Facebookやtwitter、はてなブックマークなど代表的なサービスはそれぞれ公式のシェアボタンを提供しています。#オリジナルのソーシャルボタンのメリット公式のソーシャルボタンは簡単に設置できてとても便利ですが、いくつかデメリットもあります。オリジナルの画像を用意してソーシャルボタンとして使用することでそういったデメリットを解消することができます。ウェブサイトのデザインに合ったデザインにできる。公式のソーシャルボタンはそれぞれサイズが微妙に違ったり、複数配置した時に配置した時に微妙にずれたりします。オリジナルのデザインにすることでウェブサイトになじむデザインにすることができます。読み込み速度を速くできる。公式のソーシャルボタンはJavaScriptの読み込みが必要な場合が多く、ページの表示速度が遅くなる原因になりますが、Javascriptを使用しないオリジナルのデザインにすることで改善することができます。オリジナルのソーシャルボタンのコード#FacebookFacebookで記事をシェアしてもらうためのボタンです。target="_blank">Facebookでシェア</a>#twittertwitterで記事のことをツイートしてもらうためのボタンです。target="_blank">ツイートする</a>TwitterでツイートしてもらいたいURLにパラメータを使用するとTwitterのアカウントやハッシュタグなどツイートに様々な情報を追加することができます。ツイートに含めたいページのURL(“http://”含む)を記述します。ツイートに含めたいテキストを記述します。ツイートに含めたいtwitterアカウント(“@”を除く)を記述します。「@****さんから」という形で表示されます。ツイートした後に関連したtwitterアカウント(“@”を除く)として表示したいものがあればを記述します。ツイートに含めたいハッシュタグ(“#”を除く)を記述します。カンマ(“,”)で区切ることで複数記述できます。パラメータはアンパサンド(“&”)で区切って記述します。target="_blank">ツイートする</a>#google+Google+で記事をシェアしてもらうためのボタンです。target="_blank">Google+でシェア</a>#LINELINEで記事をシェアしてもらうためのボタンです。href="https://timeline.line.me/social-plugin/share?url=記事のURL(“http://”含む)">LINEで送る</a>LINEのソーシャルボタンは公式に提供されている画像か「LINEで送る」「LINE」のテキストのみ使用が許可されています。#はてなブックマーク記事をはてなブックマークにブックマークしてもらうためのボタンです。はてなブックマークはあとで読みたいコンテンツをブックマークしておけるサービスです。target="_blank">はてなブックマーク</a>#Pocket記事をPocketのクリップボードにクリップしてもらうためのボタンです。Pocketはあとで読みたいコンテンツをクリップしておけるサービスです。target="_blank">Pocket</a>。