PCで見たときにブラウザ幅をちぢめても2カラムを並んで表示させたい場合

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など PCで見たときにブラウザ幅をちぢめても2カラムを並んで表示させたい場合

  • このトピックには16件の返信、2人の参加者があり、最後ににより1ヶ月、 1週前に更新されました。
16件の返信スレッドを表示中
  • 投稿者
    投稿
    • #25692 返信
      蟹爪フライ
      ゲスト

      おせわになっております。バージョン:1.6.1を使用しています。
      ヘッダーとナビゲーションバーを幅いっぱいに広げ、準レスポンシブにしています。

      自分自身がPCでブラウザ幅を狭めて閲覧するときが多いので、
      そういったときに1カラムにならないよう2カラムのままにしたいと希望しています。
      →ブラウザの右端にサイドバーが途切れている状態にしたい
      →3本線メニューを出さずナビゲーションも出したままにしたい

      親テーマのresponsive-pc.cssをいじり
      ヘッダー以外は希望通りの見え方になりました。
      問題はヘッダーとナビゲーションです。
      他のファイルも探したのですがヘッダーの該当箇所がわからず740pxのままで
      ナビゲーションは幅のせまい740pxヘッダーの左から始まり
      右方向へはめいっぱい(幅いっぱい)に伸びた状態です。

      お手数ですが、カスタマイズ箇所を教えていただければ幸いです。
      どうぞよろしくお願いいたします。

    • #25708 返信
      わいひら
      キーマスター

      準レスポンシブ表示なら、「外観→カスタマイズ→レイアウト(全体・リスト)→PCでサイドバーをレスポンシブ表示」のチェックを外せばできるかと思います

    • #25712 返信
      蟹爪フライ
      ゲスト

      お返事ありがとうございます。
      さっそくPCでサイドバーをレスポンシブ表示をはずしてみましたが、
      そうするとブラウザ幅を狭くすると右サイドバーが落ちてしまいます。

      親テーマのカスタマイズにて
      ブラウザ幅を縮めた場合でも
      右サイドバーが落ちないようにはできており
      (メインカラムと右サイドが横並びの状態です)
      3本線メニューは出ないようにし、ナビゲーションが消えないようにしています。
      ですがヘッダー部分のみが妙な見え方になった状態です。

      ちなみにヘッダー部分は740pxのまま中央寄せ、
      ナビゲーションバーが右方向にのみフルに伸びています。
      ↓こんな感じの状態です。

      □□□□□
      ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

      □がヘッダー部分(中央に表示)
      -がナビゲーションバー

      アドバイスいただけましたら幸いです。
      よろしくお願いいたします。

    • #25721 返信
      わいひら
      キーマスター

      さっそくPCでサイドバーをレスポンシブ表示をはずしてみましたが、
      そうするとブラウザ幅を狭くすると右サイドバーが落ちてしまいます。

      カスタマイザーからの設定変更でそのようにならないようになっているはずです。
      今、ローカル環境でも動作確認しました。

      親テーマのカスタマイズにて..

      このカスタマイズをキャンセルした状態で、設定変更してみましたでしょうか?
      カスタマイズによる不具合は、どのように設定されているのかがわからない(実際のコードがない)ので、サポート対象外のものにもあるのですが、ちょっと回答はできないです。というか、どのように回答してよいかがわからないです。

      カスタマイズのない状態(&完全レスポンシブ機能がオフ)でも直、右カラムが落ちるようなら、実際のURLがないと原因はわからないかもしれません。

    • #25722 返信
      hidekichi
      ゲスト

      おそらくですが、ブラウザの幅を縮めた時サイドバーが落ちるのは、#body-inの幅がメディアクエリで一定の幅(1280pxとか1070px以下)の時、740pxになるからだろうと思います。
      なので、

      @media screen and(max-width: “サイドバーを表示したい最大幅(※1)”){
      #body-in{
      width: 640px+300px+マージン(※2)
      }
      }

      ぐらいに設定すればサイドバーは右側にあると思います(float:rightが効くので)。
      その時にもしサイドバーが落ちるようであれば、float:がnoneになっていたりするかもしれませんので、そこらをfloat:rightに設定すればいけるとおもいます。

      ※1 mix-widthとmax-widthを設定しても良いと思いますが、Simplicityが自前で持っているメディアクエリのブレイクポイントと重なる場合があるとちょっとややこしくなるかもしれません。
      ※2 マージンは#mainと#sidebarの間隔です。もしかしたらボーダーあたりも考慮する必要があるかも知れません。

    • #25723 返信
      hidekichi
      ゲスト

      あ、脊髄反射してしまった。
      サイドバーは解決してるんですね(滝汗

    • #25725 返信
      hidekichi
      ゲスト

      メニューの部分だったら、 .menu-main-container あたりではないかと思うんですけれども。

    • #25726 返信
      わいひら
      キーマスター

      >#25723

      はい。一応、以前同様の要望が多かったため、テーマカスタマイザーからサイドバーが落ちないようにできるよう機能追加しました。(サイドバーを落とすCSSを読み込まないという形で)

    • #25729 返信
      蟹爪フライ
      ゲスト

      わいひらさん、お返事ありがとうございます。
      hidekichiさん、ご親切に感謝します。

      まず当方の設定についての概念から間違っているのかもしれませんが
      完全レスポンシブオフ、サイドバーレスポンシブオフは最初に試しており
      その際に右カラムが落ちてきました。
      しかも落ちた幅が100%ではなく狭いまま右寄せだったのが気になっていたので
      このたびの親テーマ部分のカスタマイズに踏み切りました。
      ですが色々カスタマイズしているので検証をきちんとする意味で
      とりいそぎ別のテストブログに先ほど最新バージョンを取り込んで
      ファイルなどは何も触らない状態で設定してみました。
      完全レスポンシブオフ、サイドバーもオフ、サイドバー追従はナシ、
      ヘッダー画像とナビゲーションはフル幅です。
      やはり当方のブラウザ(IEとFirefox)ではカラム落ちします。
      http://sakaz.xsrv.jp/blog2/

      なお、親テーマからいじっていたときのresponsive-pc.cssは以下のようにしました。
      サポート外とのことで大変申し訳ありません。
      もし何かございましたらアドバイスいただければ幸いです。
      hidekichiさんの教えてくださった.menu-main-containerを入れて
      適当に100%などにしてみましたがダメでした。意味が分かっておらず申し訳ありません。

      /************************************
      ** PC用のレスポンシブデザインスタイル読込
      ************************************/
      @media screen and (max-width:1110px){
      div#header-in, div#navi-in, div#body-in, div#footer-in{
      width:1070px; /*width:740px;*/
      }

      #site-title a{
      /*margin-right:120px;*/
      }

      div#sidebar{
      float:right;
      width:300px;/*いろいろ削除*/
      }

      #footer-widget{
      /*display:none;*/
      }

      #footer-widget .footer-left,
      #footer-widget .footer-center,
      #footer-widget .footer-right{
      /*clear:both;*/
      /*width:100%;*/
      }

      #sidebar-scroll{
      display:none;
      }
      /************************************
      ** モバイルメニュー
      ************************************/
      #mobile-menu{
      display:none; /*display:block;*/
      position:relative;
      }

      /************************************
      ** ヘッダー関係
      ************************************/
      #header .menu{
      display:none;
      }

      #header .alignright{
      display:none;
      }

      /************************************
      ** メインメニュー
      ************************************/
      #navi ul{
      /*display:none;*/
      /*border:0;*/
      }

      #navi ul li{
      /*float:none;*/
      display:block;
      height:auto;
      }

      #navi ul li a:hover{
      text-decoration:none;
      background-color:#ddd;
      }

      #navi ul li a {
      font-size: medium;
      padding: 10px;
      color: #111;
      }

      #sidebar .ad-space .ad-label{
      display:block;
      }

      #navi ul.sub-menu,
      #navi ul.children{
      position: relative;
      width:auto;
      /*background-color:#777;*/
      border-width:0;
      }

      #navi ul.sub-menu ul,
      #navi ul.children ul {
      left: 0;
      top: 0;
      }

      #navi .sub-menu li,
      #navi .children li{
      height:auto;
      padding-left:30px;
      }

      .slicknav_menu {
      display: block;
      }

      }

      /* 画面幅が1111px以上の時 */
      @media screen and (min-width:1111px){
      /*#navi ul{display:block}*/

      .ad-sidebar{
      margin-top:0;
      }

      #navi ul.sub-menu,
      #navi ul.children{
      display:none;
      }

      }

    • #25730 返信
      蟹爪フライ
      ゲスト

      書き忘れていました。ラージピクチャーヘッダーを指定しています。
      その部分のcssもさわったのですがうまくいかず・・・
      何度も申し訳ありませんでした。

    • #25742 返信
      hidekichi
      ゲスト

      まずwidth:1110pxの時、サイドバーがカラム落ちするのは#body-inが740pxしかないためであります。
      これはstyle.cssが問題なのではなく、インラインで書いてあるメディアクエリが原因だと思います。
      customizer.phpあたりの下の方に書いてあったような。

      ウェブ開発環境で、エレメント(要素)のスタイルを見れる画面で、例えば右側にファイル名(style.css:110)みたいな表示がありますよね?ここにindexと書いてあるとそれはインライン化されたcssなのです。つまりはhtmlのheadタグの中に書かれているいわゆるGoogleが言う「小さなcss」と言うやつです。

      なので、インライン化されている箇所(customizer.php)の該当メディアクエリを調整する必要があります。

      .menu-main-containerは、ナビゲーション部分を囲むタグです。たぶん、ここには横幅が入っていないように思います。メニュー部分の要素ulはwidth:100%なので、それを囲むタグにサイズの指定がない場合は画面幅(あるいは.menu-main-containerの更に親要素とか)に合わさります。

      メニュー部分の要素ulはそのいずれかの親要素に横幅を合わせている(width:100%)なので、.menu-main-containerのサイズを任意の幅に指定してやればulはそれ以上大きくなりません。
      逆説的に言うと、.menu-main-containerは必要なく、ulでサイズを指定すればよいわけですが、ところがどっこい背景画像を入れたり、何かしら細工をする時には必要になったりもするので入れてあるんだろうと思います。またulなどのリスト部分はcssが色々書きにくい部分でもあるためそうしてあるのかもしれません。

      ※ ちなみに最新のバージョンではもしかしたら.menu-main-containerは別名になってるかも知れません。#navi-inの子要素でulを囲んでいるブロックです。

      Googleの推奨的に言うと、ファーストビューのhtmlはなるべく減らしたほうが良いらしいので、不要なクラスやIDは取り除く方が望ましいのかも知れません。ラッパーが必要な場合はjQueryで後から付けられますのでhtmlはシンプルに(Simplicityと言うところからも)と思いつつ、色々面倒だからまぁいいかと言う所で自分は何もしてませんけれど、そこらはわいひらさんに任せる感じです(笑)

      例えば、

      <nav class="global-navi">
        <div class="navi-in">
          <ul class="menu"></ul>
        </div>
      </nav>

      navi-inと言うidかclassがどうしても必要な場合は上記の感じで、navi-inが必要ない場合は、

      <nav class="global-navi">
        <ul class="menu"></ul>
      </nav>

      これで良いわけです。背景にしろ、横幅・縦幅の設定は<nav>で設定できるので、その中のmenu本体は変わらず使用できるかと思ったりもします。ここらはわいひらさんのデザインで何かしら意図があるからだろうと思うので自分のサイトでもあまりいじらないでいます(笑)

      あと、親テーマをイジるとアップデートの時大変になるので子テーマを利用されることを推奨します。
      そのままでも問題はないのですが、カスタマイズしまくった親テーマをアップデート時に元に戻すのは案外大変です。
      親テーマのstyle.cssはコピーして保存しておいて、子テーマを適用した後に子テーマのstyle.cssにコピペすれば大丈夫です。一部プロパティが重複したりする場合は打ち消すプロパティを入れないといけないこともあったりしますが、たいていは子テーマ優先なので。
      functions.phpやその他ファイルのカスタマイズをされている場合も同様です。子テーマに含まれていないファイルのカスタマイズをされている場合はそのファイルをコピーしておくことをお忘れなく。

    • #25748 返信
      わいひら
      キーマスター

      URLありがとうございます。
      ソースを解析できたおかげで、原因が判明しました。
      おそらく、カスタマイザーから「ヘッダー外側背景画像」に画像を設定していると、そのように動作するようです。
      一度、画像を外してカスタマイザーをセットすると、レスポンシブにならないのではないかと思います。

      「ヘッダー外側背景画像」がセットされていると、hidekichiさんが書かれているように、HTML内に直接以下のようなスタイルが、書き込まれてしまう設定にこれまではなっていました。

      @media screen and (max-width: 1110px) {
        #header, #header-in, #navi-in, #navi, #navi-in, #body-in, #footer-in {
            width: 740px;
            margin:auto;
        }
      }
      
      @media screen and (min-width: 1111px) {
        #navi ul{
          display:block;
        }
      }

      今回少し動作確認してみた限りでは、この部分はそこまで必要ではないと思い、削除しようと思います。(今回のように判明しづらい不具合の温床にもなるので)
      次のバージョンで、アップデートするとおそらく修正されるのではないかと思います。

    • #25763 返信
      蟹爪フライ
      ゲスト

      こんにちは。色々おせわになっております。

      まずはhidekichiさん、ご親切にありがとうございました。
      本当は子テーマをさわりたかったのですが
      以前の他の方からの切り替え幅の質問を拝見したときの印象があり
      親テーマをいじったほうがよいのかと思って踏み切りました。
      また、親のcss/~~となっている部分のファイルを
      子テーマにどう展開(配置)していいかわからなかったというせいもあります。

      cssやphpの根本の部分や理論がわかっていないので
      実はcustomizer.phpの中を見てあきらめかけていたところ
      わいひらさんが検証してくださり、
      レスポンシブにならずカラム落ちするというそもそもの理由がわかり
      ありがたいかぎりです。

      >わいひらさん
      画像をはずしたりレスポンシブのチェックを外したり入れたりと
      何度かカスタマイザーの設定をやり直しましたが
      (テーマそのものの削除とインストールもしました)
      カラム落ちはそのままの状態です。
      次のアップデートを待ってから改めてトライし
      ご報告・ご相談させていただければと思います。

      お忙しいところご対応ありがとうございました。
      引き続きどうぞよろしくお願いします。

    • #25767 返信
      わいひら
      キーマスター

      もう既に、新しいバージョンを出したのでよかったら試してみてください。
      http://wp-simplicity.com/simplicity1-6-2/

    • #25769 返信
      蟹爪フライ
      ゲスト

      わいひらさん、きめ細やかなご対応、ありがとうございます。
      さっそく試してみました。

      設定する中で気づいたのですが
      カスタマイザーは一旦閉じてから開かないと
      設定項目が出てこない場合があるのですね。

      結果としては、無事に解決いたしました。
      その正しい設定に行きつくまでに多少の混乱があったので
      (わいひらさんにとっては当たり前のことかもしれないのですが)
      他の方の参考になるかもしれないので記しておきます。

      ヘッダーフル幅、ナビゲーションフル幅、右カラム落ちをしたくない場合、
      →完全レスポンシブをオフ、右サイドバーのレスポンシブもオフ
      →スキンをラージピクチャーヘッダーにしているとカラム落ちするのでオフ
      →ヘッダーを外側画像を設定することでフル幅にする
      →「色」のところでナビゲーションをフル幅にする
      上記の設定にすることが必要だとわかりました。

      このたびは、わいひらさん、hidekichiさん、ありがとうございました。
      まだサイトは構築途中なのですがせっかくカスタマイズを重ねたSimplicityを
      今後も愛用していきますのでどうぞよろしくお願いします。

    • #25772 返信
      hidekichi
      ゲスト

      >カスタマイザーは一旦閉じてから開かないと
      >設定項目が出てこない場合があるのですね。

      カスタマイザーの話題になったので、ついでに報告しときます。
      カスタマイザーで、たまにウィジェットが出てこない時があったので、ふとF12からweb開発環境を開いたわけですが、javascriptでエラーが出てました。
      Uncaught ReferenceError: jQuery is not definedなので、jQueryが真っ先に読み込まれてないという事なんだろうと思います。

      iframeで読み込んでる内容には、本来公開しているhtmlの内容が記載されていても、カスタマイザーのヘッダでjQueryが読み込まれていないのが原因なんだろうと踏んでいたのですが、読み込まれているんですよね。

      公開しているサイトのhtml部分ではjavascript(jQuery)の読み込みエラーは出ないようにしているんですが(スマホを除く)、カスタマイザーになるとエラーが出たりします。
      もしかすると最新バージョンでは解決されているのかも知れませんが、一応報告ということで。

    • #25779 返信
      わいひら
      キーマスター

      スキンをラージピクチャーヘッダーにしているとカラム落ちするのでオフ

      スキンを作った後、機能追加したので他のスキンでもそういったことはあるかもしれません。これまで書いてきた全ての設定を憶えているわけではないので、もしかしたら他の設定項目に関連して不具合が出ることもあるかもしれません。

      カスタマイザーは一旦閉じてから開かないと
      設定項目が出てこない場合があるのですね。

      そういった状態にはなったことがないですが、これまでのフォーラムへの報告や経験上、カスタマイザーの挙動がおかしいときは、ブラウザのキャッシュが原因の可能性が高いかもしれません。

16件の返信スレッドを表示中
返信先: PCで見たときにブラウザ幅をちぢめても2カラムを並んで表示させたい場合
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)