Web designer

AKI MURAHASHI

新デザインの「いいね!ボタン」。box_countの背景色を変更する方法

shutterstock_259921289

Facebookは先月末「いいね!ボタン」のデザインを刷新しました。

l_yu_button2
出典:http://www.itmedia.co.jp/

いいね!ボタンの種類にはstandardのほかbox_count、button_countなどがありますが、変更点はどれも数字のカウント部分まで青色に含まれるようになった点です。

box_countの数字が見えにくくなる場合も

新デザインへの変更は自動的に行われているため、気付かないうちに修正が必要な状態になっているかもしれません。

例えば、背景に暗い色を使っている箇所で「box_count」を設置している場合は、数字が見えなくなっています。
7116

知らないうちにこのような状態になっている場合があります。

この場合は、以下のように背景を白色などに変更することで解決できます。

7114

box_countの数字部分の背景を白色にする方法

まず、Facebookの「facebook for developers」でソースコードを生成します。

生成されたソースコードに、背景色角丸をインラインスタイルで追加します。

style=”background-color: #fff; border-radius: 4px;”

ただ背景を白色にするだけでは、白色がはみ出してしまいますので、上記サンプルのように『 border-radius: 4px; 』の記述が必要です。

これで、背景が暗い箇所でも問題なく数字が見えるようになります。


Web designer

AKI MURAHASHI

Webデザインを担当しています。前職はアパレル業界でパタンナーをしていました。洋服のデザインや商品企画のほか、ファッションショーの構成にも参加していました。
マスキングテープを集めるのが趣味です。

> トップページに戻る