こんにちは😀広瀬ユキです。
今回は、ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法をご紹介します。
ウィジェットのカテゴリーとアーカイブをドロップダウンで表示すると、文字が見切れてしまいます。今回は、これを見切れないように表示する方法についてです。CSSにコードを追加してカスタマイズします。
Before | After |
サイドバー | サイドバー |
フッター | フッター |
WordPress有料テーマ【JIN】を使っている方向けの記事です。
ウィジェットをサイドバーやフッターに設置する
まずは、ウィジェットをサイドバーやフッターに設置しましょう。
ここでは、例として、カテゴリー(ドロップダウン)のウィジェットをサイドバーに設置する方法をご紹介します。
- WordPressの編集画面から、「外観」→「ウィジェット」を開きます
- 利用できるウィジェットの中から、「カテゴリー」を「サイドバー」または「サイドバー追尾【PC】」に追加します ※サイドバー追尾【PC】は、画面をスクロールしたときに追尾する機能のことです。
- 「ドロップダウン表示」にチェックを入れます
- 「完了」を押します

カテゴリー(ドロップダウン)のウィジェットをサイドバーに設置することができました‼
フッターに設置したい場合は、フッターの欄にウィジェットを追加して下さい。
ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決する方法
ウィジェットをサイドバーやフッターに追加できたところで、CSSにコードを追加して、カテゴリーとアーカイブをカスタマイズしてみましょう。
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のみです。
|
サイドバー、フッター以外の場所にカテゴリーとアーカイブのウィジェットを設置している場合でも、このCSSは有効です。つまり、WordPress上にあるドロップダウンのカテゴリーとアーカイブに有効で、文字が見切れている問題を解決してくれます。
ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決することができました‼
編集後記
やらなくても良い設定ですが、気になっていた方やこだわりたい方にはオススメの設定です。


