[ぐんじょう]

シェフさん

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

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

ぐんじょう

[シェフ]

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

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

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

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

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

[ぐんじょう]

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

[ぐんじょう]

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

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

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

View post on imgur.com

[シェフ]

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

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

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

[ぐんじょう]

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

[シェフ]

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

[ぐんじょう]

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

[シェフ]

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

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

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

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

[ぐんじょう]

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

[シェフ]

すみません、ご返信遅くなりました。
今回のご要望ですが、以下の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にペーストしていただければと思います。

[ぐんじょう]

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

[投稿者]

投稿