【WordPress】【JIN】ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法

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

今回は、ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法をご紹介します。

ウィジェットのカテゴリーとアーカイブをドロップダウンで表示すると、文字が見切れてしまいます。今回は、これを見切れないように表示する方法についてです。CSSにコードを追加してカスタマイズします。

Before

After

サイドバー

フッター

WordPress有料テーマ【JIN】を使っている方向けの記事です。

ウィジェットをサイドバーやフッターに設置する
ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法
- コード
- 説明
編集後記

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

まずは、ウィジェットをサイドバーやフッターに設置しましょう。

ここでは、例として、カテゴリー（ドロップダウン）のウィジェットをサイドバーに設置する方法をご紹介します。

WordPressの編集画面から、「外観」→「ウィジェット」を開きます
利用できるウィジェットの中から、「カテゴリー」を「サイドバー」または「サイドバー追尾【PC】」に追加します　※サイドバー追尾【PC】は、画面をスクロールしたときに追尾する機能のことです。
「ドロップダウン表示」にチェックを入れます
「完了」を押します

カテゴリー（ドロップダウン）のウィジェットをサイドバーに設置することができました‼

フッターに設置したい場合は、フッターの欄にウィジェットを追加して下さい。

ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法

ウィジェットをサイドバーやフッターに追加できたところで、CSSにコードを追加して、カテゴリーとアーカイブをカスタマイズしてみましょう。

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

CSSにコードを追加する方法はコチラ↓

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

コード

/*---カテゴリーとアーカイブ---*/
.widget_categories select, .widget_archive select{
color: #aaa ;/*文字色*/
font-family:sans-serif;/*フォント*/
}
/*---カテゴリーとアーカイブ---*/

/*　*/　で囲ってある部分はメモ書きなので、削除してもOKです。

【メモ書きなしver.】

.widget_categories select, .widget_archive select{
color: #aaa ;
font-family:sans-serif;
}

説明

color

文字色
#aaaには、お好みのカラーコードを入れてください。デフォルト（初期設定）は#888になっています。

font-family

フォント
お好みの字体を入れてください。デフォルト（初期設定）では、“ヒラギノ角ゴ ProN W3″,Hiragino Sans,”ヒラギノ角ゴ ProN W3″,Hiragino Kaku Gothic ProN,”メイリオ”,Meiryo,sans-serifとなっています。JINの標準フォントは以下3種類となっていますが、ここで設定可能なのは、sans-seriefのみです。