いいね！ボタンのズレが許せない性格。

みなさんこんにちは！ミュンヘンのWeb担当mak utsunomiya(@munchen_stil)です！人の血液型は大きく4つに分かれますが、血液型占いで、人の性格がたった4つに分類されるなんて信じられますか？O型が大雑把！？誰がそんな事決めたんだよ！

O型の私にとっては侮辱にも近い言葉ですよ！iPhoneを落としてヒビだらけになり、そのまま1ヶ月過ごし、近所のソフトバンクの店長に「ここまでの画面を1ヶ月も放置していた人は見たことがない！」と言わしめた私のどこが大雑把なのだ！非常にけしからん！(怒)

そんな、細やかな神経の持ち主である私が、当ブログで一つだけ気に入らないところがあるのです、それが「いいね！」ボタンが左にずれている事です｡ﾟ(ﾟ´Д｀ﾟ)゜｡ｳｧｧｧﾝ

こんな感じになってしまいました・・・。

 

原因を探る。

正直、これは本当に原因がわからなくて、ネットサーフィンを繰り返しても全く同じ症状が出ている方がいらっしゃいませんでした。

いいね！ボタンのズレの報告と言うのは結構多いのですが、Facebook側のバグで他に設置しているソーシャルボタンより、少し下にずれるという問題が殆どを占めていて、対策法なども多く出ています。

しかし、当ブログの左にずれる現象はいくら探しても見つからなかったのです。

という事で、自分なりに解決法を探らなくてはならないのですが、これが困難を極めました。なぜかって？PHPとCSSが良くわからないから・・・。

 

CSSを縮小するプラグインかバグが原因！？

いいね！ボタンのズレは、フェイスブック側のバグじゃないのかって線も考えられましたが、ツイッターなどで調べても同様のバグは報告されておらず、違う原因があるのかもと考えて見ました。

当ブログはAutoptimizeというCSSを縮小するプラグインを導入してましたが、CSS縮小によりブログのデザインが崩れている可能性も否定できなかったため、Autoptimizeを削除。

念の為、FTPツールから「Autoptimize」の名がつくものをサーバー上から全部削除してみましたが、結果は変わらず・・・。

ひょっとしたらMySQLにデータが残ってるかも知れませんが、データベースを触るのは少し怖いので、とりあえず違う方法を考えます。

 

テーマのPHPとCSSを確認。

PHPがわからないなりにも、ソーシャルボタンがどう設定されているのか見てみる事にしてみました。当ブログはTCDのGorgeous (tcd013)を使用しています。

その中のPHPとCSSを調査。どうやら記事直下のソーシャルボタンは、「bookmark2.php」に納められているようです。(ここにたどり着くまで何時間要したことか・・・。)

 

bookmark2.php

<ul class="bookmark2 clearfix">
 <li class="twitter_button">
  <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">tweet</a>
  <script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 </li>
 <li class="facebook_button">
  <div class="fb-like" data-href="<?php echo "http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI']; ?>" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
 </li>
<?php if (strtoupper(get_locale()) == 'JA') : //show only for japanese user ?>
 <li class="hatena_button">
  <a href="http://b.hatena.ne.jp/entry/<?php echo "http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI']; ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
  <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
 </li>
<?php endif; ?>

TCD Gorgeousは、デフォルトでTwitter、Facebook、はてブのソーシャルボタンが用意されています。上記がその3種類を表示するPHPなのですが、「class=”bookmark2」で3種類が一くくりにされているようです。

 

cssをチェック

/* bookmark */
.post .bookmark2 { clear:both; margin:0; padding:10px 0 25px 0; }
.post .bookmark2 li { background:none; padding:0; float:left; margin:0 10px 0 0; }

bookmark2のスタイルはどうやらこのcssの記述でデザインを決めているよう。と言うよりそんな感じがします^^つまり、3種類のソーシャルボタンを「bookmark2」に統一し、CSSで3種類全てを一つの記述で表示させていると言う事になりますね。

で、実は一番悩んだのがこの部分で、Twitter、Facebook、はてブが別々のCSSでスタイルを決められているなら、いいね！ボタンだけ編集すればよかったのですが、統一されているということは、一つ動かすと3種類のボタンの全てのデザインが崩れてしまうんじゃないか？

いろんなテストをやる前から、そんな気がして実践できなかったのです。とにかく何かやってみ見ないといけないと思っていましたが、深く考えすぎて数日悩んでいましたが、よくよく考えてみると解決方法は意外と簡単でした。

 

カスタムCSSで.fb-likeのみを動かす！

幸いな事に、TCD GorgeousはカスタムCSSが標準装備されています。今ではほとんどのテーマが、カスタムCSSで編集できるようになっているんではないでしょうか？

カスタムCSSは、通常のCSSの後に読み込むようになるため、最終的にはカスタムCSSで追記したソースがデザインに反映されるようになります。そこで思いついたのが、いいね！ボタンの左右位置の崩れをカスタムCSSで直してやろうという画期的な方法です。

まぁ、CSSが理解できてる人は、普通にそうやるよねって方法ですが^^

上記のbookmark2.phpの中で、フェイスブックのいいね！ボタンを表しているのは、classで指定されている「fb-like」の部分になります。と言う事は、カスタムcssに右側の余白部分を広げる記述をしてあげればいいだけだったのです。（はよ気付けよっ！）

 

補正したcssのソースコード

カスタムcssに追記したソースは以下のようになります。

/* いいね！位置修正 */
.fb-like {
vertical-align: top;
margin: 0 0 0 10px;
}

vertical-align:は、縦方向の位置を合わせる記述です。今回の場合は、横方向のデザインずれだけなので、必要かどうかはわかりませんが、念のため記述しておきました。

topと記述する事で、他のソーシャルボタンのトップ位置にいいね！ボタンを合わせる作戦です。

重要なのがここ、「margin:」です。marginは空白を作るソースですが、0 0 0 10pxとしたのにも意味があります。4つの数値を記述する事で、上、右、下、左の順番で余白を作ることが出来ます。

左を10pxにしたのは、元のCSSで右の幅が10pxだったからです。

今回の「いいね！」の位置ずれはツイッターボタンとの間が、“0”になっていたので、カスタムCSSで強制的にツイッターボタン、つまり左側との差を10pxあけることにしました。

 

結果は！？

ご覧の通り！作戦が成功し、3種類のボタンが平均的に並ぶようになりました！これはキャプチャですので、もし最後までこの記事をご覧になられたら、記事直下のボタンの並びがおかしくなっていたらコメント蘭からでもいいので教えて下さいませ。

もし、フェイスブック側のバグだった場合も、カスタムCSSならソースコードを消すだけでいいので、簡単でいいですね^^

 

まとめ

結局のところ、原因はわからずじまいでしたが、結果的に尚って良かったと思います。多少なりともcssの勉強にもなりましたし^^まぁWordPressやるなら最初からCSS勉強しとけよって話ですけどね・・・。

今回はこの方法で直りましたが、テーマやソーシャルボタンの導入方法によって修正の仕方は違いますが、同様の症状でお悩みの方の参考になれば幸いです。