スマホ版でレイアウトが崩れてしまいます(横に伸びる)
はじめての質問です。よろしくお願いいたします。
昨夜気づいたのですが、スマホでブログを見るとレイアウトが崩れてしまっていました。(画像のように横幅が伸びてしまいます)
以前リンクのURLで横に伸びてしまう現象は、スタイルシートに
word-wrap:break-word;
を入れることで解決したのですが、今回はFC2側で挿入しているPR文の影響ではみ出してしまっているようで直し方がわかりま せん。
いろいろな部分に上記の記述をしてみたのですが直りませんでした。
HTMLの知識はなく見よう見まねでやっている初心者です。
お詳しい方がいらっしゃいましたら、ご教示願います。
よろしくお願いいたします。
(ちなみに私が見る限り、私のブログだけでなくFC2ブログ全体でこの現象が見られるようです)
2015年09月04日 09:58 by 管理人ケダマ
vanillaice (Akira)さま
お忙しい中ご親切にありがとうございました。
情報が不足していてすみません。
はみ出しているリンクのアドレスはこのようなものでした。
http://spsvc3.i-mobile.co.jp/ad_link.ashx?pid=421&asid= 336844&advid=2194896&ctid=67&vh=075a58c4f84cee6a 5c3ad706da134623
教えていただいた方法を全て試してみたところ、
はみ出しがなぜか小さくなったときもあったのですが完全には解決せず、
教えていただいただいたものの組み合わせで
* {
overflow: hidden;
}
こう記述したらはみ出しがなくなりました!
しかし、これは規則に接触するかもしれないということで慎重に考えなければいけませんね…。
vanillaiceさまからはこの広告が見えなかったということで、
ブラウザにもよるのでしょうか…。
私はiPod touchのsafariで見ています。
1人で悩んでいてとても困っていたのですが、
コメントいただけてとても気持ちが楽になりました。
本当にありがとうございました!
-----------------
ありがとうございます!
初心者でわからなかったのですが、『解決済み』に変更させていただきます。
スマホ版の広告は明らかに誤クリック(タッチ?)を狙っているものばかりで嫌になってしまいますね^^;
私の場合無料で使わせてもらっているので文句はあまり言えないのですが…。
vanillaiceさま、本当にありがとうございました!
2015年09月06日 09:14 by 管理人ケダマ
word-break: break-all;
を指定すれば折り返しの禁則が外されます。
word-wrap: break-word; との違いは、英単語の途中だろうと関係なく改行処理されるのが break- allです。
例)
I am Japanese.
[break-word]
I am
Japanese.
[break-all]
I am Jap
anese.
FC2のアドに共通のクラス名あるいはID名が拾えればそれにダイレクトに指定できますが、
クラス・ID共に不明 あるいは付いていない場合には全指定することになります。
* {
ここに記述
}
これはおすすめできませんけどね (´・ω・`)
まずは body に word-wrap: break-word; を指定。
それでダメなら最後の手段で word-break: break-all;
あるいはbodyに overflow: hidden; (おすすめしません。FC2規則に抵触する…かも?)
ご指摘のはみ出しアドを確認できれば答えが出るのですが、私の方から確認できません。
その広告が出てきません(笑)
-------------
一応解決、ということでしょうかね。
お疲れさまでした
ちょっとアレですね。
広告掲載については文句ありませんが、もう少し考えてほしい(笑)
スマホ版非表示・レスポンシブでスマホからテキスト入力するとき広告が上に上がってくるとか(ブラウザ依存ではありますが…) 。
スマホなんて入力キー出てきたら画面半分になっちゃうのに。
辛いです。
運営さん。なんとかしてくださいよぅ (´・ω・`)
2015年09月06日 01:15 by vanillaice (Akira)
Copyright(c)1999 FC2, Inc. All Rights Reserved.
@fc2infoさんをフォロー