固定ページで短い本文、または本文なしの時1カラム幅広にすると表示がおかしくなる

Simplicityの特徴 › フォーラム › 不具合報告 › 固定ページで短い本文、または本文なしの時1カラム幅広にすると表示がおかしくなる

  • このトピックには15件の返信、2人の参加者があり、最後にMKにより11年前に更新されました。
15件の返信スレッドを表示中
  • 投稿者
    投稿
    • #32851
      MK
      ゲスト

      Simplicity1.8.8 20150919aで固定ページのみ本文が短かったり、本文がないページを1カラム(幅広い)または1カラム本文のみ(幅広い) にすると下の画像のようになります。投稿ページでは問題ないです。Simplicity1.8.5cでも1カラム(幅広い)にすると同じ不具合が出ます。

      https://goo.gl/DrmsYz

      https://goo.gl/QQtcDF

      https://goo.gl/XkMx5w

    • #32864
      アバター画像わいひら
      キーマスター

      おそらく、カスタマイザ>その他 ににある
      「カスタマイザーのスタイルを外部CSSに書き出す。」
      とかが有効になっているのではないでしょうか。
      もしこれが原因なら、基本的にあまり推奨してない機能なので、次のバージョンからは、キャプションに非推奨と記入しておこうと思います。

    • #32872
      MK
      ゲスト

      いえ、『カスタマイザーのスタイルを外部CSSに書き出す』は無効になっています。

      検証用にローカルで新しくwpをインストールし、プラグインもWP Multibyte Patch以外は入れておらずPHPやCSSなどの変更も一切なしの状態で確認致しました。変更したのは子テーマのカスタマイザーでSNSのチェックを全部無効にしたくらいです。すべてのブラウザで再現されました。

      わいひらさんの環境では再現されなかったという事でしょうか。

      体調が回復したら、お手すきの時にでも再度確認していただければと思います。

    • #32873
      Hidekichi
      ゲスト
      #main {
       margin: 0 auto;
      }

      を突っ込んだらセンターに寄ると思うんですが、どこで1カラムの見分けをしているのかがいまいちわからず。カスタマイザーで、何かしらのcssを出力して上書きしてるんでしょうかね?

      1カラムの時は、bodyタグに.one-column(←プラス→.wide|.narrow|.no-header)クラス追加で、親テーマあたりに

      body.one-column.wide #sidebar{
        display: none;
      }

      のような作り方をしてあると子テーマで色々できるんですけどね。

      MKさんの場合はwidth: 100%(あるいは、680pxとか740pxとか)もいるでしょうね。
      もし、#mainのwidthが100%の場合は、#body-inのサイズがオカシイようにも思えます。

    • #32881
      MK
      ゲスト

      >Hidekichiさん

      デベロッパーツールで確認したところ、通常の状態が

      
      #header-in, #navi-in, #body-in, #footer-in {
          width: 1070px;
          margin: 0 auto;
          box-sizing: border-box;
      }
      #main {
          float: left;
          box-sizing: border-box;
          width: 740px;
          padding: 20px 29px;
          border: 1px solid #ddd;
          background-color: #fff;
          border-radius: 4px;
          margin-bottom: 30px;
      }
      #sidebar {
          float: right;
          width: 300px;
          margin-bottom: 30px;
      }
      
      

      1カラム幅広にした時

      
      #header-in, #navi-in, #body-in, #footer-in {
          width: 1070px;
          margin: 0 auto;
          box-sizing: border-box;
      }
      #main {
          width: auto;
      }
      
      #main {
          float: left;
          box-sizing: border-box;
          /* width: 740px; */
          padding: 20px 29px;
          border: 1px solid #ddd;
          /* background-color: #fff; */
          border-radius: 4px;
          margin-bottom: 30px;
      }
      #sidebar {
          display: none;
      }
      
      

      という風になっていました。

      #main のwidth: autoはインラインでした。コメントになっている部分は実際は打消し線です。

      試しにデベロッパーツールでインラインの#main width: auto を #main width: 0 auto に変更しても、#mainの幅が740まで広がっただけでサイドバー部分は空いたまま画面いっぱいまで広がりませんでした。

      画面幅いっぱいにするだけならCSSで自分で修正できますが、1カラムにした時の仕組みがどうなっているのかわたしにはさっぱりわからないので、、、

      まあ、本文なしや本文が短い場合に1カラム幅広を選択する機会なんて稀だとは思いますが。テーマユニットテストデータを使っていなければ私もこの件や他の不具合にも気づかなかったと思います。

      実際、フォーラムを見ていると自分では思いつかない様な使い方をされている人もいるので非常に勉強になります。

    • #32883
      MK
      ゲスト

      すいません。#main width: 0 autoではなく#main width: 0 autoでした。

    • #32884
      MK
      ゲスト

      またまたすいません。#main width: 0 autoではなく#main margin: 0 autoです。

    • #32885
      MK
      ゲスト

      Hidekichiさんのいうように#main width:100にmargin: 0 autoにすると画面幅いっぱいになりましたが、cssを修正するだけでは根本的な解決ではないですよね。

    • #32886
      MK
      ゲスト

      なんどもすいません。

      background-color: #fffは打消しにはなっていなかったです。

    • #32888
      MK
      ゲスト

      連続投稿でうざくてすいません。
      投稿ページでも同じように1カラム幅広にした時

      
      #main {
          width: auto;
      }
      

      になっているのに、なんで画面幅いっぱいになるんだろうと確認したところ、関連記事に長い文章の記事が含まれているためでした。

      試しに新規でカテゴリーを作り、関連記事のない本文の短い文章で投稿したところ固定ページと同様に画面幅いっぱいにはなりませんでした。

      1カラム幅広選択時に#main width:100にmargin: 0 autoになるように、わいひらさんに修正してもらえれば解決ですかね?

    • #32889
      Hidekichi
      ゲスト

      css-custom.phpの851行目あたりにある#mainをautoから100%にすればいけるんじゃなかろうかと。

    • #32901
      アバター画像わいひら
      キーマスター

      #32872
      僕の環境では、そういった不具合は出なかったんですけど、できれば、不具合の出ているブラウザ情報と、対象ページURLがあると助かります。

    • #32905
      Hidekichi
      ゲスト

      >わいひらさん

      footer-postだったかあたりの、編集者と管理人の名前は変えた方が良いみたいな文章で#mainが押し広げられて広くなっているように見えているだけとかはないですかね?

      シェアボタンなんかがあってもそれで押し広げられて、広くなっているように見えるという感じかと思います。

      固定ページで本文短め(1行無いぐらいにして)、本文だけ広くのモードで、上記#mainを押し広げるようなものをdisplay:noneしたら、たぶん狭くなると思います。width: autoなので。

    • #32909
      MK
      ゲスト

      Hidekichiさん、ビンゴです!

      css-custom.phpの#mainをautoから100%にしたら画面幅いっぱいに広がりました!!

      >わいひらさん

      申し訳ありません。現在カスタマイズしているものは全てローカル上でして、まだサーバーに公開しているブログはないため対象ページURLを提示することができません。

      ただ、Hidekichiさんのおっしゃるように、わいひらさんの環境で症状が確認できていないのは本文以外の何かが#main幅を押し広げていているためだと思います。

      私も投稿ページでその罠に気づくまで時間がかかりましたから。

      それと、#32841で出ていた不具合ですが

      それとこれは私の環境だけかもしれませんが、Simplicity1.8.8 20150919aだと1カラム(幅が広い・狭いともに)にしたページが、IEとエッジの場合だけリロードしたり2カラムのページから1カラムページに移動すると結構な頻度で2カラムで表示されたり、幅広1カラムページのはずなのに2カラムの左メイン部分だけになりサイドバーが空白という症状が出ました。

      上記もcss-custom.phpの#mainを100%にしたら改善されました。

      Simplicity1.8.7では問題なかったと書きましたが、Simplicity1.8.7の時は自分でCSSで幅を指定していて、1カラム機能を使っていなかったからでした;

    • #32913
      アバター画像わいひら
      キーマスター

      なるほど。そういうことか。
      体調的なこともあり、#32888もちゃんと読んでいませんでした。
      100%に修正しておきます。

    • #32914
      MK
      ゲスト

      ありがとうございます。

15件の返信スレッドを表示中
  • トピック「固定ページで短い本文、または本文なしの時1カラム幅広にすると表示がおかしくなる」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)