1417057787 wordpressテーマ修正について教えて下さい。

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

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/11/27 12:09:47
  • 終了:2014/11/27 23:40:29

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4547ベストアンサー獲得回数18962014/11/27 14:32:31

ポイント100pt

メニューバーの外側にある 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 の文字が、本文の位置ではなく、メニューバーの左からの固定位置にきても構わないのであれば、もうちょっと簡単になりそうなんですが。

他1件のコメントを見る
id:a-kuma3

すみません、ファイルの中身が違うのでしょうか?
responsiveフォルダ内のstyle.cssは全30行程度ですべてコメントアウトです。

すみません、ファイル名だけを見てて、ディレクトリにまで気が回りませんでした。

responsive/style.css ではなく、
responsive/core/css/style.css の方を修正してください。

2014/11/27 22:21:24
id:kaji0245

思った通りの修正ができました、ありがとうございます!

2014/11/27 23:41:19

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

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

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

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

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