サポート » テーマ » Twenty Twelveのテーマの可変を固定させる方法

  • お世話になっております。
    現在、Twenty Twelveのテーマを元に編集しております。
    サイトの幅を縮小した時に可変により、グローバルナビなどがカラム落ちしてしまい、これを固定したいのですが、CSSのどこを触ればいいかわかりません。
    また、スマホで表示させた時も、PCと同じように表示させたいのですが、widthの変更により、同じようにカラム落ちしてしまいます。
    よろしければ、可変を固定させる方法をご教授頂けると幸いです。
    下記が現在編集中のサイトです。
    http://xn--68j5e4ch4o8h8b0216a3mb937j.jpn.com/
    よろしくお願いします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック投稿者 hoccolly

    (@hoccolly)

    おそらくコードは、
    .site {
    margin: 0 auto;
    max-width: 960px;
    max-width: 68.571428571rem;
    overflow: hidden;

    ここが関係していると思います。
    ここのmax-を削除しても固定されませんでした。

    グローバルナビなどがカラム落ち

    レスポンシブルテーマなのでブラウザの幅を判定しているため、
    カスタマイズの仕方が悪いので本来の動作がカラム落ちに思える動作になっています。

    フロントページのソースを観た限りですが、

    1. header.phpの中にもレスポンシブを呼びだすタグが含まれていたらそれを取り除く。
    2. functions.phpに書いてある、navigation.jsを無効にしてください。

    勝手に幅に合わせて変わるナビを無効にできます。

    ただし、ナビの下のバナー。フッター前のバナー同様、スマホで見るとスクロールしなくちゃいけなくなることでユーザビリティーは良くないものになりますね。

    また、公式テーマですから今後もアップデートされるでしょう。現在の hoccolly さんのカスタマイズではアップデートが今後あるときにはまた変更が必要になりますよ。

    現在のカスタマイズで維持するのであればこテーマで行う。
    スマホにはスマホ用のレイアウトサイトを用意するのがよろしいでしょう。

    こんにちは、

    サイトを拝見しました、テーマを TwentyTen に変更してしまうのが、最も簡単で、手間がかからないと思います。

    トピック投稿者 hoccolly

    (@hoccolly)

    digit@maetel さん
    nobita さん

    お返事を頂きましてありがとうございました!
    非常に助かりました。
    結果、TwentyTenを元に再度編集する事にしました。
    しかし、TwentyTenのテーマにしたところ、右サイドバーがなぜかカラム落ちしており、元に戻し方がわかりません。
    TwentyTenのテーマは何も触っていないと思います。
    お手数をお掛けいたしますが、カラム落ちしている原因をご教授頂けないでしょうか。
    下記が現在編集中のサイトです。
    http://xn--68j5e4ch4o8h8b0216a3mb937j.jpn.com/

    タグが閉じてないからではないでしょうか

    トピック投稿者 hoccolly

    (@hoccolly)

    digit@maetel さん

    お返事ありがとうございます。
    タグの閉じ忘れですが、チェックしたのですが原因箇所がわからず…
    またTwentyTenのテーマは何も触っていないと思います。
    お手数をお掛けいたしますが、どこが原因かご教授頂けませんでしょうか?

    記事の頭のふたつのタグを削除する

    <div id="cms-content">
    <div id="top-left">

    あるいは

    <p><!-------コンテンツここから-------></p>
    <div id="cms-content">
    <div id="top-left">
    <p>一人暮らしのインテリアを選ぶのは非常に楽しい作業です。</p>
    <p>しかし、</p>
    <p>1、予算との兼ね合い</p>
    <p>2、部屋の広さとの兼ね合い</p>
    <p>3、テーマを絞りきれない</p>
    <p>という理由から、一人暮らしのインテリアは選びにくい、楽しくない作業になってしまっています。</p>
    <p>しかし、逆に考えると、一人暮らしというのは自分のお城を持つ事であり、</p>
    <p>最高に自由な空間を持つという事です。</p>
    <p>その時に選ぶ、インテリアというのは本当に自由な我がままな表現そのものです。</p>
    <p>このサイトでは、皆さんが我がままにおしゃれに一人暮らしを満喫できる事を、お手伝いすることを目的にしたいと思います。</p>
    <p>インテリアの種類が分からない。家具の予算感が分からない。</p>
    <p>実際のところ、何をどうしたらおしゃれになるのかがあまり把握できない。。。</p>
    <p>そんな方が多いのですが、</p>
    <p>色々考えずに、ベッドとソファとローテーブルを合わせるだけで良かったり、</p>
    <p>間接照明を二つ部屋の端っこにおくだけで全然、雰囲気が変わったり、と、</p>
    <p>本当に本当にちょっとした豆知識があるだけで、一人暮らしのインテリアを楽しむ事が出来る様になります。</p>
    <p>その豆知識をこのサイトではお伝えできればと思っています。</p>
    <p>一人暮らしのインテリアは見ているだけでも本来、楽しい物です。</p>
    <p>インテリアショップに行くと、ワクワクしている人をたくさん見かける事が出来ます。</p>
    <p>一方、楽しみすぎて疲れている人も見ます(笑)</p>
    <p>それほど、人の興味関心をそそるコンテンツなのでしょう。</p>
    <p>その辺りの楽しさ、ワクワク感を忘れてしまっては、知識をどれだけ増やしていっても、</p>
    <p>やはり、理想の部屋は出来上がりません。</p>
    <p>一人暮らしのインテリア。</p>
    <p>このテーマは簡単でシンプルなのですが、このテーマを存分に楽しんで頂きたい。</p>
    <p>このサイトの意味合いをその様に、受け取って頂けると嬉しいと思います。</p>
    <p>また、失敗例も少しずつアップしていきたいと思います。</p>
    <p>これをしなければ間違わないという事が分かれば、</p>
    <p>それも一人暮らしのインテリアを楽しめる理由になると思います。</p>
    <p>方向性はその都度、変わっていくと思いますが、どうぞ、おつき合い下さいませ。</p>
    <p>一人暮らしのインテリアを実際に購入したい方はこちらへ</p>
    <p><a onclick="javascript:pageTracker._trackPageview('/outgoing/www.1hitorigurashi.com/');" title="一人暮らし インテリア"  href="http://www.1hitorigurashi.com/">一人暮らし インテリア</a></p>
    <p> </p>
    <p>◆カテゴリー</p>
    <p><a title="一人暮らしのインテリア集!" href="http://xn--68j5e4ch4o8h8b0216a3mb937j.jpn.com/%E4%B8%80%E4%BA%BA%E6%9A%AE%E3%82%89%E3%81%97%E3%81%AB%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%A4%E3%83%B3%E3%83%86%E3%83%AA%E3%82%A2%E9%9B%86%EF%BC%81/">一人暮らしのインテリア集!</a></p>
    <p><a title="インテリアコーディネートの実例集" href="http://xn--68j5e4ch4o8h8b0216a3mb937j.jpn.com/%E3%82%A4%E3%83%B3%E3%83%86%E3%83%AA%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%8D%E3%83%BC%E3%83%88%E3%81%AE%E5%AE%9F%E4%BE%8B%E9%9B%86%EF%BC%81/">インテリアコーディネートの実例集</a></p>
    <p><a title="一人暮らしのカーテン" href="http://xn--68j5e4ch4o8h8b0216a3mb937j.jpn.com/%E4%B8%80%E4%BA%BA%E6%9A%AE%E3%82%89%E3%81%97%E3%81%AB%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%AB%E3%83%BC%E3%83%86%E3%83%B3%E4%B8%80%E8%A6%A7/">一人暮らしのカーテンをまとめました。</a></p>
    <p><a title="ワンルームインテリアの豆知識" href="http://xn--68j5e4ch4o8h8b0216a3mb937j.jpn.com/%E3%83%AF%E3%83%B3%E3%83%AB%E3%83%BC%E3%83%A0%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%86%E3%83%AA%E3%82%A2%E3%81%AE%E8%B1%86%E7%9F%A5%E8%AD%98/">ワンルームのインテリアの豆知識を一覧にしました。</a></p>

    最後に閉じタグふたつを加える。

    トピック投稿者 hoccolly

    (@hoccolly)

    digit@maetel さん

    ご親切にありがとうございました!
    非常に助かりました!

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「Twenty Twelveのテーマの可変を固定させる方法」には新たに返信することはできません。