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

wordpressテーマ修正について教えて下さい。
https://wordpress.org/themes/responsive
メニューバーを左右100%に変更したいのですがアドバイス願えれば助かります。

1417057787
●拡大する

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

▽最新の回答へ

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

メニューバーの外側にある id=container という要素の幅とパディングが指定されていて、これがメニューバーの幅を決めています。
メニューがこれをはみ出して、両側にあるサイズが変わる空白部分の幅を適切に使うのが、CSS 的には、ちょっと難しい感じです。

というわけで、外側を広げて、内側にあるものを狭める、という方針でスタイルをいじってみました。
テーマの style.css をいじります。

style.css の 760行目付近。#container のスタイルの指定をコメントアウトします。

/* #container {
 max-width: 960px;
 margin: 0 auto;
 padding: 0 25px;
} */

以下の記述を、style.css の末尾に追加します。

.front-page #wrapper {
 max-width: 960px;
 margin: 20px auto 20px auto;
 padding: 0px 25px;
}

#logo {
 max-width: 960px;
 margin: 0px auto;
 padding: 0px 25px;
 float: none;
}

.main-nav {
 background-color: #585858;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
 background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
 background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
 background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
 background-image: -o-linear-gradient(top, #585858, #3d3d3d);
 background-image: linear-gradient(top, #585858, #3d3d3d);

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);

}

ul.menu {
 max-width: 960px;
 margin: 0px auto;
 padding: 0px 25px;
}

f:id:a-kuma3:20141127141637p:image

これが、以下のようになります。

f:id:a-kuma3:20141127141651p:image


メニューの Home の文字が、本文の位置ではなく、メニューバーの左からの固定位置にきても構わないのであれば、もうちょっと簡単になりそうなんですが。


kaji0245さんのコメント
すみません、ファイルの中身が違うのでしょうか? responsiveフォルダ内のstyle.cssは全30行程度ですべてコメントアウトです。 同様にrtl.cssなるファイルもありましたが、#container等の記述がありませんでした。 イメージ的にはご掲示いただいた画像でOKなんですが。

a-kuma3さんのコメント
>> すみません、ファイルの中身が違うのでしょうか? responsiveフォルダ内のstyle.cssは全30行程度ですべてコメントアウトです。 << すみません、ファイル名だけを見てて、ディレクトリにまで気が回りませんでした。 [http://themes.svn.wordpress.org/responsive/1.9.7.5/style.css:title=responsive/style.css] ではなく、 [http://themes.svn.wordpress.org/responsive/1.9.7.5/core/css/style.css:title=responsive/core/css/style.css] の方を修正してください。

kaji0245さんのコメント
思った通りの修正ができました、ありがとうございます!
関連質問

●質問をもっと探す●



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