karenさん

スマホからなもので、確認が難しいのですが。

2箇所以下のようにあり、大きさを固定なさっているように思います。

width: 1024px;
height: 341px;

前略、karenさん

以下のコードだけでもイケそうな気がします。

.image_mouseover_2 a:hover {
  opacity: 0.6;
  transition: .3s;
}

あと、画像の右側の部分の文字列は画像に含めず、例えば、カラムブロックの２カラムなどを使うという方法もあるような気もします。（左に画像で右は文字）

karenさん

ちょっと投稿中に修正しました。

フォーラムを再読み込みしてください。

@mk2_mk2 

mk 2様

コメントありがとうございます。

こちら、固定ページの画像サイズを変えても小さく画質の荒いままになってしまい、CSSの数値を変えたところ綺麗に大きくなってくれたのです…

@leafytree 

リフィトリー様

情報をありがとうございます。

フォーラムを再読み込みとはどういったことでしょうか？

@karen さん

「フォーラムを再読み込みとはどういったことでしょうか？」こちらは一旦書き込んでからコードを少し修正したので、ブラウザで再読み込みしてください、ということでした。

投稿者:: @karen

こちら、固定ページの画像サイズを変えても小さく画質の荒いままになってしまい、CSSの数値を変えたところ綺麗に大きくなってくれたのです…

スマートフォンの表示に対応させるには、いわゆるレスポンシブ表示になっていないとうまく表示されません。

画像のimgタグや画像を囲っているコンテナ（外側の入れ物）の横幅と縦幅を固定してしまうと、小さな画面で見たときに、画面からはみ出してしまいます。mk2さんがおっしゃっているのはそのことです。画像や画像のコンテナのサイズを固定してしまったら、小さな画面でははみ出してしまうのは、当然のことでしょう、という意味です。

一度、ご自身でお書きになったCSSのコードは、どこかにバックアップしておき、一旦消して、以下のコードを設定してみてください。

.image_mouseover_2 a:hover {
  opacity: 0.6;
  transition: .3s;
}

@karen さん

ローカルのテストサイトで、カラムブロックの50：50で試してみました。

１）カラムブロックを50：50で設定

２）カラムブロックの左側には画像ブロックを設定して中央寄せに。

３）カラムブロックの右側には段落ブロックを設定して文字を中央寄せに。

簡単に試しただけなので、大雑把なものですが、ヒントにはなるかと・・

※画像右側の文字のあった部分はトリミングして画像左側のみにしています。

リフィトリーさんが詳しくご説明くださいましたし、対策もご提示くださっていますし、私からは・・・ですが。

リフィトリーさんの動画が分かりやすいと思います。

ちなみに現状は、大きさを固定していますので、以下のように画面幅（ブラウザの幅）が小さくなっても、画像の大きさが変わらない状態です。

@leafytree 

リフィトリー様

ありがとうございます。

CSSを教えていただいたものに書き換えたら、スマホのほうもサイズが丁度よくなりました！

ただ、ここにリンクが貼ってありますよ～と分かるようにするにはどうしたらいいのでしょうか。

２カラムも以前試してみたのですが、やはりスマホで見ると崩れてしまい、画像と右側の文章まとめて一つにURLを貼るのが理想なのです。

@mk2_mk2 

ｍｋ　２様

ありがとうございます！

画像サイズ固定について、ようやく理解できました。

@karen さん

パソコンではマウスポインタを画像に乗せると、画像が淡く表示されるので、リンクがあるのかな？と理解しやすいですが、スマホでは、ボタンのようなものを設定しないと、リンクなのかわかりにくいかもしれませんね。

私にもすぐに妙案は浮かびません。

ご自身で、いろいろ試してみてください。

@leafytree 

リフィトリー様

やはりそうですよね

ありがとうございます！

ちなみに、最後にお聞きしたいのですが、先ほどのCSSを書き換えたところ、ホバー効果がなくなってしまったのですが、HTMLの書き換えなどはどうしたらいいのでしょうか。

ワードプレス初心者で、無知ですみません…

@karen さん

投稿者:: @karen

ちなみに、最後にお聞きしたいのですが、先ほどのCSSを書き換えたところ、ホバー効果がなくなってしまったのですが、HTMLの書き換えなどはどうしたらいいのでしょうか。

「ホバー効果」というのはマウスポインタを画像の上に乗せると画像が半調で表示される、というものでしょうか？だとしますと私の環境では、効果があるようです。

@leafytree 

リフィトリー様

私のほうでその効果がなく、完全になくなってしまったのかと思いました…

ありがとうございます！

とても勉強になりました！

@karen さん

どうもGoogle Chromeでは、効果が見られないみたいですね。

ちょっと、調査中です。

@karen さん

失礼しました。

コードの書き方を間違えていたようです。

.image_mouseover_2 a:hover img {
  opacity: 0.6;
  transition: .3s;
}

とするか、もしくは、

.image_mouseover_2 img:hover {
  opacity: 0.6;
  transition: .3s;
}

と、修正いただくとイケるかと思います。

@leafytree 

リフィトリー様

ありがとうございます！

１つ目のコードでできました！