Jetpackの共有ボタンをCSSでデザイン変更する。

Jetpackの共有ボタンは簡単に設置できて便利なのですが、デザインがちょっとイケてない。

これを簡単に変更できないかなと思いました。

この部分、「sharedaddy」というCSSのクラスがデザインを制御しています。
１つずつ!importantで潰していってもいいのですが、function.phpに下記コードを記述することで、JetpackのCSSを無効にし、CSSが書きやすくなります。

function.phpに以下を追加。

function nonSharedaddy() {
wp_deregister_style('sharedaddy');
}
add_action('wp_print_styles', 'nonSharedaddy');
add_filter('jetpack_implode_frontend_css','__return_false');

すると、CSSが無効化されます。

以下、書きだされたhtmlソースをクラスのみにして分かりやすくしました。

Jetpackの共有機能で書き出されるhtmlソース。

（h3の「シェア」となっている部分、デフォルトでは「共有」です）

<div class="sharedaddy sd-sharing-enabled">
<div class="robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing">
<h3 class="sd-title">シェア</h3>
<div class="sd-content">
<ul>
<li class="share-facebook">
<a class="share-facebook sd-button share-icon">
<span>Facebook</span>
</a>
</li>
<li class="share-twitter">
<a class="share-twitter sd-button share-icon">
<span>Twitter</span
></a>
</li>
<li class="share-google-plus-1">
<a class="share-google-plus-1 sd-button share-icon">
<span>Google</span>
</a>
</li>
<li class="share-skype">
<a class="share-skype sd-button share-icon">
<span>Skype</span>
</a>
</li>
<li class="share-pinterest">
<a class="share-pinterest sd-button share-icon"">
<span>Pinterest</span>
</a>
</li>
<li class="share-end"></li>
</ul>
</div>
</div>
</div>