刷新されたTwitterボタンを「横型のバルーン付きボタン」にする方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

前回、縦型バルーンボタンの作成方法について書きました。

新しい縦型ツイートバルーンボタンを他のSNSサービスのボタンと並べてみる

今回は、一応横型のバルーンボタンのWordpressカスタマイズ方法についても書きたいと思います。

横型のボタンは、バルーンが表示されなくても、そこまで違和感のある表示にはなりません。

横型のバルーンボタンが不格好になってしまう

ただ、「他のボタンでバルーンぽいものがあるのにTwitterだけないのも…」なんて場合のためのカスタマイズ方法の紹介です。

スポンサーリンク
レクタングル(大)広告

主な手順

今回も、Twitter純正のボタンを利用して、縦型のバルーンボタンを作成します。

今回のカスタマイズの完成形は以下のようになります。

Twitterの純正ボタンに横型のバルーンを付加する

カスタマイズの主な手順は以下の2手順です。

  1. ボタンを表示させたい箇所にコピペ
  2. ボタン用のスタイルをコピペ

以下で、それぞれのやり方について説明します。

ボタンを表示させたい箇所にコピペ

まずは、Wordpressのテンプレート内で「横型のバルーン付Twitterボタン」を表示させたい箇所に、以下のコードをコピペします。

Twitterボタン用のコードは、Twitterボタン | Aboutからカスタムしたものも取得できます。

Twitterボタン作成ページ

ボタン用のスタイルをコピペ

あとは、横型ボタン用のスタイルをstyle.cssにコピペするだけです。

こちらのスタイルは、「縦型のバルーン付きボタン」と併用しても問題ないように書いてあります。

新しくなったTwitterボタンを「縦型のバルーン付きボタン」にする方法
アメリカ時間の11月20日に、Twitterボタンが刷新されました。 それに伴い、以前はこんなだったTwitterの縦型ボタンが ...

ただ、併用する場合は、CSSで同様のプロパティ設定が重複する箇所もあります。表示上は問題ないですが重複部分が気になる場合は、不要な部分を削除してください。

バルーン用のスタイルは、以下のジェネレーターで作成しました。

動作確認

WordPressでのカスタマイズ後は、以下のようになります。

Twitterの純正ボタンに横型のバルーンを付加する

「リスト」と書かれている部分は、Twitterのタイムラインへのリンクになっています。

他のSNSボタンと並べてみるとこんな感じなります。

カスタマイズ後の横型ツイートボタン

細かな色や、余白は、サイトに合わせて調節してください。

まとめ

カスタマイズ前と後を比較してみると、こんな感じになります。

横型のバルーンボタンが不格好になってしまう

カスタマイズ後の横型ツイートボタン

横型ボタンは、縦型ボタンと比べて、バルーンがなくても、それほど違和感はありません。なので、ボタンの横幅を調節してしまうだけでも良いような気がします。

 

古いTwitterボタンのデザインを無理やり再現する方法は、以下で紹介しています。

コピペで実装!廃止されるTwitter純正の吹き出し付きツイートボタンの代替案
先日Twitterブログにて「Twitterボタンのシェア数」の廃止と、非公式カウント取得APIの廃止が発表されました。 今まで...