なかなか思うように行かない画像の余白ゼロ
昨年4月から始めたWordPress でのブログも早1年半以上が過ぎ、その間少しづつ自分の好みのスタイルに更新してきました。
とは言っても、自分にはそれ程の知識も無いので、人様のCSSを参考させて頂いたものです。
だんだんと、自分好みになってきてはいるものの、スタートした頃から気に入らなかったのはパソコンでの表示はまぁまぁとしても、モバイルでの見え方でした。
と言うのも、写真や見出しの左右に余白が出来てしまう事で、この余白を消して画面横幅一杯に表示したかったのです。
何となく簡単に出来そうでしたが、やってみるとなかなか旨く行きません。旨く行ったかと思うと、他の部分がおかしくなったりで、ずっとこの繰り返しでした。
ネット上で情報を探しても皆さん結構苦労しているようで、自分が思っていた程簡単なものでは無いようでした。
仕事もかなり暇になってきた(我が家の仕事はシーズンオンオフが極端で冬場は超暇)ので、再々再々再々度目の挑戦。
テーマはTwenty-seventeen を使っていますが、どうもこのサイトタイトルと投稿タイトルのタグがよく分かりません。
どちらかがh1でどちらかがh2の筈なのですが(常識的にはサイトタイトルがh1?)の筈なのですが、あちらを変えればこちらが変わり、と何とも分かり難いのです。
追加CSSの中を見ていると
.post {
overflow: hidden;
margin-left:-24px;
margin-right: -24px;
}
こんな所がありました。
Postのマージンがマイナス?
これも何処かのサイトで拾ってきたCSSのようですが、この数値を変えてやったら投稿画面が広がっていきました。
お、これでいいんじゃない?
この数値をー34まで変えたところで、投稿画面が丁度画面一杯に広がり写真も見出しも横一杯に広がり余白は消えてくれました。
これで全て旨く行けば万々歳なのですが、これからが一苦労。
まず、本文のエリアも画面一杯に広がってしまっていますから、少し左右に余白を入れなければなりません。
これは
.entry-content p{
padding-right:0.7em;
padding-left:0.7em;
}
とやったらすんなりとクリヤー。
しかし、その後も変えたくない所がおかしく変わってしまう事の繰り返し。やはり最初によく分からなかった、サイトタイトルと投稿タイトルのタグの区別がよく分かりません。
1記事だけの表示にするとまた変わってしまったりと、分からない事の連続です。
ようやく何とか形がつき、画像の左右余白を消すという、長い間の念願が叶いました。
その後も投稿エリアとサイドバーとの文字のバランスやら、幅のバランスやら、色々と変えて、大分良い感じになりました。
ブログのカスタマイズなんて、何処までやってもキリが無いですから、この辺りで妥協しておかないと、最後にはデータ全部壊してしまう心配もあります。
暫くはこのまま静かに、です。
結果は、意外に早く、翌日には数々の不具合が見つかり、この案は没となりました。