こんにちは。Saitokouです。
WordPressテーマSOLARISを使用してWebサイトを制作していたところ、サイトのタイトルとグローバルメニューが重なってしまう現象に遭遇しました。
グローバルメニューに表示している項目の量が多かったり、サイトタイトルが長かったりすると、こういった表示になることがあります。
この場合は、メニューの項目数を減らしたり、サイトタイトルを短くするなどしてうまく調整する必要がありますが、「どうしても今のサイトタイトルで、メニューの項目数も減らしたくない！」という場合はCSSの追加により対応が可能です。
カスタムCSS記載場所
管理画面 ＞ TCDテーマ ＞ 基本設定 ＞ カスタムCSS
WordPressテーマ標準のカスタマイズ機能を使うこともできますが、今回は上記の箇所を使用します。保守的な観点からいうと、サイト全体に適用される追加CSSを登録する箇所はどちらかに統一しておいたほうが良いです。
記述CSS
以下のCSSを記載します。コピペOKです。
※TCDのソースコードが変わったら効かなくなる可能性があります。
#global_menu > ul {
text-align: right;
right: 55px;
}
上記のコード追加により、グローバルメニューが右に寄せられます。
検索アイコンとエリアも問題なく動きます。
まとめ
今回は追加CSSによって、グローバルメニューを右寄せにする方法を紹介しました！コードも所定の箇所にコピペするだけなので、メニューの表示に困ったらぜひ実施してみてください！
<PR> WordPressでのホームページ作成に苦戦していませんか？
当ブログの筆者はWordPressを利用したWebサイト制作をご提供しています。
・WordPressの操作が分からないので、メッセージや動画で教えてほしい！
・なかなか思うようなデザインにならないので、設定のコツを知りたい！
・エラーが発生してしまったので、解決方法を知りたい！
このような皆さんのご希望を、ぜひ一度SaitoKouにお聞かせください。
皆様のWebサイトに関するモヤモヤ解消をお手伝いします！！
