WordPress サイドバーのメニュー項目をハイライト表示にするには

WordPress サイドバーのメニュー項目をハイライト表示にするには

2025年10月7日

ここでは、CSSコードを使用してWordPressでメニュー項目を簡単にハイライトする方法。

以下の下のようにカレントメニューのリストを調べてみた。

アップ画像で見てみる。

li class=”current”がターゲットになっているのがわかる。

<ul class="lcp_catlist" id="lcp_instance_listcategorypostswidget-7">
<li class="current">
   <a href="https://polo-web.com/2025/10/07/mac-sequoia-safari-development-environment-settings/">
   Mac Sequoia – safariの開発環境設定</a>
</li>

CSSで記述するなら、リストのクラスcurrentのaタグに設定すれば良いことになる。

 li.current a {
          font-weight: bold; /* 文字を太くする */
          color: #ff0000; /* 色を赤色にする */
        }

投稿ページを開いた時、サイドバーのメニューも同じタイトルならを強調表示(赤文字で肉太)にすることができた。できることを確認したら、実際の色やバックの色等を変更して見栄えの良い設定にする。

CSSは「カスタム CSS & JS」プラグインに入れている

ここに入れた内容の全てのコード

/*サイドバー用、カテゴリー一覧表示のレイアウト*/
h2.widget-title{
	font-size: 1.4em;/*タイトルのサイズ*/
}

ul.lcp_catlist {
 margin: 0; /*余白をリセット*/
 padding: 0; /*余白をリセット*/
 list-style-type: none; /*マーカーを削除*/
 border-top: solid 1px #eeeeee; /*枠線・上*/
}
ul.lcp_catlist li {
 padding: 10px 0px; /*余白*/
 background: ; /*背景色*/
 border-bottom: solid 1px #eeeeee; /*枠線・下*/ 
	line-height: 1.4em;
}
.lcp_catlist a{
	text-decoration: none;	/*リンクの下線を消す*/
	font-size: 14px;
}

/*カテゴリー一覧でカレントメニューを強調表示する設定*/
 li.current a {
    font-weight: bold; /* 文字を太くする */
    color: #ffa500; /* 色をオレンジにする */
}