WordPressで作成したウェッブサイトのグローバルメニューを、3等分したいと思っています(げんじょうは3/4等分)。 対処方法をご教示ください。


http://tsurumaki-office.com/

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2016/01/17 21:03:42
  • 終了:2016/01/18 16:27:34

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4325ベストアンサー獲得回数17732016/01/17 22:25:13

ポイント390pt

今は、以下のスタイルが指定されています。

/*-------------------------------------------*/
/*  menu divide
/*-------------------------------------------*/
@media (min-width: 970px) {
#gMenu .menu > li { width:237px; text-align:center; }
#gMenu .menu > li.current_menu_item,
#gMenu .menu > li.current-menu-ancestor,
#gMenu .menu > li.current_page_item,
#gMenu .menu > li.current_page_ancestor,
#gMenu .menu > li.current-page-ancestor { width:238px; }
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#gMenu .menu li { width:237px; text-align:center; }
#gMenu .menu li.current_page_item,
#gMenu .menu li.current_page_ancestor { width:238px; }
</style>
<![endif]-->

固定で、237px もしくは 238px と記載されているところを相対値に変更してください。

/*-------------------------------------------*/
/*  menu divide
/*-------------------------------------------*/
@media (min-width: 970px) {
#gMenu .menu > li { width:33%; text-align:center; }     /* ★ここ */
#gMenu .menu > li.current_menu_item,
#gMenu .menu > li.current-menu-ancestor,
#gMenu .menu > li.current_page_item,
#gMenu .menu > li.current_page_ancestor,
#gMenu .menu > li.current-page-ancestor { width:33%; }  /* ★ここ */
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#gMenu .menu li { width:33%; text-align:center; }       /* ★ここ */
#gMenu .menu li.current_page_item,
#gMenu .menu li.current_page_ancestor { width:33%; }    /* ★ここ */
</style>
<![endif]-->
他3件のコメントを見る
id:a-kuma3

お手数をおかけしますが、お手すきのときに、いまいちど、おつきあいいただけると幸いです。

以下を style.css に追加したようですが、// は、css ではコメントとして機能しません。

// グローバルメニューを三等分にする
#gMenu .menu > li {
    width:33% !important;
}

以下のようにしてください。

/* グローバルメニューを三等分にする */
#gMenu .menu > li {
    width:33% !important;
}
2016/01/18 16:08:51
id:a-kuma3

You're welcome !

2016/01/18 16:54:17

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4325ベストアンサー獲得回数17732016/01/17 22:25:13ここでベストアンサー

ポイント390pt

今は、以下のスタイルが指定されています。

/*-------------------------------------------*/
/*  menu divide
/*-------------------------------------------*/
@media (min-width: 970px) {
#gMenu .menu > li { width:237px; text-align:center; }
#gMenu .menu > li.current_menu_item,
#gMenu .menu > li.current-menu-ancestor,
#gMenu .menu > li.current_page_item,
#gMenu .menu > li.current_page_ancestor,
#gMenu .menu > li.current-page-ancestor { width:238px; }
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#gMenu .menu li { width:237px; text-align:center; }
#gMenu .menu li.current_page_item,
#gMenu .menu li.current_page_ancestor { width:238px; }
</style>
<![endif]-->

固定で、237px もしくは 238px と記載されているところを相対値に変更してください。

/*-------------------------------------------*/
/*  menu divide
/*-------------------------------------------*/
@media (min-width: 970px) {
#gMenu .menu > li { width:33%; text-align:center; }     /* ★ここ */
#gMenu .menu > li.current_menu_item,
#gMenu .menu > li.current-menu-ancestor,
#gMenu .menu > li.current_page_item,
#gMenu .menu > li.current_page_ancestor,
#gMenu .menu > li.current-page-ancestor { width:33%; }  /* ★ここ */
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#gMenu .menu li { width:33%; text-align:center; }       /* ★ここ */
#gMenu .menu li.current_page_item,
#gMenu .menu li.current_page_ancestor { width:33%; }    /* ★ここ */
</style>
<![endif]-->
他3件のコメントを見る
id:a-kuma3

お手数をおかけしますが、お手すきのときに、いまいちど、おつきあいいただけると幸いです。

以下を style.css に追加したようですが、// は、css ではコメントとして機能しません。

// グローバルメニューを三等分にする
#gMenu .menu > li {
    width:33% !important;
}

以下のようにしてください。

/* グローバルメニューを三等分にする */
#gMenu .menu > li {
    width:33% !important;
}
2016/01/18 16:08:51
id:a-kuma3

You're welcome !

2016/01/18 16:54:17
id:torimaki

質問したり回答を読ませていただいていううちに、不慣れな当方が、Wordpressの任意のテーマやプラグインを書きかえても良いものだろうかという気持ちが芽生えてまいりました。だいじょうなのかなぁ。。。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません