人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

1439429369
●拡大する

●質問者: uneki2012
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● ERRY
●40ポイント

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


uneki2012さんのコメント
言葉足らずですみません。Web製作での話しなんです。

2 ● schwnnn
●20ポイント

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


uneki2012さんのコメント
Firefox以外のブラウザで起きてるのですが、バグでしょうか?

3 ● a-kuma3
●150ポイント ベストアンサー

自分のはてなブログで試してみました。
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 タグに指定したサイズを優先して使うようにできます。


uneki2012さんのコメント
a-kuma3さん、回答ありがとうございます。 デザインCSSに入れてみたのですが、相変わらずスマホ表示だと小さい画像のままでした。 ですが、PC表示でも画像が縦長だったんですが、それはこのタグのお陰で直りました。 やはり難しいようで、直すのは諦めます。

a-kuma3さんのコメント
>> デザインCSSに入れてみたのですが、相変わらずスマホ表示だと小さい画像のままでした。 << スマホのブラウザだと、IMG を抱えている TABLE の TD の属性で、左側の幅が 5%、右側の幅が 95% を指定してる方が勝っちゃうんですね、きっと。 この幅の指定を取り除くと IMG に指定したサイズのままで表示されるように思います。

uneki2012さんのコメント
a-kuma3さん、たびたび回答ありがとうございます。 なぜか以下のタグをヘッダに入れたら、解決しました。※最初のやつです。 http://iphone.f-tools.net/html5/Width-Smart-Phone.html#NO2 ついにブログ移転完成しました!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ