Bloggerでツイートボタンにバルーンを表示してみた

当ブログではいろいろSNSボタンを設置していますが、ツイッターのツイートボタンだけバルーンが表示されていないのが浮き出ていてなんかおかしいです。

今回は、Twitterのツイートボタンにバルーンをつけてみました。

参考にさせていただいたページ

下記リンクのページを参考にさせていただきました。

新しくなったTwitterボタンを「縦型のバルーン付きボタン」にする方法

なお、リンク先のページはWordPress用になっていたようなので、Blogger用に書き換えました。

設置方法

1. 設置しているツイートボタンのコードのすぐ上に下記コードを追加する。なお、CSSで整形するためidを設定している（class="allow_box"）。

<a class="arrow_box" expr:href='"//twitter.com/search?q=" + data:post.canonicalUrl' target="_blank">list</a>

2. 下記CSSコードを、カスタマイズからHTML編集にてCSSの最後に追加する。

<style>
//吹き出しの枠設定
.arrow_box {
  position: relative;
  background: #fff;//背景色
  border: 1px solid #ccc;//枠線と色
  margin-bottom: 5px;//下のマージン
  text-align: center;//テキストをセンターにする
  height: 33px;//高さ
  line-height: 33px;//ラインの高さ
  display: block;
  text-decoration: none;//リンク線をつけない
  color: #000;//テキストの色
  border-radius: 3px;//枠の角の丸みの半径
  width:76px;//幅
}
.allow_box:link{color#000}//リンクの色
.arrow_box:hover{color:#000;}//訪問済みリンクの色
.arrow_box:visited{color:#000;}//リンクマウスオーバーの色
//吹き出しの下の出っ張りの設定
.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;
}
</style>

なお、ツイート数は公式APIでは取得できないようなので、代わりにリストを表示するようにしました。

下のボタンのように表示されますので、環境に合わせてCSSをカスタマイズしてみてください。


以上、参考にしていただけたら幸いです。