「WP Social Bookmarking Light」でFacebookの「いいね!」ボタンがズレを解消

「WP Social Bookmarking Light」でFacebookの「いいね!」ボタンがズレを解消

若干本題とは関係がないですが、WordPressのSharebarはスマホには未対応だそうです。

導入してからかなりの長期間、スマホに未対応であることに気が付いていませんでした。というより、スマホで表示されていないのはすぐに気が付いていたのですが、設定の問題かなんかだろうからそのうち気が向いた時にでもやろうと思っていたのです。でも、どうやらそもそも対応していないようです。

「WP Social Bookmarking Light」と併用

ということで、スマホでもSNSボタンを設置したいなら、何かと併用するなどしないといけなさそうです。そこでおすすめなのが「WP Social Bookmarking Light」です。おすすめの理由は、

  • 手軽であること(基本はプラグインを入れるだけ)
  • 日本の環境に向いている(日本人作で、初期状態で「はてブ」「LINE」にも対応している)

インストールしたらとりあえず使えるのでめんどくさがりの私にはピッタリです。Sharebarもはてブのボタンを設置で来ますが、初期状態では存在しないので後から追加しなければならないのです。

「WP Social Bookmarking Light」でFacebookの「いいね!」ボタンがズレる

とてもお手軽なこのプラグインですが、1つだけ残念なことがあります。それがFacebookの「いいね!」ボタンがズレてしまうという問題です。とは言え、SNSボタンなどというものは大体サービスの運営元の勝手な仕様でスタイルが決まっており、それもたまに仕様変更されるので、いちいち付き合わなければならないというのも大変です。

それに、このズレは簡単に直せますので良しとしましょう。

Facebookの「いいね!」ボタンのズレはCSSで調整

WordPress管理画面 > 設定 > WP Social Bookmarking Light

と移動しますと、下記のような画面に移動出来ます。そして「Style」となっているタブをクリックすると、CSSの内容が書かれておりますので、ここに追記したり書き換えたりすることでスタイルを変更することが出来ます。

WP Social Bookmarking Light

▼facebookのズレを直したいなら、下記を追加します。追加する場所はどこでもいいですが、最期に追加するのが無難です。

これだけでfacebookのズレは直ります。一応ですが、内訳的なことを説明すると、1つ目のCSSではPCのみズレが解消、2つ目も入れることにより、スマホでのズレが解消されます。

ちなみに、よく見るとその他のボタンも若干レイアウトのバランスが悪く見えるものもありますが、それらの調整も同じくこの「Style」にCSSを追記することで調整可能です。気になる方はそれぞれ調整してみると良いと思いますので、調整方法を参考までに。

Google Chromeの「デベロッパーツール」で目視しながら調整

近頃のブラウザは概ね「デベロッパーツール」が付いてますので、必ずしもGoogle Chromeではなくても良いですが、個人的にはこれが一番使いやすいので、同じ画面を見ながら調整したい方は導入すると良いでしょう。※Google Chromeにはじめから付いている機能ですので、Google ChromeをインストールするだけでOK。

Google Chromeで調整したいWebページを表示して「右クリック」、続いて「要素の検証」をクリックすると以下のようにデベロッパーツールが表示されます。ブラウザのメニューから呼び出す方法や、ショートカット(「option」+「command」+「i」)でもOKです。

Google Chrome developer tool

デベロッパーツールの左上の「虫眼鏡アイコン」をクリックした後、目当ての場所をクリックすると、該当する箇所のHTMLソースコードとCSSが表示されます。例えば以下のような感じで。

▼こちらがHTMLソースコード

Social bookmarking light source

▼こちらが選択したソースのCSS

Social bookmarking light source css

このデベロッパーツールが優れているのは、単純に内容を見せてくれるだけでなく、このツール上でHTMLやCSSを変更すると、そのままページ上でシュミレーションできるということです。これならば画面を見ながら思惑どおりの答えをその場で出すことが出来ます。

例えば数値を調整したり、あるいは新たなCSSを書き加えたりも、その場で即時反映されます。

CSSを追加したい場合は、該当するHTMLソースコードを選択したまま今度はツール右上の「+」をクリック。

Social bookmarking light source css 2

▲とこのように「.wsbl_hatena_button」が新たに追加されましたので、そこに続けてCSSを書くことが出来ます。

▼ちなみにこのツール、このように補完機能が付いています。例えば「dis」などと冒頭部分を書くと、予測して「display」まで表示され、そのタイミングで「tab」を押すと「display」が書き込まれた状態になるので手早く作業出来ます。

Social bookmarking light source css 3

続けて…

Social bookmarking light source css 4

と、このようにその中身の候補も表示してくれますので、クリックするなどで選択するとその内容が反映されますので、非常に使い勝手が良いです。

この方法で色々試してみて、満足のいく結果が出たらあとはこの部分をまるっとコピーすることが出来るので、先ほどの「Style」に戻って貼付ければOKです。