JINカスタマイズ

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

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

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

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

BeforeAfter
サイドバー

サイドバー

フッター

フッター

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

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

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

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

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

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

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

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

ウィジェットをサイドバーやフッターに追加できたところで、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のみです。

  1. デフォルト(sans-serif)
  2. 角ゴシック(Noto Sans)
  3. 角丸ゴシック(Rounded M+ 1c)

サイドバー、フッター以外の場所にカテゴリーとアーカイブのウィジェットを設置している場合でも、このCSSは有効です。つまり、WordPress上にあるドロップダウンのカテゴリーとアーカイブに有効で、文字が見切れている問題を解決してくれます。

ウィジェットのカテゴリーとアーカイブの文字が見切れている問題を解決することができました‼

編集後記

やらなくても良い設定ですが、気になっていた方やこだわりたい方にはオススメの設定です。

【WordPress】【JIN】グローバルメニューの設定方法とプルダウンタブのCSSカスタマイズ【WordPress】有料テーマ【JIN】を使っている方向けに、グローバルメニューの設定方法とプルダウンタブのCSSカスタマイズをご紹介します。...
【WordPress】【JIN】サイドバーの目次のCSSカスタマイズ【WordPress】有料テーマ【JIN】を使っている方向けに、サイドバーの目次のCSSカスタマイズについてご紹介します。プラグイン「Table of Contents Plus」をインストールし、CSSにコードを追加することでサイドバーの目次を見やすくカスタマイズします。...
お知らせ|JIN MANUALに記事が掲載されました!JIN MANUALに当ブログの記事を掲載して頂きました。当ブログのJINカスタマイズ記事一覧も合わせてご紹介します。...

☆クリックで応援お願いします☆

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ