物を捨てきれないなりにミニマリスト目指す。

部屋や服や持ち物に気ままに最小限主義を取り入れる男性ミニマリスト系ブログ。断捨離の記事もそこそこ。あと、創作ヲタです。

最近の人気記事 | トータル人気記事

これでもう大丈夫!twitterボタンの表示崩れ対策のソース公開します

      2015/12/03

ea1c4c3d99dbd2201aa0f2fe6a10ebfa_s

以前、twitter公式のシェアボタンの仕様変更について書きました。

対策してますか?twitterボタン仕様変更によるブログの表示崩れ

ふと気づくと、当ブログのtwitterボタンが次のようなビジュアルになっていまし …

seminimalist.info

要約すると、「ツイートボタンの吹き出し部分が消えちゃったので、表示が崩れるよ」というお話。

↑こんなかんじに、ツイートボタンだけぴょこっと上付けされてしまう。

twitterはたしか公式ボタンの改変やロゴ改変が禁止だったはずなので、できれば公式ボタンをいじりたくはない。どうしようかなあと思っていたのですが、自分なりに解決してみました。以下、解決方法とソースを公開します。

公式ボタンに触ってはならぬの禁

前提 : 公式ボタンやロゴの改変はNGだったはず

まず、前提。twitterはシェアボタンやロゴマークの改変がたしか禁止だったはずです。色んなブログでやっているじゃんという話ですが、あれは見逃されているだけ。法人サイトとかだとtwitterからお叱りの声が来たりするらしい。

見逃されているならいいじゃんって意見もあるかと思いますが、なるべくなら触らぬ神に崇りなし、クリーンにいきたいと思います。というわけで、公式シェアボタンには手を入れない方向で考えてみました。

解決策 : 自作の吹き出しを乗っけてみる

たどりついた方法がこれです。

そう、「公式ツイートボタンの上に、自作の吹き出し乗っければいいじゃない」というものです。なんて力技。ツイートボタンはいっさいいじっていません。ツイートボタンの上に、たまたま、偶然、全然関係ない吹き出しが乗っかっているだけです。というスタンス。

ちなみに、吹き出しを押してもちゃんとシェアできます。

使用したソースの公開

では、以下実装に使ったソースを貼ります。ソースはwordpressのSTINGER5を念頭においていますので(多分コピペで動くはず)、それ以外のブログをお使いのかたは(たとえば、はてなブログなど)は適宜ソースを改変してご利用ください。

HTML


■sns.php変更前

<li>
    <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</li>



■sns.php変更後

<li class="twitter_button">
    <span class="arrow_box">
        <a href="https://twitter.com/intent/tweet?original_referer=<?php the_permalink(); ?>&ref_src=twsrc%5Etfw&text=<?php the_title(); ?>&tw_p=tweetbutton&url=<?php the_permalink(); ?>">つぶやく</a>
    </span><br />
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</li>

CSS


■CSSに以下を追加

.twitter_button .arrow_box {
position: relative;
background: #fff;
border: 1px solid #BDBDBD;
padding: 0 10px;
border-radius:3px;
top:-3px;
line-height:36px;
display:inline-block;
height:36px;
color:black;
margin-bottom: 3px;
}
.twitter_button .arrow_box a{
color:black;
text-decoration:none;
}
.twitter_button .arrow_box:after,.arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: ” “;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.twitter_button .arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 3px;
margin-left: -3px;
}
.twitter_button .arrow_box:before {
border-color: rgba(189, 189, 189, 0);
border-top-color: #BDBDBD;
border-width: 5px;
margin-left: -5px;
}

スポンサーリンク

スポンサーリンク

まとめ

というわけで、twitterシェアボタンの仕様変更への対応でした。上記のソースを反映させれば、吹き出しが表示されるようになるかと思います。お手元の環境によって表示が異なる場合や、1px、2px、もう少し小さくしたい大きくしたいなどある場合は、よろしくソースを修正してください。

下記画像は、記事を書いている現在のシェアボタンのレイアウト。

 

やっぱり、見た目が揃っていた方が気持ちいいですね。

 

記事下に関連記事を表示したい!Wordpress popular postsをカスタマイズした自作コードを公開

このたび、当ブログ「物を捨てきれないなりにミニマリスト目指す。」の記事下に表示し …

seminimalist.info

↑こんな記事も書いています。

他にも色々書いてます

 - web, wordpress, ブログ

にほんブログ村 ライフスタイルブログ ミニマリスト(持たない暮らし)へにほんブログ村 その他生活ブログ 断捨離へにほんブログ村 その他生活ブログへ

にほんブログ村に参加しています。この記事が一番当てはまるジャンルをお選び下さい

  あわせて読みたい関連記事

ブログ」カテゴリの人気記事 (more)

>>このカテゴリの記事をもっと読む

web」カテゴリの人気記事 (more)

>>このカテゴリの記事をもっと読む

wordpress」カテゴリの人気記事 (more)

>>このカテゴリの記事をもっと読む

Comment

  1. しぃ より:

    イイネ!
    全く違和感なくおさまってますね☆

    • ないなり より:

      しぃさん

      ありがとうございます~。
      ただ、こういった記事を作っておいて何ですが、twitterなどのシェアボタンは、最終的に四角いシンプルな独自ボタンにするかもしれません笑。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

▼コメント欄を開く