画像の大きさが変わらない

Question

<img src="http://gakureki-zero.com/wp-content/uploads/2017/10/OKMSIIMGL0747_TP_V.jpg" alt="" width="690" height="400" class="aligncenter wp-image-356" id="jondo"/> これをcssで調整してみました。 img.jondo { width: 690px; heigth: 400px; } 何も変わりませんでした。アドバイスをもらいやってみたのですが、無理です。何がダメなのかわかりますか？

Comments

[think49]

マルチポストですね。ヘルプを参照して下さい。https://teratail.com/help#posted-otherservice

[dit.]

https://teratail.com/questions/96749 と同じような内容ですね（他のサイトにもマルチしてるのかな）。あちらが「サイズが変わらない」こちらが「他の画像には適用したくない」ならまぁ、別質問とも取れますが…。また、質問は編集することができますので、HTMLやCSSの部分を選択し、codeボタンを押してそれぞれコードブロックにしてください。

[taktaktak]

これも読んでください。　教えてクン養成マニュアル　http://www.redout.net/data/osietekun.html

Answer 1

cssの方が「heith」とスペルミスが起きているようです。
img.aligncenterと指定しているため、同じCSSクラスが指定されているimgに対して全て影響があります。
そもそもクラス名「aligncenter」から「中央寄せにする」という意味合いがあるように思いますので、
元々、text-align:center;のような指定がしてあるものと思います。
そこにサイズ情報を入れると意味合いが変わってくるのでaligncenterに指定するのは良くないと思います。
imgタグに直接width,heightの指定があるとそちらもいきてくるため、可能であれば削除しましょう。

指定したい画像に対してだけのものであれば下記のようにID指定とすると良いでしょう。
※hogehogeは任意の名称です。自身で適当な名前をつけてあげてください。

img#hogehoge{
width: 690px;
height:  400px;
}

<img src="http://gakureki-zero.com/wp-content/uploads/2017/10/logo_twitter_withbird_1000_allblue.png" alt=""  class="aligncenter size-full wp-image-328" id="hogehoge"/>

ただ、「size-full」「wp-image-328」というCSSクラスにも画像サイズに関する指定がしてあるものと思われますので、
これだけでは自身の指定がそのまま反映されるとは限りません。
ブラウザの開発ツールなどでどのような指定があるのか確認し、
調整すると良いです。

• 超時短！ブラウザ上でCSSの編集がサクサクできる開発ツールの基本的な使い方

Comments

[metayan]

何も変わりませんでした。コードもコピペしてやってみたのですが、何もかわりませんでした。どうすればいいかわかりません

[m.ts10806]

回答最後まできちんと読まれてますかね。
コピペでやったにしては「heigth」とスペルミスがあります。
私も本文中にタイポしてしまってますが（修正しておきます）、提示したCSSは合ってます。
metayanさんが変更された質問本文は間違ってますよ。コピペしたわけではなく見ながら打ったんでしょうか。
IDの指定は「.」ではなく「#」ですよ。
metayanさんの指定だとimg.jondoではなくimg#jondoです。

「どうすればいいか分かりません」だけではいつまでたっても身につきませんよ。
回答者側は質問者の真横について教えてあげられるわけではないんです。
あくまでヒントに、色々やってみてください。
私の回答には幾つかの懸念点を並べています。それも全てやってみましたか？

まず1つ
> imgタグに直接width,heightの指定があるとそちらもいきてくるため、可能であれば削除しましょう。

2つ目
> ただ、「size-full」「wp-image-328」というCSSクラスにも画像サイズに関する指定がしてあるものと思われますので、
> これだけでは自身の指定がそのまま反映されるとは限りません。

そしてブラウザの調整の方法
> ブラウザの開発ツールなどでどのような指定があるのか確認し、調整すると良いです。

これらをヒントに、自身で色々やってみてください。
全てやってみて、それでも上手くいかないのであれば、やってみたことをきちんと教えてください。
ブラウザの開発ツールによる調整をしたあとに対応するのが確実です。

CSSは何が影響しているかわかりません。CMSやフレームワークやプラグインを使われているのであればそれも影響している可能性大です。
何が影響しているかわからないので、上記すべて試してもダメであれば環境情報をなるべくすべて提示してください（ブラウザ開発ツール上の調整は確実なものなのでこれでうまくいかないのであればやり方が間違っているか足りないかのどちらかだと思いますが・・）

[m.ts10806]

また、追記修正依頼に幾つか指摘されていますがそちらも読まれましたか？
teratailを利用するために大事なことなのでそちらも対応お願いしますね。

[metayan]

もちろんすべて読んだ上で行っていますよ。スペルミスもなく確認したうえでやっているのです。ですが出来なかったのです。かなりの初心者なので応用もよくわからない状態です。
ですが、とあることに気づきやってみたらできました。上記に書いてあることではなかったです。

1　IDの指定は「.」ではなく「#」ですよ。

これも違っていました
IDを指定しなくてもできました。むしろこの言葉に惑わされました。
IDの問題ではなかったようです

2 imgタグに直接width,heightの指定があるとそちらもいきてくるため、可能であれば削除しましょう。

これも違っていました。
width,heightも異なる数字で指定していても、できるようです

mts10806さんのアドバイスも知識として役立ちましたが、結局自分で解決できました。

どうやら別のやり方でもできるようです。
知識不足ですよ
正しいアドバイスをお願いしますね

実際に指摘されていること以外でちゃんと出来たのですから。

[m.ts10806]

回答通りやっていない上に他のやり方で出来たから間違っているとまで指摘するのは大きな間違いで、かなり横暴な進め方です。
回答は解決につながるヒントになれば、、という思いで回答していますが、
ソースが必要な回答する際はほとんどが自身で検証した上で出しています（今回も検証済み）

それにこのこと自身は応用でもなんでもなく基本です。
IDに対して指定する場合は CSSでつけた名称の頭に#をつけるのも基本、
CSSを指定する場合に直で同様の効果がある指定をしないのも基本です。
基本であることを指摘しているため間違いでも知識不足でもありません。

失礼を承知で申し上げますが、私の回答もCSSの基本,HTMLの基本、
もっと言えばWordpressの基本も理解しないまま進めようとしていませんか？（他の回答とCSSクラス名からWordpressのものであると予想）
私の回答を正しく理解していないのは編集された質問のソースを見れば明らかですし、基本を理解していないのは明らかです。（そもそもコピペしてませんし）
他の質問のやり取りを見ていてもそのあたりが見受けられます。

どのようなやり方で対応したか存じ上げませんが、本当に基本と本質を理解して解決に至ったのかが心配になるレベルです。

[m.ts10806]

ひとまず解決できたのであれば良かったです。同じような質問が繰り返されないように祈っています（既にマルチポストのような形になっているので推奨されない状態です）
私の回答の形ではなく別の方法で解決できたのであれば、自身で回答を投稿し、自己解決としてはいかがでしょうか。
このteratailというサイトは質問者以外にも同様の問題で悩んでいる方への解決の糸口となるように自己解決でも質問者自身で回答してその回答をベストアンサーとすることが推奨されています。

下記を参考にしてください。
https://teratail.com/help#resolve-myself
https://teratail.com/help/question-tips#questionTips4-2

[taktaktak]

放っておこうと思いましたが、あまりにも目に余るのでコメントします。

「mts10806」さんの指摘は全部正しいですよ。「知識不足」は質問者さんの方です。
初心者どうこうの話ではく、思い込みが激しく素直に人の指摘を聞けない姿勢が問題です。

まず、「超」基本部分から学習してください。
このままでサイト構築してもメンテ不能のぐちゃぐちゃなコードになりますよ。

[metayan]

mts10806さん、失礼しました。
反省します。
せっかくのアドバイスを踏みにじってしまって。
基本を勉強したいのですが、なにをすればいいかわからない状態です。
まずコード入力の基本も勉強したいです。
html.cssの基本は勉強したのですが、途中にエラーが出て先に進めず、なぜそうなるのかわからず挫折。
wordpressも同様エラーがでて挫折。
本など、書いてある通りにやっているのにエラーが出てしまいわからずじまい。
コード入力に問題があると思われます。
そのことについても探したのですが、見つけられずです
コード入力,html,css,wordpressの基本について何かお勧めの本、もしくはサイトがあれば教えてほしいです。
このサイトの使い方もあまりよくわかってない状態なので、よく目を通しておきます。
今回はとても失礼しました。
深く反省しています。

[m.ts10806]

エラーが出ているのでしたらまずは落ち着いてエラーメッセージが何を言いたいのか調べましょう。エラーは基本はプログラムやシステムが意図的に出力しているものが多いです。
データやサイトが壊れたということは殆どありません。
エラーが英語で出ているのであればGoogle翻訳で日本語訳にしてみるとある程度意味が見えてくるはずです。またはエラーメッセージそのままGoogle検索にかけると必ず同じようなエラーで悩んでいる人がやってみたことが出るはずです。
もちろん100％一致するとは限りませんが、何かしら解決のヒントにはなるはずです。
ただ、いろいろやってみる前にファイルやデータのバックアップは必ずとっておくようにしてください。最初の内はいろいろやろうとしすぎて余計にグチャグチャになってしまうことがよくあります。
元の状態にいつでも戻せるようにバックアップは必ずとってから手を入れるようにしてください。
それでもうまくいかなければ、「やりたいこと」「起きていること(エラー内容)」「やってみたこと」「調べてみたこと」を
まとめてみてこのサイトで質問する、といった形です。
「やってみたこと」「調べてみたこと」をきちんと記載することで回答者側はその方法を避けて
より適切な方法を的確に模索することができて、解決が早くなります。
そして質問者側が「思い込み」で気づかなかったことに気づけるような回答も気づけるようになります。
結構そういう質問者も多いですよ。自分がこうだと思ったら「それはありえない」と頑固な方が・・・。

HTML,CSSの基本についてはそもそもどのように学んでこられたかというところがひとつ気になります。
もしかしたらその学んだ方法自体は間違いがなくて「きちんと吸収できていない」だけかもしれません。
サイトや教本を提示することは簡単ですが、内容をきちんと吸収して自分で思ったような結果を
出せないのであれば意味がありません。
まずは自分が何をやってきたかを具体的にご提示ください。