a{height:48px;width:48px}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}.em1{padding-left:1em}.em2{padding-left:2em}.em3{padding-left:3em}.em4{padding-left:4em}#search-menu-input:checked~#search-menu-content{-webkit-transform:translateY(20%);transform:translateY(20%)}.search-menu-content{padding-top:40px}WordPress初心者がブログ運営する上で必要なバックアップ方法。CSS・HTMLの基礎がわかるステップを丁寧に説明。コピー2017.01.11幅のせまいスマホから見ると、枠から画像や文字がはみ出す。確認をくりかえし時間を費やすより、それぞれ状況が違うから、原因を突き止めてから検索するほうが早いときもあります。はみ出す原因の解決法は、親要素より、子要素の幅が大きいときの対処。max-width:100%だけ内側余白とボーダー分がはみ出すとき。文字が改行されず、はみ出し横揺れするときの対処で書いてます。それでも、親要素からはみ出すとき。親要素から継承されたスタイルを確認し原因をしらべる原因であるtext-indentの対処、CSSでスタイルを指定さいごに画面の横幅の狭いスマホで画像・文字がはみ出す原因テーマを変更して、旧テーマで使っていたカスタマイズを持ってきたら、親要素からハミ出してました。画像の説明をブログ上に表示するキャプション文字と画像が、下記画像の黄色の親要素の枠から飛び出して、ブサイクになってます。原因のヒントが見つかる工程・調べかたを順に書きますね。スタイルCSSがおかしくなっている原因をHTMLで調べるCSSを確認するには、はみ出した画像と、それを囲っている(親要素の)タグを見てどのスタイルが影響しているか見るために、HTMLを確認します。HTMLはブログの骨組みで装飾するときの目印となるタグを付け、それを指定して装飾するのがCSS。HTMLタグを見て、そのタグで囲まれた要素(テキストや画像など)をCSSで指定し装飾してるから。何言ってるか分かんない。思うなら、初級の下記リンクを参考にどうぞ❦LINK初心者向け、HTMLの入門編!HTMLタグとCSSのセレクタの関係&要素とは?以降ゆっくり見てくださいね。はみ出した要素(画像・文字)を囲っているHTMLタグを見るブログではみ出した箇所。リスト内のキャプション付き画像この場合、リストulタグの中のliタグ内のdivで囲った親要素からはみ出した画像と文字であるキャプションを入れたときの状態です。しまくったHTMLは下記のとおり。スぺースで階層を作ったのは、要素を囲んだ範囲を示してます。><p>キャプション</p></div></li></ul>ピンク色がはみ出した要素。それ(画像とキャプション)を囲った親要素からはみ出たものを直したいけど、冒頭でいった3つ(width:100%など)がキチンと効いてる状態です。この場合ほかに原因があるから、divを囲んだ親要素である、番号なしリストliを確認していきます。はみ出している原因を探します。タグで囲っているのが親要素タグで囲まれているのが子要素はみ出た要素を囲んでないものは親要素ではないから関係ないこの意味がわからないとき、下記をどうぞ。LINK基本CSSのセレクタの指定★親子孫要素を知れば装飾が反映するよ!ブログ構造HTMLを見て理解HTMLを見るにはPCで要素の検証画面を使うと便利HTMLを見るのに、ブログの投稿画面にあるビジュアルやテキスト(HTML)で確認、さらにはHTMLを書いてるテーマファイルまで確認して見るのは面倒だから、PCの要素の検証が便利です。はみ出た画面を開いて、Ctrlキー+Shiftキー+Cキーで検証画面を開きます。チェックマークが青になってる状態で、画像をクリック。矢印マークが青状態で画像をクリック右側や下側や別画面に要素の検証が出ている場合も同じです。次にElementを確認してHTMLの部分を少し上へスクロールしたら、親要素が見えてきます。imgタグの親要素・関係ない要素はみ出した画像の親要素は、HTMLタグで囲まれているかどうかで判断できますよ。親であるdivをクリックして調べて、そのまた親であるliタグをクリックして調べる。してHTMLタグを装飾しているスタイルを確認していきます。親要素から継承されたスタイルを確認し原因をしらべる要素の検証で右側のElementにある親要素リストのHTMLタグか、ブログのリストのテキストをクリックしたらそのスタイルを確認してください。見て、左にズレてる原因が分からないとき、CSSを消していけば原因が分かりますよ。0;の隣にチェックがあるのでクリックしたら、その装飾が消えてズレが戻らなければ、チェックを元に戻す。text-indentの右側にチェックが入っているので、チェックを外すと収まります。-1.4em;}ズレた原因はtext-indentを指定してたから。その意味が分からなければ、ココで検索すれば分かります。text-indentプロパティは、文章の段落などの一行目のインデント幅を指定する際に使用します。インデントには負の値を指定することもできます。一行目のインデント幅を指定する|スタイルシートリファレンス段落の始まりにスペースを確保したいとき使うスタイルねっ!と解ったら、この指定をなかった事にする(初期化)か、調整するかしないといけません。スタイル横にあるチェックマークで、装飾を消したり付けたりすれば、CSSが分からなくても遊び感覚で原因が分かりますよっ^^要素の検証は、初心者のカスタマイズに最適なので、その他使いかたは下記をどうぞ。左にズラしているのがtext-indentが原因だと分かったら、CSSでスタイルを追加してあげます。段落のはじめを揃える装飾text-indentが-1.4文字ズラしているのは、リスト前にあるWebFont(チェックマーク)の装飾でリストの文字分左へ移動させてるからです。0;にすればキレいにハマります。1.4em;などで調整します。–>さいごにリストの装飾text-indentが子要素にも継承されて、画像とテキストが左へズレてしまった例です。対応させるには、リスト内の画像とテキストを指定し、margin-leftなどスタイルを書けば、ズレの修正が可能です。リストに限らず子要素入れるもの、全てこのように編集が必要になるスタイルtext-indentは使っちゃダメですね。毎回面倒だから・・・><リストの子要素に画像やリスト入れ子にしても修正しなくて良い、番号なしリストを装飾するカスタマイズを公開します。それでは、かうたっくでした。スポンサーリンクスポンサーリンクこの記事が気に入ったらいいね!しよう最新情報をお届けします。親要素の指定方法!ブログ初心者にCSSのセレクタ簡単な付け方を説明ブログを見ていると、親要素という単語を見かけます。カスタマイズ初心者は、親要素を見つけるのが得意ではないので、超簡単にそれを見るける方法を書いていきますね。該当HTMLを囲む親要素・属性を付けて、範囲指定して装飾する書き方!headerタイトル、記事部分、asideサイドバー、footerのシンプルなHTMLタグ特有のHTMLタグを囲む『親要素』。タグ内に『属性』を一緒に付けて、指定範囲のみスタイルを指定してましょう...2017.06.16HTMLとCSSの基本table:表の作りかた!行・列を増やすHTMLタグの書きかた、初心者向けだよ❦WordPressなどのブログ・サイトで自身で表(table)を作りたい、さらにセルを追加、よこ1行・たて1列追加をしたい初心者向けに、tebleで使うタグを自由に使えるよう説明します。tab...2018.08.23HTMLとCSSの基本CSSセレクタ指定、HTMLタグ:親子・子孫要素をしれば装飾が反映。基本から説明するね初心者はカスタマイズしたいのに、CSSが反映されないって事があって...。隣接セレクタ!セレクタの指定方法と色んな使用例。初心者向けページ隣接セレクタは、同じ親要素内にある要素Aの直後の要素のスタイルだけを変えたい場合、便利です。CSSでブログの細かい部分を指定して反映させたいときに使います。基本であるclass・id・子孫セレ...2016.07.11HTMLとCSSの基本Chrome検証画面で、ブログの邪魔な広告・画像のHTMLタグを見つけ削除する方法トップ・サイドバーにあるアドセンス(広告)。...2016.10.21HTMLとCSSの基本HTMLとは!HTMLタグとCSSのセレクタの関係、1人でカスタマイズできる為の近道HTMLタグとCSSのセレクタの付け方が難しくって浪費してませんか?自分でカスタマイズするにはHTMLの基本を知ってないと出来ないですよね。HTMLの基本的な事を知ればCSSが解る近道になりま...2016.02.14HTMLとCSSの基本CSSの基本、子セレクタの説明!初心者向け、子孫セレクタとの違い付き子セレクタの使い方と、子孫セレクタの違い。2つを複合して使う場合も結構あるので、それぞれ使用例をあげてます。HTMLタグの要素や、親要素や子要素の関係と基本的なclass、id、タイプ、全...2016.07.05HTMLとCSSの基本HTMLの要素!属性、属性値とは!?class名を複数設定するHTMLの書き方付HTMLやCSSの初心者からすれば、属性と属性値という単語が、HTMLやCSSの説明で突然この言葉が出てきて話が進むと、これは何をさしてるのか意味がわからない状態のまま、読み進めますよね。初心者のカスタマイズでCSSが反映しない、書いた内容が効かない、でもキャッシュが原因ではない。初心者のCSSが反映されない原因の1つ!優先順位の詳細度とはセレクタはあってるのに、CSSが効かない・何で反映しないのか!?解決法の1つ、HTMLタグに囲まれた文字・画像を装飾するとき指定する『セレクタ』pなどを囲む親要素、#mainや.article...2016.06.27HTMLとCSSの基本HTMLのdivとspanの違いは、ブロックレベルとインライン要素★入れ子にしたカスタマイズ例:初心者向け初めてカスタマイズするとき、divとspanの違いって何だろうって初心者は思ってしまうものです。これはブロックレベル要素とインライン要素の違いを知ることで、解決できます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。個人情報の取り扱いについてはリンク先をご確認ください。他社からエックスドメインへの移管申請。エックスサーバー側の全工程2020.01.22ムームードメインから.comなど.jp以外のドメイン移管、全工程をブログで説明。Cacheの設定を変更すればOK2018.10.30タニタの体組成計が、体重しか表示されなくなったとき試すこと2018.10.26Cocoonテーマのアップロード方法!インストールなど失敗する原因・対処方法付き。/CSSセレクタ指定、HTMLタグ:親子・子孫要素をしれば装飾が反映。他社からエックスドメインへの移管申請。エックスサーバー側の全工程2020.01.22ムームードメインから.comなど.jp以外のドメイン移管、全工程をブログで説明。Cacheの設定を変更すればOK2018.10.30タニタの体組成計が、体重しか表示されなくなったとき試すこと2018.10.26Cocoonテーマのアップロード方法!インストールなど失敗する原因・対処方法付き。/CSSセレクタ指定、HTMLタグ:親子・子孫要素をしれば装飾が反映。レンタルサーバー『エックスサーバー』エンジニア特化型Q&Aサイト【teratail(テラテイル)】無料会員登録カンタン&お得に可愛くなれる♪Rcawaii─登録30秒、カワイイ洋服借り放題!プロのおしゃれテクも学べて月額9,980円タイトルとURLをコピーしました。