【WP プラグイン】ウィジェット個別に CSS を付与できるプラグイン「Widget CSS Classes」

プラグイン「Widget CSS Classes」をインストール・有効化すると、各ウィジェットに以下のような CSS のクラスを追加できる欄が追加されます。

ウィジェット ‹ comemo demo — WordPress

例えば、ブログに以下の CSS を追加し、

.widgetcss {
    background-color: #eee;
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 10px 15px;
}

ウィジェットに以下のように CSS のクラスを追加すると、

ウィジェット ‹ comemo demo — WordPress-1

そのウィジェットだけ、背景色を以下のような感じで変更することができます。

comemo demo | Just another WordPress site

なお、メニューの場合は、もともとオプションで、メニューごとに CSS のクラスを付与できる機能がついています。

メニュー ‹ comemo demo — WordPress

参考

6件のコメント 追加

  1. 匿名 より:

    スイマセン!初歩的は質問です。
    「ブログに以下の CSS を追加し、」とあるのですが、ブログってどこのことですか?

    いいね: 1人

    1. comemo より:

      詳しく記載すると、「ブログ全体に CSS を追加できるツールの入力欄に」という感じです。

      いいね

  2. 匿名 より:

    .widgetcss {
    background-color: #eee;
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 10px 15px;
    }
    をどこにどうやって入れたらいいのか、教えていただけると助かります!

    いいね: 1人

    1. comemo より:

      以下のプラグインを使うと、ブログ全体に CSS を追加できます。

      JetPack by WordPress.com
      Simple Custom CSS
      My Custom CSS
      Improved simpler CSS
      Best Custom CSS
      Enhancing CSS

      私自身は、「JetPack by WordPress.com」というプラグインを使っています。

      ご参考: 【JetPack】 CSS を追加することができるカスタム CSS 機能 | comemo wp

      いいね