ネタワンでもカスタマイズして利用している BlogPress(TCD010)のグローバルメニューにメニューを沢山登録した際に発生する問題の解決方法を紹介します。ページを読み込んだ瞬間、一瞬だけメニューの表示が崩れたように見える問題を解決します。

普通にブログを運営する上では問題ありませんが、グローバルメニューにメニュー項目を沢山登録すると、少し目立つので修正しておいた方が良いかもしれません。

BlogPressの公式デモサイトでも同じ問題を確認できるので、テンプレート自体の問題と思われます。修正方法は凄く簡単です。CSSを一箇所修正するだけです。

この記事は、BlogPress(TCD010)を利用している人向けに書いた記事です。BlogPressを利用していない人には、全然関係がないので読み飛ばしてください。

問題点の確認

現状の問題点と解決方法

この問題は「BlogPress(TCD010)」の固有の問題です。

BlogPressのグローバルメニューは、ページを読み込み終えた後に、メニューの横幅をJavaScriptで自動的に調整する仕様になっています。

問題点としては、グローバルメニューにメニュー項目を沢山登録すると、ページを読み込んだ瞬間、2階層メニューも表示されるので、一瞬だけ表示が崩れたように見えます。一瞬だけ表示されるので、気にする程でもないのですが、メニューを沢山登録すると、どうしても目立ってしまいます。

ページを読み込んだ初期状態は、グローバルメニューの2階層メニューは、表示される必要性はありません。非表示の方が好ましいと思われます。

一瞬だけ表示される画面の例

グローバールメニューにメニューを沢山登録すると、どうしても目立ってしまう。

一瞬だけ表示される画面の例

問題が発生するWebブラウザ

この問題は、WindowsとMacの主要Webブラウザの最新版で確認できます。ちなみに、Firefoxでは正常に表示されます。

  • Internet Explorer
  • Chrome
  • Opera
  • Safari

問題が発生するバージョン

BlogPress ver.2.5 以前のバージョン

解決方法

BlogPress(TCD010)のテンプレートファイルのCSSに1箇所修正を加えます。

修正箇所

style_pc.css 252行目あたり

CSSのソースコードを開いて「#global_menu ul ul」と検索して該当箇所を探してください。

#global_menu ul ul {
position:absolute;
top:66px;
left:0px;
margin:0 0 0 -1px;
padding:0;
}
#global_menu ul ul {
position:absolute;
top:66px;
left:0px;
margin:0 0 0 -1px;
padding:0;
display:none;
}

変更内容は「display:none;」を追加しただけです。

これでグローバルメニューの2階層メニューを非表示にします。ULタグが入れ子になっている部分だけが非表示になります。メニューをマウスオーバーすると、2階層メニューは表示されるので、ナビゲーション的には影響はありません。

修正は以上です。自分のWebブラウザで確認してください。

正常であれば、BlogPressのグローバルメニューの2階層メニューが初期状態は非表示になります。マウスオーバーすればメニューが表示されるので、これで問題は解決です。

まとめ

上記のCSS修正で、BlogPress(TCD010)のグローバールメニューの2階層メニュー部分を非表示にできます。これならメニューを何個でも表示できます。もし、同じことで悩んでいたら参考にしてください。

BlogPress(TCD010)は、ブロガーの方が利用している場合が多い気がします。過去に書いた記事の中で、目立たせたい記事などは、グローバールメニューに登録しておきましょう。

スポンサーリンク