LION MEDIA Ver2.0.0を公開!【子テーマのCSSで見出しを上書きしている方へ注意事項あり】

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

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

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を適用したいという時には、大変役に立つプラグインです。ぜひご活用ください。

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

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

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

おすすめプラグインカテゴリの最新記事