TCDテーマHOLOS：長いラベルのメニューに対応させる方法

Q.どうしても長いナビゲーションラベルを設定したメニューを表示させる必要があります。左側サイドバーのメニューの見え方を調整できますか？

HOLOSデモサイトでは見栄えを考慮してメニュー項目のラベルは6文字までに設定しています。実際には全角10字までのメニュー項目名を設定できますが（11字からは自動改行される）、左右余白などを調整されたくなるかもしれません。

▼変更箇所イメージ

A.下記の方法で対応してください。

ご状況に合わせて、以下の記述をTCDテーマ＞基本設定のカスタムCSSに入力して表示をご確認ください。

・親メニューの文字数が多い

/* 親項目の左右余白を調整する */
#global_menu > ul > li > a { padding: 18px 30px; }
/* 子項目の表示位置を右に移動させる */
#global_menu ul li.active > ul { left: calc(100% - 10px); }

・子メニュー（副項目）の文字数が多い

/* 子項目の左右余白を調整する */
#global_menu ul ul a { padding: 0 20px; }
/* ホバー時の右方向スライドの幅を狭く  */
#global_menu ul ul a:hover { padding-left: 30px; }

ポイント「どうしても」ということでなければ、やはりラベルの文字数を調整することをおすすめします。以下の記事も参考にしてみてくださいね。

TCDテーマのヘッダーバーでやってはいけないこと5選 – ワードプレステーマTCD

サイトデザインは、何かが欠けていたり有りすぎるだけで、全体のバランスを崩してしまうもの。特にトップページやヘッダー周りはユーザーの目にも止まりやすいため、印象に関わる影響は大きいものです。