【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. […] こちらの記事を参考にしました【WP プラグイン】ウィジェット個別に CSS を付与できるプラグイン「Widget C… […]

    いいね

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

    いいね: 1人

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

      いいね

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

    いいね: 1人

    1. 以下のプラグインを使うと、ブログ全体に 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

      いいね

  4. […] 【WP プラグイン】ウィジェット個別に CSS を付与できるプラグイン「Widget C… […]

    いいね

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。