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

 WEBデザイン    3,746

 

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

このエントリーをはてなブックマークに追加

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

1

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

この部分、「sharedaddy」というCSSのクラスがデザインを制御しています。
1つずつ!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');
2

すると、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>
3

あとはクラスをCSSで変更すれば出来上がりです。

スポンサーリンク

 

Twitter でbbpをフォローしよう!

コメント

このエントリーをはてなブックマークに追加

プロフィール

bbb

bbpはWEBデザインと輸出入の仕事をしてます。趣味程度のブログです。キュレーションへの投稿、ページのいいねとシェアに喜びます。