以前の投稿ではtwitterの公式サイトhttps://publish.twitter.com/でのメディアボタン等の埋め込み方法を記載しましたが、今回は公式サイトhttps://dev.twitter.com/web/tweet-buttonを参考にボタンの見た目を変更して行く方法を投稿します。
公式サイトhttps://dev.twitter.com/web/tweet-buttonから基本のタグを確認
公式サイトhttps://dev.twitter.com/web/tweet-buttonから基本のタグを確認します。下記が基本のタグです。
<a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
今回は見た目を調整して行くのでaタグのclass=”twitter-share-button”必要ないので消去して、自分の好きなclass名をaタグに指定します。twitterでもbtnでもbuttonでもなんでもOKです。
今回はtwitterと指定class名を指定したと仮定して進めていきます。
<a class="twitter" href="https://twitter.com/intent/tweet">Tweet</a>
CSS(スタイルシート)で見た目を調整
classのtwitterに見た目を調整するスタイルを指定していきます。
.twitter { background-color: #55acee; border: 2px solid #55acee; border-radius: 0; color: #fff; padding:4px 32px; -webkit-transition: all .3s; transition: all .3s; } .twitter:hover { background-color: #fff; color: #55acee; }
下記のようなボタンが作成されます。
丸ボタンがよければborder-radius: 0;のところに好きな数値を入れると丸まります。20pxを指定すると下記のようになります。
これでCSSで見た目が作成できました。
href属性を指定
href属性にhttps://twitter.com/intent/tweetを追加。その際にいくつかクエリパラメータを指定して、シェアする内容を指定できます。
今回は、下記の4個を指定します。
text | twitterしたい文言を指定 |
---|---|
url | シェアしたいurlを指定 |
via | Twitterのユーザー名を指定 |
hashtags | ハッシュタグを指定 |
<a class="twitter" href="https://twitter.com/intent/tweet?text=TwitterのシェアボタンをCSS利用してオリジナルのデザインにする方法&url=https://level-up-notebook.com/css/1214/&via=fe2_lt&hashtags=css,twitter" target="_blank">twitter</a>
これでスクリプトのhttps://platform.twitter.com/widgets.jsを読み込むと小さい別ウインドウでtwitterが開かれるようになります。(最新のchromeで動作を確認)
以上がTwitterのシェアボタンをCSS利用してオリジナルのデザインにする方法です。
よろしければ、ぜひシェアを!!