【WordPress】【JIN】ドロップダウン表示のアイコン「Ｖ」を非表示にするCSSカスタマイズ

こんにちは😀広瀬ユキです。

今回は、ドロップダウン表示のアイコン「」を非表示にするCSSカスタマイズをご紹介します。

ウィジェットのカテゴリーをドロップダウンで表示すると、JINオリジナルアイコンの矢印「」が表示されますが、アーカイブをドロップダウンで表示すると、この矢印が表示されません。なので、カテゴリーとアーカイブをサイドバーやフッターにドロップダウン表示で並べて表示したい場合に、カテゴリーの矢印を非表示にすると、統一感が出ます。

Before	After

※月別＝アーカイブ

ウィジェットをサイドバーやフッターに設置する

カテゴリーのウィジェットをサイドバーやフッターに設置する方法は、下記の記事を参考にしてください。

【WordPress】【JIN】ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法【WordPress】有料テーマ【JIN】を使っている方向けに、ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法をご紹介します。...

今回のカスタマイズは、ドロップダウン表示のときのみ有効なCSSコードです。（一覧表示では無効です。）ウィジェットのカテゴリーやアーカイブはドロップダウン表示に設定して下さい。

ドロップダウン表示のアイコン「Ｖ」を非表示にするCSSカスタマイズ

では、CSSにコードを追加して、ドロップダウン表示のアイコン「」をカスタマイズしてみましょう。

CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。

【WordPress】【JIN】ブログのデザインをカスタマイズする方法：2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法：2種類について書きました。【追加CSS】...

コード

/*---ドロップダウン表示のアイコン「Ｖ」---*/
.widget_archive form::after, .widget_archive select::after, .widget_categories form::after, .widget_categories select::after {
display:none;/*非表示*/
}
/*---ドロップダウン表示のアイコン「Ｖ」---*/

.widget_archive form::after, .widget_archive select::after, .widget_categories form::after, .widget_categories select::after {
display:none;
}

説明

• カテゴリーとアーカイブの両方とも「」が非表示になります。
• このCSSだけで、サイドバーに設置しても、フッターに設置しても「」が非表示になります。
• ドロップダウン表示のときのみ有効なCSSコードです。（一覧表示では無効です。）ウィジェットの設定は、ドロップダウン表示に設定して下さい。

ドロップダウン表示のアイコン「」を非表示にすることができました‼

編集後記

アーカイブのドロップダウン表示のときに矢印を表示するカスタマイズをしようとしていたのですが、PHPの編集が必要そうだったので、簡単な非表示のCSSコードをご紹介しました。

【WordPress】【JIN】フッターのタグクラウドの色を変えるCSSカスタマイズ【WordPress】有料テーマ【JIN】を使っている方向けに、フッターのタグクラウドの色を変えるCSSカスタマイズをご紹介します。...

【WordPress】【JIN】サイドバーのウィジェットのタイトルを中央寄せにするCSSカスタマイズ【WordPress】【JIN】サイドバーのウィジェットのタイトルを中央寄せにするCSSカスタマイズをご紹介します。...

【WordPress】【JIN】フッターのアーカイブの表記を非表示にする方法【WordPress】有料テーマ【JIN】を使っている方向けに、フッターのアーカイブの表記を非表示にする方法をご紹介します。...