TwitterのシェアボタンをCSSを利用してオリジナルのデザインにする方法

カテゴリー:CSS

以前の投稿ではtwitterの公式サイトhttps://publish.twitter.com/でのメディアボタン等の埋め込み方法を記載しましたが、今回は公式サイトhttps://dev.twitter.com/web/tweet-buttonを参考にボタンの見た目を変更して行く方法を投稿します。

・以前の投稿はこちらから

twitterをWordPressに埋め込む方法

twitterをWordPressに埋め込みたいと思いtwitterの公式サイトを見本に埋め込んだ時の方法を備忘記録として、記載します。以前に、twitterのcardをWordPressで使用する方...

公式サイト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に見た目を調整するスタイルを指定していきます。

・.cssのファイルに追加するか<style>タグ内に下記を追加。
.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個を指定します。

texttwitterしたい文言を指定
urlシェアしたいurlを指定
viaTwitterのユーザー名を指定
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利用してオリジナルのデザインにする方法です。

よろしければ、ぜひシェアを!!

twitter公式サイトはこちらから


タグ

関連する投稿

ドラクエ好きな社会保険労務士有資格者・ファイナンシャルプランナー技能士検定2級正会員が運営をしています。当ブログではDQMSLを中心にWordPress・HTML・CSS・JS・PHPなどのTips備忘記録や資格関連の情報、その他雑記を発信して行きます。