WordPressのウィジェットを目立たせたいですか？ウィジェットはサイトにコンテンツを追加するのに適していますが、初期設定ではブランドと一致しなかったり、訪問者の注意を引かなかったりすることがよくあります。
例えば、サイドバー・ウィジェット。重要なリソースを強調し、サイトのデザインにシームレスに溶け込むように外観をカスタマイズしました。これは、サイトのプロフェッショナルな印象を高める最も簡単な方法のひとつです。
このガイドでは、WordPressのウィジェットをスタイリングする2つの簡単な方法を紹介します。
WordPressウィジェットをカスタムスタイルでカスタマイズする2つの方法をご紹介します。これらのクイックリンクを使用して、あなたに最適な方法に飛ぶことができます：
注： この投稿はクラシックテーマユーザーを対象としています。ブロックテーマを使用している場合、管理画面にウィジェットやテーマカスタマイザーのページは表示されません。テーマをカスタマイズするには、ブロックとフルサイトエディターを使用する必要があります。
詳しくは、WordPressフルサイト編集の完全ガイドをご覧ください。
方法1：CSSコードでWordPressウィジェットをスタイルする
WordPressウィジェットは、ウィジェットエリアとサイドバーに新しいウィジェットとブロックを追加するために、ブロックエディターを使用するようになりました。つまり、初期設定のWordPressブロックのいくつかのブロックスタイルのオプションが表示されます。
例えば、外観 ” ウィジェットのページでWordPress初期設定のブロックをクリックすると、ブロックの色やタイポグラフィを変更するオプションが表示されます。
しかし、すべてのブロックにこのようなウィジェットオプションが付属しているわけではなく、特にこれらのブロックがWordPressの初期設定でない場合はなおさらです。ありがたいことに、ウィジェット用のブロックエディターを使う利点の1つは、カスタムCSSクラスを各ブロックに簡単に追加できることです。
必要なことはすべて、カスタムスタイルを追加したいウィジェットをクリックするだけです。
次に、ブロックパネルの下にある「詳細」タブまでスクロールダウンする必要があります。ここからカスタムCSSクラスを追加できます。
更新」ボタンをクリックして、ウィジェット設定を保存することを忘れないでください。
これで、WordPressテーマに特定のCSSクラスをターゲットにしたカスタマイザーを追加できる。
外観 ” カスタマイザーページに行き、追加CSSタブに切り替えるだけです。あなたのサイトのライブプレビューが表示され、CSSルールを追加するボックスが表示されます。
カスタムCSSを追加するもう一つの方法は、WPCodeを使用することです。テーマ内にすでに多くのカスタムCSSコードがあり、すべてのスニペットを簡単に区別して追跡したい場合に使用することをお勧めします。
まず、WPCodeプラグインをインストールしてください。ステップバイステップの手順については、WordPressプラグインのインストール方法をご覧ください。
次に、Code Snippets “ + Add Snippetに 移動し、’Add Your Custom Code (New Snippet)’を選択します。そして、「+カスタム・スニペットを追加」ボタンをクリックします。
新しいカスタムCSSに名前を付けます。カスタムウィジェットスタイル’のような簡単なものでよい。
次に、コードタイプを「CSSスニペット」に変更する。
次に、カスタムCSSをフィールドに追加します。
以下は、私たちが使用した基本的なCSSです：
1 2 3 4 | .latest-articles { background-color:#def4f1;padding:10px;} |
インサーターセクションまでスクロールダウンしてください。挿入方法」が「自動挿入」に設定され、「場所」が「サイト全体のヘッダー」になっていることを確認してください。
その後、右上のボタンを「有効化」と表示されるまで切り替え、「スニペットを保存」をクリックする。
カスタムCSSを追加した後、モバイルまたはデスクトップでWordPressサイトを表示し、その動作を確認することができます。
WordPressのデモサイトはこんな感じです：
方法2：CSSヒーローでWordPressウィジェットをスタイリングする（コードなし）
上記の方法の問題点は、CSSコードを書く必要があることだ。しかし、すべてのユーザーがCSSを知っているわけではないし、自分でコードを書きたくないだけなのだ。
そんなときは、CSS Heroを使えばいい。これはWordPressスタイリングのカスタム・プラグインで、コードを書かずにWordPressテーマにカスタムCSSを追加できる。
プラグインについては、CSS Heroのレビューでさらに詳しくご紹介しています。
まず、CSS Heroプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
プラグインを有効化すると、WordPress管理画面のツールバー上部に新しいメニュー項目が追加されます。
次に、スタイル設定したいウィジェットが表示されているページにアクセスし、上部にあるCSS Heroボタンをクリックする必要があります。
これでCSSヒーローエディターインターフェースでページが開きます。
ライブエディターで、サイト上の項目をポイント＆クリックするだけで、そのスタイルを変更できる。
スタイルを設定したいウィジェットにマウスを持っていくだけです。そして、クリックして選択します。
この例では、検索ウィジェットを選択しました。
その後、左側のメニューを使って、好きなようにウィジェットをスタイル設定できます。これには、グラデーション、タイポグラフィ、パディング、マージン、枠線などの高度なスタイル設定オプションが含まれます。
下の例では、WordPress検索ウィジェットのフォントサイズを変更し、より目立つようにしています。
必要に応じて、ウィジェットの特定の要素を変更することもできます。
例えば、ボタンと検索フィールドの枠線の半径を変更することにしました。こうすることで、より曲線的でスタイリッシュに見えます。
設定が完了したら、忘れずに「保存」ボタンをクリックして設定を保存してください。
そして、あなたのサイトをプレビューして、WordPressの新しいデザインを実際に見てみましょう。
この投稿がWordPressウィジェットにカスタマイザースタイルを追加する方法を学ぶのにお役に立てば幸いです。また、WordPressのための最高のドラッグアンドドロップページビルダーのピックアップや、無料とプレミアムのWordPressテーマの長所と短所の比較もご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Ankush
The Plugin was really Great but I had a problem…
It doesn’t work when i add custom css….
May be plugin css is overriding my code but.. that really sad…
Hey Wpbeginner.com Team.. Please leave me a reply,]
I You can tell me how to fix it…
Rachael
I love this plugin but every time I activate it, I have trouble with the gallery widget. It works fine with the plugin deactivated, but if I turn on the plugin, the gallery widget won’t save any images. All of the other widgets work fine. Does anyone else have this issue?
Regina
Does how to instructional above also also include the ability to customize the font of the widget titles?
Thanks!
terry
Finally, after failing at trying to decode the jargon I get on inspect, this article told me exactly what I needed.
Thanks
Alex
I don’t have any classes on widgets.
irfan
There is extra white space while creating extra widget area for header. Kindly tell us , how to remove this
Thomas
Hi, I tried to do it manually, inspected the element and its class but it did not work.
I am trying to change the style of a WPform.
Could you help me?
WPBeginner Support
Hey Thomas,
Please take a look at this guide on how to add custom css to WPForms.
Admin
daniel
i have added a widget area to my header using the functions.php and header.php files. i can see the widget ive added on my site but i want to put it next to the menu, any idea how to do this please? i want it to sit to the right hand side of the menu.
WPBeginner Support
Hey Daniel,
You’ll need to use place the widget code before your menu and then add custom CSS to position it.
Admin
Deniz Kumru
It’s my first wordpress theme.I was nervous till found your article.It’s done thank you
ivan
Why does my layout under widget styles only shows the padding option, without the bottom margin, gutter & row layout option.
Rimi
hallo
I can not make any changes because it is inactive
Being processed plugin / css / plugin-front.css (inactive),How can I activate pleas
Grace
Hello, my theme doesn’t have a right sidebar, it came with just a footer widget area, can I use the custom css to add a right sidebar? Please help me, thanks
WPBeginner Support
No, you will first need to define a widget ready area. Your theme may already have an option to use a sidebar layout. If it doesn’t, then we would recommend you to ask the theme author for support. On the other hand, if you feel confident in your coding skills, then go a head.
Admin
Mr.T
I want to change them manually. Am I right that by using widget-number class you actually can’t move them up or down in the widgets area, because their id will change, or it works differently?
Erick
I have the same question
Correen K
I was looking for something like this to add some style to my sidebar and stumbled upon the Flexible Posts Widget plugin. I think it’s always nice to have options
Abhishek Prakash
Will using these many CSS not impact the page speed?
WPBeginner Staff
Not if you do it right.