1439429369 はてなブログにて。スマホ表示だと画像が小さくなる。※Firefox除く


以下の記事だけ起こります。
http://richardkoshimizu.hateblo.jp/entry/20150803/1438599762

直し方を教えてください。よろしくお願い致します。

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2015/08/13 10:29:29
  • 終了:2015/08/17 05:45:48

ベストアンサー

id:a-kuma3 No.3

a-kuma3回答回数4502ベストアンサー獲得回数18692015/08/16 16:05:47

ポイント150pt

自分のはてなブログで試してみました。
http://a-kuma3.hatenablog.com/entry/2015/08/16/145824


画像が小さくなるのは、テーマの CSS にある以下の設定が効いているからのようです。

.entry-content img {
    max-width: 100%;
}

TABLE の TD が中に書かれている文字などで幅が自動で決められ、その TD の横幅を 100% となるように画像の幅が決められている、という感じです。


この指定を無効にするには、max-width に none を設定することで可能です。

ひとつの方法は、デザインCSS で以下の設定を追加してあげることです。

.entry-content img {
    max-width: none;    /* none にする */
}

ただ、この書き方では記事内の画像たいしてすべて効いてしまうので、この指定のおかげで画面の幅に収まっている画像が、今度は はみ出してしまう、ということになりかねません。

記事の方も多少変更しなくちゃいけませんけど、少し有効な範囲を狭くしておいた方が良いような気がします。
例えば、レイアウトに使っている TABLE にクラスの指定をして、その中にある画像だけ max-width を無効にするとか。
記事の方をこういうふうにして、

<table class="other_article_layout" ...>	<!-- class を追加 -->
    ...

デザイン CSS には、次のような指定を追加します。

.entry-content table.other_article_layout img {
    max-width: none;
}

こうすることで、other_article_layout という class を指定した画像だけ、IMG タグに指定したサイズを優先して使うようにできます。

他1件のコメントを見る
id:a-kuma3

デザインCSSに入れてみたのですが、相変わらずスマホ表示だと小さい画像のままでした。

スマホのブラウザだと、IMG を抱えている TABLE の TD の属性で、左側の幅が 5%、右側の幅が 95% を指定してる方が勝っちゃうんですね、きっと。
この幅の指定を取り除くと IMG に指定したサイズのままで表示されるように思います。

2015/08/17 09:22:33
id:uneki2012

a-kuma3さん、たびたび回答ありがとうございます。
なぜか以下のタグをヘッダに入れたら、解決しました。※最初のやつです。
http://iphone.f-tools.net/html5/Width-Smart-Phone.html#NO2

ついにブログ移転完成しました!

2015/08/18 12:39:06

その他の回答(2件)

id:aossra2 No.1

ERRY回答回数20ベストアンサー獲得回数22015/08/14 17:26:01

ポイント40pt

表示の設定をスマホ版からPC版にしたらどうでしょうか
ブラウザの設定から変えれると思います

id:uneki2012

言葉足らずですみません。Web製作での話しなんです。

2015/08/17 05:43:15
id:schwnnn No.2

schwnnn回答回数84ベストアンサー獲得回数62015/08/14 21:08:37

ポイント20pt

スマホ・ブラウザのバグだと思います。

id:uneki2012

Firefox以外のブラウザで起きてるのですが、バグでしょうか?

2015/08/17 05:44:19
id:a-kuma3 No.3

a-kuma3回答回数4502ベストアンサー獲得回数18692015/08/16 16:05:47ここでベストアンサー

ポイント150pt

自分のはてなブログで試してみました。
http://a-kuma3.hatenablog.com/entry/2015/08/16/145824


画像が小さくなるのは、テーマの CSS にある以下の設定が効いているからのようです。

.entry-content img {
    max-width: 100%;
}

TABLE の TD が中に書かれている文字などで幅が自動で決められ、その TD の横幅を 100% となるように画像の幅が決められている、という感じです。


この指定を無効にするには、max-width に none を設定することで可能です。

ひとつの方法は、デザインCSS で以下の設定を追加してあげることです。

.entry-content img {
    max-width: none;    /* none にする */
}

ただ、この書き方では記事内の画像たいしてすべて効いてしまうので、この指定のおかげで画面の幅に収まっている画像が、今度は はみ出してしまう、ということになりかねません。

記事の方も多少変更しなくちゃいけませんけど、少し有効な範囲を狭くしておいた方が良いような気がします。
例えば、レイアウトに使っている TABLE にクラスの指定をして、その中にある画像だけ max-width を無効にするとか。
記事の方をこういうふうにして、

<table class="other_article_layout" ...>	<!-- class を追加 -->
    ...

デザイン CSS には、次のような指定を追加します。

.entry-content table.other_article_layout img {
    max-width: none;
}

こうすることで、other_article_layout という class を指定した画像だけ、IMG タグに指定したサイズを優先して使うようにできます。

他1件のコメントを見る
id:a-kuma3

デザインCSSに入れてみたのですが、相変わらずスマホ表示だと小さい画像のままでした。

スマホのブラウザだと、IMG を抱えている TABLE の TD の属性で、左側の幅が 5%、右側の幅が 95% を指定してる方が勝っちゃうんですね、きっと。
この幅の指定を取り除くと IMG に指定したサイズのままで表示されるように思います。

2015/08/17 09:22:33
id:uneki2012

a-kuma3さん、たびたび回答ありがとうございます。
なぜか以下のタグをヘッダに入れたら、解決しました。※最初のやつです。
http://iphone.f-tools.net/html5/Width-Smart-Phone.html#NO2

ついにブログ移転完成しました!

2015/08/18 12:39:06

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません