幅のせまいスマホから見ると、枠から画像や文字がはみ出す。対処ページを探しコードをコピペするため検索検索検索。検索と確認をくりかえし時間を費やすより、それぞれ状況が違うから、原因を突き止めてから検索するほうが早いときもあります。
- 不具合を調べるとき、知ってる人はどこを見てるか
知りたいと思いませんか？
ちなみに画像や文字が はみ出す原因の解決法は、親要素より、子要素の幅が大きいときの対処。max-width:100%だけ内側余白とボーダー分がはみ出すとき。文字が改行されず、はみ出し横揺れするときの対処で書いてます。
- それでも、親要素からはみ出すとき。
親のスタイルが原因で、子要素の画像や文字が枠から はみだします。その様子と原因の調べ方、解決するまでの工程を書くので、これから先CSSでカスタマイズして同じようなことが起こったとき、原因を探すのに役に立つので見ていきましょう＾＾
画面の横幅の狭いスマホで画像・文字がはみ出す原因
テーマを変更して、旧テーマで使っていたカスタマイズを持ってきたら、親要素からハミ出してました。画像の説明をブログ上に表示するキャプション文字と画像が、下記画像の黄色の親要素の枠から飛び出して、ブサイクになってます。
画像とキャプションを囲う親要素からはみ出してる
親要素（ピンク色部分）からはみ出した例
原因のヒントが見つかる工程・調べかたを順に書きますね。
スタイルCSSがおかしくなっている原因をHTMLで調べる
CSSを確認するには、はみ出した画像と、それを囲っている（親要素の）タグを見てどのスタイルが影響しているか見るために、HTMLを確認します。
- HTMLはブログの骨組みで装飾するときの目印となるタグを付け、それを指定して装飾するのがCSS。
- HTMLタグを見て、そのタグで囲まれた要素（テキストや画像など）をCSSで指定し装飾してるから。
何言ってるか分かんない。って思うなら、初級の下記リンクを参考にどうぞ❦
以降ゆっくり見てくださいね。
はみ出した要素（画像・文字）を囲っているHTMLタグを見る
ブログではみ出した箇所。リスト内のキャプション付き画像
この場合、リストulタグの中のliタグ内のdivで囲った親要素からはみ出した画像と文字であるキャプションを入れたときの状態です。
ザックリしまくったHTMLは下記のとおり。スぺースで階層を作ったのは、要素を囲んだ範囲を示してます。
<ul>
<li>テキスト
<div （画像とキャプションを囲った親要素）>
<img （divはみ出した画像） >
<p>キャプション</p>
</div>
</li>
</ul>
ピンク色がはみ出した要素。それ（画像とキャプション）を囲った親要素からはみ出たものを直したいけど、冒頭でいった3つ（width:100%など）がキチンと効いてる状態です。
この場合ほかに原因があるから、divを囲んだ親要素である、番号なしリストliを確認していきます。
親のスタイルは子要素まで継承するものがあるので、親のスタイルを順番に確認して、左に寄って はみ出している原因を探します。
- タグで囲っているのが親要素
- タグで囲まれているのが子要素
- はみ出た要素を囲んでないものは親要素ではないから関係ない
この意味がわからないとき、下記をどうぞ。
HTMLを見るにはPCで要素の検証画面を使うと便利
HTMLを見るのに、ブログの投稿画面にあるビジュアルやテキスト（HTML）で確認、さらにはHTMLを書いてるテーマファイルまで確認して見るのは面倒だから、PCの要素の検証が便利です。
ブログで はみ出た画面を開いて、Ctrlキー＋Shiftキー＋Cキーで検証画面を開きます。チェックマークが青になってる状態で、画像をクリック。
矢印マークが青状態で画像をクリック
右側や下側や別画面に要素の検証が出ている場合も同じです。次にElementを確認してHTMLの部分を少し上へスクロールしたら、親要素が見えてきます。
imgタグの親要素・関係ない要素
はみ出した画像の親要素は、HTMLタグで囲まれているかどうかで判断できますよ。
imgタグを囲っている親要素
親であるdivをクリックして調べて、そのまた親であるliタグをクリックして調べる。こうしてHTMLタグを装飾しているスタイルを確認していきます。
親要素から継承されたスタイルを確認し原因をしらべる
要素の検証で右側のElementにある親要素リストのHTMLタグか、ブログのリストのテキストをクリックしたらそのスタイルを確認してください。
パッと見て、左にズレてる原因が分からないとき、CSSを消していけば原因が分かりますよ。 margin: 0.8em 0;の隣にチェックがあるのでクリックしたら、その装飾が消えてズレが戻らなければ、チェックを元に戻す。
text-indentの右側にチェックが入っているので、チェックを外すと収まります。チェックを付けるとはみ出す・・・左にズレる原因発見❦
.entry-content ul li {
text-indent: -1.4em;
}
ズレた原因はtext-indentを指定してたから。その意味が分からなければ、ココで検索すれば分かります。
text-indentプロパティは、文章の段落などの一行目のインデント幅を指定する際に使用します。インデントには負の値を指定することもできます。
段落の始まりにスペースを確保したいとき使うスタイルねっ！と解ったら、この指定をなかった事にする（初期化）か、調整するかしないといけません。
スタイル横にあるチェックマークで、装飾を消したり付けたりすれば、CSSが分からなくても遊び感覚で原因が分かりますよっ＾＾
要素の検証は、初心者のカスタマイズに最適なので、その他使いかたは下記をどうぞ。
原因であるtext-indentの対処、CSSでスタイルを指定
左にズラしているのがtext-indentが原因だと分かったら、CSSでスタイルを追加してあげます。
段落のはじめを揃える装飾text-indentが-1.4文字ズラしているのは、リスト前にあるWebFont（チェックマーク）の装飾でリストの文字分左へ移動させてるからです。
テキストインデントあり
この記載を初期化するには、リストをtext-indent: 0;にすればキレいにハマります。でも全ての番号なしリストが下記のように回り込むスタイルになって影響がでるので、リストにtext-indent: 0;は使いません。
テキストインデントなし
番号なしリストul liの中にある画像とキャプションを指定して、左の外側1.4em（1.4文字）ズラして元に戻せば、親要素にはまるので、margin-left: 1.4em;などで調整します。
/* ul li の中のズレ解消 */
.entry-content ul li .wp-caption img,
ul li .wp-caption-text {
margin-left: 1.4em;
}
- 2行目の指定
- Simplicity2の記事を指定している親要素
.entry-contentの番号なしulのリストli内にあるキャプション.wp-caption内画像imgを指定
- Simplicity2の記事を指定している親要素
- 3行目の指定
ulのリストli内にあるキャプションテキスト.wp-caption-textを指定
- 4行目の装飾
- 外側余白の左側を1.4文字（右へ）移動
ザックリしたHTMLは下記
<div class=”entry-content”>
<ul>
<li>リスト内テキスト
<div class=”wp-caption”>
<img>
<p class=”wp-caption-text”>キャプション</p>
</div><!– /.wp-caption –>
</li>
</ul>
</div><!– /.entry-content –>
さいごに
リストの装飾text-indentが子要素にも継承されて、画像とテキストが左へズレてしまった例です。対応させるには、リスト内の画像とテキストを指定し、margin-leftなどスタイルを書けば、ズレの修正が可能です。
ただリストに限らず子要素入れるもの、全てこのように編集が必要になるスタイルtext-indentは使っちゃダメですね。
毎回面倒だから・・・＞＜
リストの子要素に画像やリスト入れ子にしても修正しなくて良い、番号なしリストを装飾するカスタマイズを公開します。
それでは、かうたっくでした。
Comments