ウィジェットのカスタマイザーは、サイトの外観を向上させ、ブランドの一貫性を維持し、重要な情報に注目を集めるための強力な方法です。
しかし、WordPressユーザーの多くは、特にCSSに慣れていない場合、ウィジェットのスタイリングが難しいと感じています。しかし、心配しないでください。
この投稿では、サイトを壊すことなくWordPressウィジェットにカスタマイザーを追加する2つの簡単な方法を紹介します。ちょっとしたCSSに慣れている方も、コードなしのソリューションを好む方も、ぜひ参考にしてください。
WordPressウィジェットにカスタマイザーを追加する2つの方法を紹介します。これらのクイックリンクを使用して、あなたに最適な方法に飛ぶことができます：
注： この投稿はクラシックテーマユーザーを対象としています。ブロックテーマを使用している場合、管理画面にウィジェットやテーマカスタマイザーのページは表示されません。テーマをカスタマイズするには、ブロックとフルサイトエディターを使用する必要があります。
詳しくは、初心者向けWordPressフルサイト編集ガイドをご覧ください。
方法1：ブロックエディターでWordPressウィジェットにカスタマイザーを追加する（基本編）
WordPressウィジェットは、ウィジェット対応エリアとサイドバーにウィジェットとブロックを追加するためにブロックエディターを使用するようになりました。つまり、初期設定のWordPressブロックのいくつかのブロックスタイルオプションが表示されます。
例えば、外観 ” ウィジェットのページでWordPress初期設定のブロックをクリックすると、ブロックの色やタイポグラフィを変更するオプションが表示されます。
しかし、すべてのブロックにこのオプションが付属しているわけではなく、特にこれらのブロックがWordPressの初期設定でない場合はそうです。ありがたいことに、ウィジェット用のブロックエディターを使う利点の一つは、各ブロックにカスタマイザークラスを簡単に追加できることです。
必要なことはすべて、カスタムスタイルを追加したいウィジェットをクリックするだけです。
次に、ブロックパネルの下にある「詳細」タブまでスクロールダウンする必要があります。ここからカスタムCSSクラスを追加できます。
更新」ボタンをクリックして変更を保存することをお忘れなく。
これで、WordPressテーマに特定のCSSクラスをターゲットにしたカスタマイザーを追加できる。
外観 ” カスタマイザーページに行き、追加CSSタブに切り替えるだけです。あなたのサイトのライブプレビューが表示され、CSSルールを追加するボックスが表示されます。
カスタムCSSを追加するもう一つの方法は、WPCodeを使用することです。テーマ内にすでに多くのカスタムCSSコードがあり、すべてのスニペットを簡単に区別して追跡したい場合に使用することをお勧めします。
まず、WPCodeプラグインをインストールしてください。ステップバイステップの手順については、WordPressプラグインのインストール方法をご覧ください。
次に、Code Snippets “ + Add Snippetに 移動し、’Add Your Custom Code (New Snippet)’を選択します。そして、「+カスタム・スニペットを追加」ボタンをクリックします。
新しいカスタムCSSに名前を付けます。カスタムウィジェットスタイル’のような簡単なものでよい。
次に、コードタイプを「CSSスニペット」に変更する。
次に、カスタムCSSをフィールドに追加します。
以下は、私たちが使用した基本的なCSSです：
.latest-articles {
background-color:#def4f1;
padding:10px;
}
インサーターセクションまでスクロールダウンしてください。挿入方法」が「自動挿入」に設定され、「場所」が「サイト全体のヘッダー」になっていることを確認してください。
その後、右上のボタンを「有効化」と表示されるまで切り替え、「スニペットを保存」をクリックする。
カスタムCSSを追加した後、モバイルまたはデスクトップでサイトを表示し、その動作を確認することができます。
私たちのはこんな感じだ：
方法2：CSS HeroでWordPressウィジェットにカスタムスタイルを適用する（よりカスタマイズ可能）
上記の方法の問題点は、CSSコードを書く必要があることだ。しかし、すべてのユーザーがCSSを知っているわけではないし、自分でコードを書きたくないだけなのだ。
そんなときは、CSS Heroを使えばいい。これはWordPressスタイリングのカスタム・プラグインで、コードを書かずにWordPressテーマにカスタムCSSを追加できる。
プラグインについては、CSS Heroのレビューでさらに詳しくご紹介しています。
まず、CSS Heroプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
プラグインを有効化すると、WordPress管理画面のツールバー上部に新しいメニュー項目が追加されます。
次に、スタイル設定したいウィジェットが表示されているページにアクセスし、上部にあるCSS Heroボタンをクリックする必要があります。
これでCSSヒーローエディターインターフェースでページが開きます。
ライブエディターで、サイト上の項目をポイント＆クリックするだけで、そのスタイルを変更できる。
スタイルを設定したいウィジェットにマウスを持っていくだけです。そして、クリックして選択します。
この例では、検索ウィジェットを選択しました。
その後、左側のメニューを使って、好きなようにウィジェットをスタイル設定できます。これには、グラデーション、タイポグラフィ、パディング、マージン、枠線などの高度なスタイル設定オプションが含まれます。
下の例では、検索ウィジェットのフォントサイズを変更し、より目立つようにしています。
必要に応じて、ウィジェットの特定の要素を変更することもできます。
例えば、ボタンと検索フィールドの枠線の半径を変更することにしました。こうすることで、より曲線的でスタイリッシュに見えます。
設定が完了したら、忘れずに「保存」ボタンをクリックして設定を保存してください。
その後、あなたのサイトをプレビューして、変更を確認しましょう。
この投稿が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.
管理者
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.
管理者
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.
管理者
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.