アメリカ時間の11月20日に、Twitterボタンが刷新されました。
それに伴い、以前はこんなだったTwitterの縦型ボタンが
全てこんなんに差し替えられました。
これで何が困るかというと、以下のような縦型のバルーンボタンを並べている場合だと、高さがそろわず不格好になってしまいます。
今回は、この単なるボタンだけになってしまったツイートボタンに無理やりバルーンを付加して、その他の縦型SNSバルーンボタンと、ある程度見た目を統一させるWordpressカスタマイズ方法の紹介です。
目次
主な手順
今回は、Twitter純正のボタンを利用して、縦型のバルーンボタンを作成します。
今回のカスタマイズの完成形は以下のようになります。
カスタマイズの主な手順は以下の2手順です。
- ボタンを表示させたい箇所にコピペ
- ボタン用のスタイルをコピペ
以下で、それぞれのやり方について説明します。
ボタンを表示させたい箇所にコピペ
まずは、Wordpressのテンプレート内でTwitterボタンを表示させたい箇所に、以下のコードをコピペします。
<div class="twitter_btn"> <a class="arrow_box" href="//twitter.com/search?q=<?php echo get_permalink(); ?>" target="_blank">リスト</a> <a href="https://twitter.com/share" class="twitter-share-button"{count}>Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div>
Twitterボタン作成用のコードは、Twitterボタン | Aboutからカスタムしたものも取得できます。
ボタン用のスタイルをコピペ
あとは、ボタン用のスタイルをstyle.cssにコピペするだけです。
.twitter_btn{ width: 68px; } .arrow_box { position: relative; background: #fff; border: 1px solid #ccc; margin-bottom: 5px; text-align: center; font-size: 11px; height: 33px; line-height: 33px; display: block; text-decoration: none; color: #333; border-radius: 3px; font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif; } .arrow_box:after, .arrow_box:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-width: 3px; margin-left: -3px; } .arrow_box:before { border-color: rgba(221, 221, 221, 0); border-top-color: #ccc; border-width: 4px; margin-left: -4px; }
バルーン用のスタイルは、以下のジェネレーターで作成しました。
動作確認
これを、Wordpress上で表示させると、以下のようになります。
これまでは、バルーン内にツイート数などが表示されましたが、今回のボタン機能の刷新でカウントは取得できなくなりました。
その代わり、「リスト」というテキストを入れています。
いろいろなサイト見てみたのですが、バルーン内のテキストは、以下のようなものが多かったように見受けられました。
- リスト
- 見る
- Tweet
- Tweets
「リスト」部分をクリックすると、タイムラインに飛ぶようにしてあります。
今回作成したボタンを、その他のSNSサービスのボタンと並べてみると、以下のように表示されます。
細かな色や、余白は、サイトに合わせて調節してください。
まとめ
これで、以前よりは統一感が出たのではないかと思います。
↓
ツイート数がないのは、少し寂しいです。けれど、どうあがいてもツイート数を取得できそうもなかったので、こういった見た目に慣れていくしかないのかもしれません。もしくは、全てシェアカウントを表示しないボタンにしてしまうか。
今回は新しいデザインのTwitterボタンを利用しましたが、以前のTwitterボタンの見た目を真似てボタンを作成する方法は、以下で紹介しています。
htmlのページの場合
href=”//twitter.com/search?q=”の部分を
jQueryでアドレスを取得してhrefに代入すればいいと思うのですが書き方が分かりません・・・
どうjsを書けばいいのでしょうか?