人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

http://tsurumaki-office.com/

●質問者: torimaki
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●390ポイント ベストアンサー

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

/*-------------------------------------------*/
/* 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]-->

torimakiさんのコメント
a-kuma3さん いぜんのご回答ともども、ありがとうございます。 ファイルの記述の書きかえということですが、それが。。。ご指摘の記述が書かれているファイルを見つけることができませんでした。 確認方法は以下のとおりです(採用しているテーマと、それに関連したプラグインのファイルを調べてみました)。 使用しているサーバー(さくら)のコントロールパネルにログイン > フィルマネージャー> wp-content >theme > biz-vector >_scssおよびcssのフォルダの中から同拡張子のファイルの記述を「検索」。 同様に、plugin>biz-vector-neatのフォルダの中の_scss、cssの拡張子のファイルの記述を「検索」。 なお、さくらに確認したところ、同社レンタルサーバーにおけるフィルマネージャでは、ファイル名は検索できるものの、ファイル内のタグやスタイルシートは検索不可である、ということ。フィルマネージャー上の該当ファイルの記述を、mi(テキストデータ)のファイルにいったんコピー&ペーストしたのち「検索」しています。 なにゆえ不慣れなため、捕捉できなかった可能性もあるやもしれません。そのさいは、どうぞ事情をご察しくださいませ。

a-kuma3さんのコメント
NEAT ってのは、書籍を買わないとソースが見られないみたいですね (´・ω・`) .css ではなく、.php に記述してあるような気がするんですが、 /wp-content/themes/biz-vektor-child/style.css に、以下のように追記してもいけると思います。 >|css| #gMenu .menu > li { width:33% !important; } ||<

torimakiさんのコメント
ご回答の方法、もとのファイルをさわらないで、子テーマのスタイルシートで対応するというのは、とても助かります。 不測の事態があったとき、当スタイルシート(子テーマのスタイルシート)で対処できますし、 テーマやプラグインがアップデートされるたびに、該当する記述を書き換える必要もなさそうです。 貼っていただいた記述、さっそく子テーマに貼ってみました。がしかし、うまく反映されないようです(・・;) お手数をおかけしますが、お手すきのときに、いまいちど、おつきあいいただけると幸いです。 本題と外れてしまいますが、NEATは、書籍を発行しているインプレス社のウェッブサイトからダウンローすることは可能です。ただ、そのさいに、わざわざアカウントを登録しなければならないう。。。なぜ、Wordpressのプラグインではなく、わざわざ、インプレスのウェッブからのダウンロードなのか。。。ま、いっか。 http://book.impress.co.jp/books/1113101040 末筆になりましたが、再度のご回答、ありがとうございました。

a-kuma3さんのコメント
>> お手数をおかけしますが、お手すきのときに、いまいちど、おつきあいいただけると幸いです。 << 以下を style.css に追加したようですが、// は、css ではコメントとして機能しません。 >|css| // グローバルメニューを三等分にする #gMenu .menu > li { width:33% !important; } ||< 以下のようにしてください。 >|css| /* グローバルメニューを三等分にする */ #gMenu .menu > li { width:33% !important; } ||<

a-kuma3さんのコメント
You're welcome !

質問者から

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


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ