ウィジェットに任意のCSSクラスを追加できるWPプラグインを使えば、PCとスマホで表示/非表示が簡単

Widget CSS Classesという無料プラグインを利用すると、ウィジェットアイテムに任意のCSSクラスを追加できるようになります。LION BLOGでは、class名に「u-none-sp」とつけると、スマホで表示されたときに非表示にすることができ、「u-none-pc」とつけると、PCで表示されたときに非表示にすることができます。

いずれは、Widget CSS Classesというプラグインを利用しなくてもPCとスマホで表示/非表示の切り替えができるようにしたいと考えていますが、今すぐにそれを実現したい場合はぜひ、Widget CSS Classesプラグインをインストールして使ってみてください。

1. Widget CSS Classesプラグインの使い方
- 1.1. 設定項目の説明

Widget CSS Classesプラグインの使い方

上記画像はこのサイトの実際の設定です。
「u-none-sp」と「u-none-sp」を毎回テキストフィールドに入力するのが面倒なので、定型クラスに「u-none-sp」と「u-none-pc」を登録して、ウィジェット画面でチェックボックスにチェックを入れるだけで表示/非表示を切り替えられるようにしています。
自身のサイトの内容に合わせて各項目をカスタマイズしてください。

設定項目の説明

Add Widget Number Classes	ウィジェットナンバーのクラスを追加(例：widget-1)
Add First/Last Classes	最初と最後のウィジェットにクラスを追加(例：widget-first)
Add Even/Odd Classes	奇数番目・偶数番目を識別するクラスを追加(例：widget-odd)
Show Additional Field for ID	ID付与の有効化
Class Field Type	クラス追加フォームの種類
Predefined Classes	定型クラスの追加
Fix widget parameters	ウィジェットのパラメータを修正
Remove duplicate classes	重複したクラスを削除

ウィジェットに任意のクラスを追加して、それぞれ異なるCSSを適用したいという時には、大変役に立つプラグインです。ぜひご活用ください。

今より満足できるサイトを作りませんか？

FITでは、誰もが良質なコンテンツをインターネット上に公開できるようにWordPress用無料テーマ「LION」を提供しています。 LIONテーマを使えば、SEO対策はもちろん、ユーザビリティに強化された美しいデザインのWEBサイトを作ることができます。

広告収益や売上に結びつけるためのマーケティング動線が強化されたLIONテーマを利用して、あなたのビジネスにお役立てください。

テーマの無料ダウンロードページへ