【WordPress】プラグインのCSSカスタマイズまとめ

WordPress(ワードプレス)の様々なプラグインのCSSカスタマイズを紹介。ポチップやreCAPTCHA、fancyboxなどのプラグインのデザイン変更やバッジ削除などをCSSでカスタマイズする方法をまとめています。

CSSカスタマイズの注意点

テーマや設定によって書き方は違う

記述するCSSは、使用中のテーマやテーマ内の設定によって多少変わります。

当サイトでは「THE THOR」というテーマを使っているので、それ以外の方はある程度調整が必要です。

なるべくカスタマイズしない

追加CSSでカスタマイズするとカスタマイズ前の記述分無駄が生じるので、どちらでもいいものは思い切ってやらないのがおすすめです。

また、THE THORの「THE THOR CHILD: style-user.css」みたいに子テーマのスタイルシートがある場合は、リアルタイムプレビューは使えないものの無駄を減らせます。

追加CSSのリアルタイムプレビューで調整しながら確定→追加CSSからは削除してスタイルシートに記述する流れですね。

プラグインのカスタマイズ

ポチップ(Pochipp)

Before(スマホ表示)	After(スマホ表示)
Before(PC表示)	After(PC表示)

ポチップの余白を詰めるカスタマイズ

商品リンクを設置できる「ポチップ」をCSSでカスタマイズし、全体的に余白を詰めます。

右下にあるポチップのアイコンも消せますが、無料で使っている身としてやりすぎ(そこまでする必要は無い)と思いますので、私は残します(かわいいし)。

reCAPTCHA

Before(スマホ表示)	After(スマホ表示)
Before(PC表示)	After(PC表示)

reCAPTCHAのバッヂを消すカスタマイズ

不審なリクエストからサイトを保護する「reCAPTCHA」をCSSでカスタマイズし、追従する保護表示(バッジ)を削除します。

reCAPTCHAのヘルプを見ると「ユーザーから見える場所に以下のようなテキストを載せるならバッジを消していいよ」とあるので、ウィジェットやページ下部などに以下のような文言を記載してください。

バッヂを消す際に明記する内容

fancybox

Before	After

fancyboxに拡大マークを付けるカスタマイズ

画像をタップで拡大表示できるプラグイン「fancybox」をCSSでカスタマイズし、画像が拡大できることを伝える拡大マークを追加します。

「background-image」で指定しているURLの画像を表示するので、ご自身のサイトにアップロードした画像のURLに変更してください。