WordPressプラグインJetpackの機能のひとつ「共有」は、その名の通りコンテンツを Facebook、Twitter などで簡単に共有できるパワフルなツールであり、簡単な設定と分かりやすいドラッグ&ドロップでソーシャルボタンを自由に並べることが出来る。
ただし、スタイルシートとして「共有ラベル」に指定したテキストで折り返すようにページレイアウトされるため、左側にスペースが空いてしまうケースが多い。
「共有ラベル」の文字を消すだけなら「共有ラベル」の欄を空白にするだけで<h3>のタグも出力されなくなるが、横並びのボタンの左側にスペースができてしまう。
原因は、以下の場所にあるスタイルシート
/wp-content/plugins/jetpack/modules/sharedaddy/sharing.css
上記ファイル内にある
div.sharedaddy .sd-content { width: 82.125%; /* 530px / 640px */ float: right; margin: -2px 0 0 0; }
で左から並ぶソーシャルボタンのブロック自体をfloatで右揃えにしている。
「共有ラベル」を削除してソーシャルボタンを左から無駄無く並べるには、呼び出すページのスタイルシートに以下の表記を加える。
div.sharedaddy .sd-content { width: auto; float: none; }
内容は、コンテンツ幅の82.125%にしているwidth:を初期値に戻し、float: rightを無しにしている。
これで左端から綺麗にアイコンが並ぶ。
なお、ソーシャルボタンの上に引かれる線を消したい時は
div.sharedaddy div.sd-block { border-top:none; }