Widget CSS Classesという無料プラグインを利用すると、ウィジェットアイテムに任意のCSSクラスを追加できるようになります。LION MEDIAでは、class名に「u-none-sp」とつけると、スマホで表示されたときに非表示にすることができ、「u-none-pc」とつけると、PCで表示されたときに非表示にすることができます。スマホとPCでウィジェットの表示/非表示を簡単に切り替えられるようになるので、ぜひ活用してみてください。
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を適用したいという時には、大変役に立つプラグインです。ぜひご活用ください。