Q&A
chromeで該当ページを開いてみて、画像の上で右クリック＞「検証」をした時に、imgタグのCSSってどうなってますか？
wordpress、HTML初心者です。
助けてください。
テーブル内の画像がスマホ表示で縦長に表示されてしまいます。
ネットで検索してもCSSでのやり方は記載があるものの、
HTMLでどのコードが必要なのか教えて頂きたいです。
何時間かかっても分からず困っています。
どうぞよろしくお願いします。
追記：テーマは「STINGER」を使用しています。
固定ページの中にはちゃんと画像が表示されているページがあるものの、一部の固定ページで一部の画像だけが伸びてしまったりするので原因が分かりません。
分かりやすく教えていただいて有難うございます！
見たところ、「<img style="border: 0px rgb(0, 0, 0); width: 350px; height: 350px; vertical-align: baseline; opacity: 1;" src="http://egfarm.sakura.ne.jp/egfarm.sakura.ne.jp/wp-content/uploads/2019/07/top01.png">」となっていました。
ど素人ですみません。
どうやら文章部分の文字数が多くなってテーブルの高さが大きくなると写真も引っ張られて縦長になるよううなのです。これは仕方ないことなのでしょうか。。。。
WordPressの場合使用しているテーマを記載した方が回答を得られやすいです。
また、CSSを使わずどうしてもHTMLだけで解決したいということでしょうか？
質問は編集できますので追記をお願いします。
回答3件
0
ベストアンサー
STINGERのバージョンがわかりませんでしたが無料版の最新STINGER PLUS+2で試しました。
テーマの方でimgにmax-width:100%;が記述されているため横方向が短くなり、画像の方に直接記述しているheight:350px;が効いているため縦方向はそのまま＝縦に長くなる状態になっていると思われます。
html
1<img style="border: 0px #000000; width: 350px; height: 350px; vertical-align: baseline;" src="画像URL" />
のheightを書き直すだけでも多分大丈夫です。
html
1<img style="border: 0px #000000; width: 350px; height: auto; vertical-align: baseline;" src="画像URL" />
投稿2019/08/01 05:22
総合スコア3235
これだと画像ごとにそれを書き込まなきゃいけないのがあれなんですよね。
CSSファイルをいじることが出来たら良いのですが。
であれば追加CSS（か、テーマのCSS）に
```css
.cp_table img {
height: auto !important;
}
```
でOKのはずです。yukikpさんの回答の通り。
「HTMLでやりたい」との記述と「大丈夫なものもある」という情報からとりあえず今回の画像について直るかどうか試してほしかったという意味での回答です。
.cp_table関係の記述がテーマ側で見つからなかったので提示されていない他のスタイルが干渉している可能性もあります。
heightを書き直す方法でうまくいきました！
ありがとうございましした。とても助かりました！
CSS頑張って勉強します。
0
細かい説明を省きますが、style.cssの一番最後に
css
1.cp_table td { 2 vertical-align: middle !important; 3} 4.cp_table img { 5 height: auto !important; 6}
と追記してみてください。
100点満点ではないですが、これで多少改善されるかと思います。
投稿2019/08/01 00:17
総合スコア797
回答有難うございます。
すみません、style.cssの一番最後に入れるというのが分かりません。
（wordpressの「外観」「テーマの編集」のstyle.cssのことでしょうか。）
HTMLでは入れられませんか？
子テーマになっていない場合テーマの更新で上書きされてしまう可能性があるので、CSSの追加はワードプレスのダッシュボード（管理画面）→外観→カスタマイズ→追加CSSに記載する方法の方がいいかもしれません。
有難うございます。
そこもやってみたのですが、「保存して公開」をクリックしても何の変化もないので、ここに入れるのは違うのかな・・と。
スタイルシートの書き方は､dit.さんのアドバイス通りじゃないですかね｡
まあ後で上書きされるかもしれませんが、とりあえず、
＞wordpressの「外観」「テーマの編集」のstyle.css
でいいと思いますよ。
0
スマホのピクセル数に応じて､条件を分岐させてやると､いいんじゃないですかね｡
投稿2019/07/31 05:30
総合スコア404
回答有難うございます。
すみません、素人すぎて「条件を分岐」という意味がよくわからないので詳しく教えて頂けたら嬉しいです。
こちらが読み間違えているのかもしれませんー｡
ご質問は「パソコンとスマホの表示を同じにしたい」ということでしょうか､それとも､
「スマホは､スマホなりのレイアウトにしたい」ということでしょうかー｡
いえ、説明がうまくできず申し訳ありません。
レスポンシブ対応のテーマ（STINGER)をインストールして使用しており、自動的にスマホ用のレイアウトになってくれるものだと思っていたのですが、固定ページの一部の画像だけが縦長に表示されてしまうので、これを解決したかったのです。
なので、スマホなりのレイアウトにしたいのです。
パソコン>タブレット>スマホの画面のピクセル数に合わせて､スタイルシートの内容を変えていく､という方法です｡メディアクエリでググってみてください｡ウェッブサイトに､上手に解説されていいたりしますー｡
あなたの回答
tips
プレビュー
