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

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

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

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

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

主な手順

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

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

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

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

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

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

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

<div class="twitter_btn_h">
  <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_h{
  width: 116px;
}

.twitter_btn_h .arrow_box{
    float: right;
    line-height: 20px;
    height: 20px;
    width: 40px;
    display: block;
    text-decoration: none;
    color: #333;
    border-radius: 3px;
    font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    font-size: 11px;
    text-align: center;
}

.twitter_btn_h .arrow_box {
    position: relative;
    background: #fff;
    border: 1px solid #ccc;
}
.twitter_btn_h .arrow_box:after,
.twitter_btn_h .arrow_box:before {
    right: 100%;
    top: 50%;
    left: auto;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.twitter_btn_h .arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 3px;
    margin-top: -3px;
}

.twitter_btn_h .arrow_box:before {
    border-color: rgba(204, 204, 204, 0);
    border-right-color: #ccc;
    border-width: 4px;
    margin-top: -4px;
}

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