WordPress customizerテーマについて

Question

はじめまして。

WordPressのレスポンシブデザインのcustomizerでWebサイトを構築しております。

トップページに最近の投稿を配置しているのですが、
画面を小さくしたときに、投稿したアイキャッチ画像が
画面幅いっぱいに大きく表示されます。

子テーマでカスタマイズを試みていますが、
CSSのどれをどのように設定すればいいのか困っています。

どなたかカスタマイズされたご経験がある方がいらっしゃいましたら
具体的な方法を教えていただけないでしょうか。

Answer 1

GeorgeCohta様

この度は回答のほど、大変ありがとうございます。

CSS、こんなに深いところにあったのですね、

また、いろいろアドバイス頂き、大変参考になります。
ユーザービリティの面でも再度検討させて
いただきたいと思います。

Comments

[退会済みユーザー]

proccessfactoryさん、返信をいただきありがとうございます。
僕の回答がすこしでもお役に立てたとしたらとてもうれしいです。
今後ともよろしくお願いします。

Answer 2

こんにちは。

WordPressのレスポンシブWebデザインテーマ: Customizrということですが、こちら（リンク）ということで回答をすすめさせていただきます。

トップページで「画面を小さくしたときに、投稿したアイキャッチ画像が画面幅いっぱいに大きく表示され」てしまうとのことですが、僕も試しに上記のデモページで画面を小さくしていったところ、アイキヤッチ画像（サムネイル）が画面幅いっぱいに表示されました。

けれども、これは、レスポンシブWebデザインのサイトであれば、とくに不思議なことではありません。
画面幅が、PC用からタブレット用へと、ブレイクポイントを超えたために起こった現象です。

これが気になる（または問題になる）場合は、テーマをレスポンシブWebデザインでないものに変更されるか、CSSの Media Queriesのpx値を書き換えるしかありませんが、後者はあまり意味がないのではないかと思います。
ブレイクポイントのpx値は、多くのサイトで採用されているものであり、ユーザーが使用しているデバイスとの親和性から導き出されたものです。これをいたずらに書き換えてもユーザビリティを損なうだけだと僕は思います。

ちなみに、CSSを書き換える場合は、
フォルダ内の inc > assets > css > rtl > tc_common.css
inc > admin > css > theme-customizer-control.css
それぞれの /* Media Queries */の記述を変更する必要があります。
（このテーマは、ほかの WordPressのテーマにくらべ、ひじょうに複雑な構成になっていました）

なお、CSSを書き換える作業の前にバックアップをとっておくことをおすすめします。

以上、ご参考いただければ幸いです。