プラグインのCSSを書き換える方法

こんにちは。セブンスコードの伊藤です。

最近自身のHPをリニューアルしたわけですが、いざ公開してみると「これも付けたいな」となって再び修正にはいってます。

ここでは『jetpack』プラグインの共有機能の追加をした話を。

このjetpack自体はwordpress.comが出しているプラグインのため、信頼は相当なものだと思うので使い続けれるプラグインだと思います。多機能なため、あらゆることに対応できます。

僕は数多くある機能の中でも「共有」と「パブリサイズ」は便利だと思っています。
「共有」では以前は『wp social bookmarking light』というプラグインで対応していましたが、信頼性において公式のwordpress.comには劣るのと、プラグインの使用数を減らすために『jetpack』に乗り換えました。

jetpackの共有はとても簡単ですので是非とも試していただきたいと思います。

本題に入りますと、この共有機能で挿入されるSNS公式ボタンのCSSを書き換える方法です。

デフォルトではul出力されliの中にそれぞれの公式ボタンがあるのですが、
ulに下マージンが、liにも下マージンが数pxあるため、それをなんとかしたいとおもい実践した方法です。

方法1.プラグインのcssを書き換える

一番早い方法ですとjetpackの共有を有効にした際に出力されるcssを触ることです。共有の部分のcssはプラグインディレクトリのjetpack > css > jetpack.cssです。圧縮されたcssなので触るのが怖いです・・・
頑張って書き換えたところでプラグインのアップデートを行えば再度cssを書き直さないといけないため手間が増えます。

方法2.プラグイン書き換え用のcssを作成する

これが安全でわかりやすいかと思います。僕の行った方法はjetpackの出力したcssの後ろに別のcssを読み込ませてそこに調整した部分のみのcssを書くという方法です。これだとプラグインのアップデートをしても再調整の必要はありません。テーマのcssと分けることで読み込むファイルが増えて・・・とかありますが更新のしやすさを優先して別のcssにしました。

ソースを見ていただくとわかりますがstyle.cssがテーマのスタイルシート、jetpack.cssがjetpackが出力したスタイルシート、そしてcustom.cssがプラグイン調整用のスタイルシートです。読み込まれる順番を利用して上書きしてしまうという方法です。

style.cssとプラグインのcssが出力される位置は各テーマによって異なると思いますが、少なくともwp_headより後ろにcustom.cssを読み込むようにすれば大丈夫だと思います。

この方法は便利なので今後の制作でも使っていこうかと思っています。