画像サイズが変更できません

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
画像のサイズが変更できません
ワードプレスの投稿にテキストでurlを載せて、cssで調整して、ファイルジーラで転送してみたのですが何も変わりません。
何が悪いのかわかりません。
お願いします
###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード
<img src="http://gakureki-zero.com/wp-content/uploads/2017/10/OKMSIIMGL0747_TP_V.jpg" alt="" width="1600" height="1116" class="aligncenter size-full wp-image-298" />

style/css

img.aligncenter {
width: 690px;
height: 400px;
}

ここにご自身が実行したソースコードを書いてください


###試したこと
上のコードが違うのでしょうか？


###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答2件

ベストアンサー

一度、ダッシュボードの投稿で記事を作り「メディアを追加」ボタンで動きを見てみると分かりやすいです。

<img src="http://gakureki-zero.com/wp-content/uploads/2017/10/OKMSIIMGL0747_TP_V.jpg" alt="" width="1600" height="1116" class="aligncenter size-full wp-image-298" />

class="aligncenter size-full wp-image-298"が表すのは、それぞれメディアライブラリで画像を選択すると右のほうに表示される添付ファイルの表示設定（下記画像参照）によるものをwordpressが生成してくれるものです。

aligncenter　→　配置・中央
size-full　→　アップロードした画像のサイズで表示
wp-image-298　→　画像の識別番号（通し番号？）

なので、aligncenterにサイズを指定してしまうと表示設定が中央配置にしている画像全てにかかってしまうためここで指定するのはよろしくない感じです。

サイズの変更は、下記画像の「画像を編集」の部分で画像そのものを小さく編集し直すことでも可能です。
もしくは

<img src="http://gakureki-zero.com/wp-content/uploads/2017/10/OKMSIIMGL0747_TP_V.jpg" alt="" width="690" height="400" class="aligncenter wp-image-298" />

imgタグの中のwidthとheightを上記のように書き換えてもいいかなと。
その場合、アップロードした画像の元のサイズとは違うサイズで表示していることになるので「size-full」は削除した方がいいかと思います。

投稿2017/10/19 08:05

編集2017/10/19 15:52

narui

総合スコア62

metayan

2017/10/19 17:22

コードをそのままコピペしてやってみましたが、本当に何も変わりません。なにが違うかわかりました

metayan

2017/10/20 17:05

自分で解決できました。ですが勉強になりました。ありがとうございます

行動規範の内容に同意します

特に問題はないと思いますが、キャッシュの消去をしてみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        img.aligncenter {
8            width: 100px;
9            height: 100px;
10        }
11    </style>
12</head>
13<body>
14<img src="http://gakureki-zero.com/wp-content/uploads/2017/10/OKMSIIMGL0747_TP_V.jpg" alt="" width="1600" height="1116"
15     class="aligncenter size-full wp-image-298"/>
16</body>
17</html>