ここでは、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; /* 色をオレンジにする */
}