ページの横幅について

By
  • このトピックには11件の返信、1人の参加者があり、最後にぐんじょうにより3年、 9ヶ月前に更新されました。
11件の返信スレッドを表示中
  • 投稿者
    投稿
    • #17662
      ぐんじょう
      ゲスト

      シェフさん

      4536テーマを使い初めて3年目になるのですが、流体シェイプデザインの採用を始めとする様々な改良を施していただいてありがとうございます。これだけ長きに渡ってテーマの開発を続けて頂いていることに感謝します。

      さて、こちらからの要望なのですが、カスタマイズのデザインの項目についてです。現在は、トップページ・記事・アーカイブページの3種類のページについて横幅をピクセル指定の形で設定できるようになっています。サイトにお越しになる方の端末の画面サイズは様々であり、ピクセル指定では閲覧する端末によって表示されるデザインが必ずしも一定しません。できれば、ページの横幅をピクセルでは無く、ブラウザのウィンドウに対して何%の横幅にするのかという形で設定できるようになればありがたいです。

      ぐんじょう

    • #17664
      シェフ
      キーマスター

      長い間4536をご利用いただきありがとうございます。嬉しいです!

      横幅の件ですが、ご要望を深く理解できていないような気もするのですが、現状4536は「レスポンシブデザイン」になっており、端末に合わせて自動的に読みやすいレイアウトになります。

      (例:パソコンの時はサイドバーが表示される、スマホの時はそれが開閉メニューになる、など)

      パーセンテージで表示をしてる参考サイトなどがあれば助かるのですが、ご教示いただけないでしょうか?

      また、テーマへの実装は難しいと思いますが、個別にCSSはご共有できるので、ご相談ください。

    • #17670
      ぐんじょう
      ゲスト

      2日ほど前に投稿させてもらったのですがその投稿が表示されていないようで、もしかしたらスパムに登録されていないでしょうか…

    • #17665
      ぐんじょう
      ゲスト

      ご返信ありがとうございます。

      実例ではないのですが、こちらのサイト( https://saruwakakun.com/html-css/basic/width-height )の「3-4. 幅を%で指定する」の項目が該当します。

      意図としては、以下に添付した図のように、デスクトップでの表示時に青で示した幅と赤で示した幅の比がディスプレイの大きさによらず一定になるようにしたいということです。

      View post on imgur.com

    • #17673
      シェフ
      キーマスター

      こんにちは!
      すみません、文字以外のもの(script)が本文にあったためにレビュー待ちの状態になっていたようです😓

      横幅の%の件ですが、具体的にどの部分に適用したいとかはありますか?

      おそらく、個別にCSSをご共有する形になるため、どこをどのようにしたいかお聞かせいただければと思います。

    • #17675
      ぐんじょう
      ゲスト

      専門用語を知っていればはっきりと指摘できるところなんでしょうが、何と言えばよいのか分かりませんが、本文の部分に適用したいです。

    • #17676
      シェフ
      キーマスター

      先日の投稿、もう一度確認してみました。
      ユーザーの使用端末によって最適化される現状のレスポンシブデザインではなく…ということですが、どの端末でも同じ見た目ということになると、例えばスマホでもサイドバーが表示されることになるのですが、そういうことでしょうか?

    • #17679
      ぐんじょう
      ゲスト

      デスクトップでの見た目同じにしたいです。デスクトップの画面の横幅の大きさが様々なのが理由です。

    • #17680
      シェフ
      キーマスター

      上手く意図を汲めず、すみません。。

      「デスクトップの画面の横幅の大きさが様々」とはどういう意味でしょうか?
      レスポンシブデザインは端末によって読みやすいレイアウトになるデザインで、デスクトップの場合は常に一定のレイアウトになっているかと思います。

      例えば、横幅を1080pxにした場合、デスクトップでサイトを見ると、画面が1080px以上の端末では常に横幅が1080pxで固定されるため、どれだけ大きな画面のパソコンから見ても横幅が1080pxになります。つまりどのパソコンで見てもレイアウト(デザイン)が一緒です。

      そうではなく、大きな画面のパソコンからアクセスした場合、サイトも一緒に大きく表示したい、つまり横幅もパソコンの画面と一緒に大きくしたい、という意味でしょうか?

    • #17682
      ぐんじょう
      ゲスト

      「大きな画面のパソコンからアクセスした場合、サイトも一緒に大きく表示したい、つまり横幅もパソコンの画面と一緒に大きくしたい」という意味です。

    • #17686
      シェフ
      キーマスター

      すみません、ご返信遅くなりました。
      今回のご要望ですが、以下のCSSで実現できるかと思います。

      .width-1080 #header-image, .width-1080 .container, .width-1080 .inner{ max-width: none; }

      AMPを使っていない場合は以下のCSSでもOKです。

      #header-image, .container, .inner{ max-width: none !important; }

      このどちらかのCSSをコピーして、外観→カスタマイズ→追加CSSにペーストしていただければと思います。

    • #17691
      ぐんじょう
      ゲスト

      何度もやり取りに手間をおかけして申し訳ありませんでした。サイトメンバーにも追加CSSによる変更に満足してもらえています。お忙しい中ご迷惑をおかけしてすいませんでした。本当にありがとうございます。

11件の返信スレッドを表示中
  • フォーラム「4536への要望」には新規投稿および返信を追加できません。