画像の左右マージンゼロ 大丈夫みたい

これで大丈夫みたいです

昨日、何とか実現出来たwordpress Twenty-seventeen の画像と見出しの左右マージン0 ですが、その後気がついた事がありました。
まず

.post {
overflow: hidden;
margin-left:-25px;
margin-right: -25px;


.wrap{
padding-left:1.5em; padding-right:1.5em;
}

を見ると、class post でマイナスマージンを指定しならが、class wrap ではpadding 設定しています。
このpost はいつかネット上で拾ってきたもので、wrapの方はTwenty-seventeen の仕様のようです。

結局、Twenty-seventeen で元々は1.5em のpaddingが設定してあったものをpostで打ち消して余白量を減らしているようです。

もしかしたら、post のマージンを0にして、wrap のパディングも0にすれば丁度余白が0になるのでは? と思いやってみたところ、これが大正解。


本文 コメント部 サイドバー

でも、モバイル画面でのサイドバー部分が余白が無くなり文字が画面一杯で見難くなってしまいました。
それ以外にも、コメント欄、など、投稿本文意外の部分では余白を入れなくては見難くなってしまった部分が幾つか見つかりました。

そこでGoogle chromeデベロッパーツールでクラス名を調べて部分毎の調整をしたら、殆ど問題箇所はなくす事が出来ました。(みたい)

それぞれの部分のクラス名は

.wrap(post area   widget area 全体を囲んでいるクラス名)
.widget-area(サイドバー部分全体のクラス名)
.comment-respond(コメントエリア全体のクラス名)
.post-navigation(最後にある、前の記事や後ろの記事に行く為のナビゲーション部分のクラス名)

ついでに、写真のキャプション部分の文字色、行間、写真との間隔なども調節しておきました。こちらのクラス名は.wp-caption .wp-caption-text  で何とかできました。

主に調節するのはmargin やpadding で、それでほぼ満足のいく形になってくれました。

ただ、一つだけ何としても解決しなかった事があります。
それは写真のキャプションを入れないでおくと、モバイル画面で左右に余白が出来てしまうという事。
理由は分かりませんが、これは文字を入れなくても全角のスペースを1個入れておくだけで解決出来ましたが、これはどういう事なのか?

まぁ、小さな問題はまだ見つかるのでしょうが、取りあえずはこれで良しとします。
もう、ウンザリ!!!!!

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です