カスタマイズについて



バリバリの初心者マークの私が、自分でやったカスタマイズを記録として書いています。
にわかがニュアンスで書いたフワッフワした記事ですので参考程度にどうぞ!
そしてカスタマイズは自己責任でお願いいたします。
どうなるのか分からないので、バックアップやコピーはしっかり行って下さいね!

基本 ワードプレス

変な余白が出来た!解決法!

更新日:

初心者マークが外せそうにない私ですが、とりあえず以前に会社の方から聞かれた余白問題についてです。

今回のケース

・スマホで見た際に記事エリアとサイドバーの余白が大きすぎる。
・cssで指定しても改善されない!効果がない!

との事でしたが、今回と同じケースでなくても、
たまにcssで指定しても反応しないよ!って事があると思うので、
そんな時に試していただきたいです。

会社の方も同じくワードプレス、アフィンガーを使ってカスタマイズしていて、
アフィンガーは本当にいろいろとカスタマイズ出来て便利ですよね!
しかし、余白で悩まされる事が私も多々ありました…
というか、現在もなんで?って事はあるのですがね。
だから初心者マーク外せないの…

ただ今回のケースは簡単に解決できたのでご紹介!
余白についての説明もついでにするので、興味のあるところだけ目次よりサクッとどうぞ!

余白については初心者のザックリ説明なので期待しないでね。

そもそも余白って?

余白も2種類あるんですよ、奥さん!
その2種類というのが、「margin」「padding」です。

margin(マージン)は外の余白、padding(パディング)は内側の余白です。
図で説明するなら、こんな感じ。

これを踏まえて、画像やテキストの位置をcssで指定してあげる感じです。

書き方(基本)

書き方

{
margin:10px;
}

{
padding:10px;
}

そう、marginとpaddingで書き方に違いはありません!
覚えやすいね!
上の例えだと全体に10pxの余白になります。

RYOU
例はpx(ピクセル)で書いてるけど、%なんかでも指定できるよ!

上下左右を一括で

上下左右で指定したい時もありますよね!

上下左右全てを指定したい場合

{margin:上px 右px 下px 左px;}

または

{padding:上px 右px 下px 左px;}

といった感じで、上から時計回りで指定を一括で可能です!

上下、左右で指定

上下と左右で指定したいんだよねって時もありますね。
そんな時は、こちらー

{margin: 上下px 左右px}

または

{padding: 上下px 左右px}

ちょっと分かりづらいので例えるなら、上下は5pxで、左右は10pxでって時は

{margin: 5px 10px}

って感じです!
結構使う場面あるある。

上下左右を個別に

いや、右だけで良いんだけど…って場合は下記を使うよ。

個別に指定

上だけ指定

margin-top または padding-top

下だけ指定

margin-bottom または padding-bottom

左だけ指定

margin-left または padding-left

右だけ指定
margin-right または padding-right

中央寄せにしたい

中央にセンタリングして表示したい時もありますよね。
そんなときに便利なのが…「auto」です。

左右をautoで指定してあげると中央に表示できますよー!

こんな感じ

{
margin-left:auto;
margin-right:auto;
}

上下、左右とかでもOK

{margin: 10px auto;}

(上の場合は上下が10pxの余白で中央寄せ)

%で指定

スマホだと20pxが結構大きく感じるなーって時は%で指定していると便利。
ただ、ちょっと仕組みを理解して使わなきゃいけないのが%かなと。
指定したい場所の全体の幅を100%として指定していきます。
marginだけ20%とかで指定も出来るけど、
全ての合計が100になるように指定した方が変な歪みがでなくて良いということになりますね。
なので、%で指定する時は要素(枠だったり画像や文書)の幅も「width」を使って一緒に指定してあげます。

{
width:50%;
margin:10px 20%;
padding: 5px 5%;
}

みたいな感じですかね。
説明するなら、画像幅が50%で外余白(margin)で左右20%の計40%、内側余白(padding)で左右5%の計10%
すべて合わせて100になります。

ただ注意なのが、線の太さは%で指定できないので太い枠線なんかをつけてる場合はややこしい!

box-sizing: border-box;

っていうのを付ければ良いんだけど(多分)詳しい説明は今回は省略!
上記のbox-sizingっていうのを使うとpaddingとborderはwidthに含まれます。
要はmarginとwidthで100%になるように指定して、
あとはpaddingとborderは好きに指定しちゃってねーってなる!(はず!)

注意点

marginについての注意点。
上下だったり左右だったりmarginが重なる部分ってありますよね。
例えばPC画面で見た時のトップページの記事エリアとサイドバーの左右だったり
スマホ画面で言うなら記事エリアの下とサイドバー上の部分。

この場合、記事エリアの下のmarginを10px、サイドバーの上を20pxと指定したとします。
合計30pxにはなると思いきや…20pxになっちゃいます。
marginは足し算してくれないみたいで、大きいほうが優先です。

REI
paddingは問題なく足し算してくれるよ!paddingとmarginでもOK!

変な余白が出来た!

さて、今回のケースの変な余白が出来た件です。

そもそも今回はサイドバー自体にmarginをつけて指定していました。
それが、なぜか指定幅より大きいし、変更しても変わらない…

上の注意点を読まれた方は、あぁそいうことか!って思ったかもですが、そうです。
今回の場合は、他の個所でmarginを指定してしまっていたようです。

全部のcss確認してないので、どこと被っていたのかは分かりませんが…←

そもそも、cssって下に書いてることが優先されるんですよね。
んで、marginが重複している場所の場合は大きいほうが優先され上書きされます。

本当は被っている個所のcssを修正するのが正攻法なのでしょうが…
魔法の言葉「!important」様で今回は解決。

指定していたmarginに書き加えます。
今回の場合なら、

{margin-top:5px !important;}

ってな感じですかね。

「!important」は、これが最優先事項よ!って指示です。
なんか反映しないなーって時に使うと、反映したりして便利!

ただ、多用して同じ個所で使ってしまうと意味がない(下に書いたのが優先される)のでお気をつけ。

解決しない

どんなケースなのかは分からないので、なんとも言えないのですが
私がアフィンガーでカスタマイズを初めて最初に引っかかったのが余白でした。
なので、一応ですが私の場合のケースをご紹介

ヘッダーの上に余白が出来る!

marginだ!って思って指定するけど消えない余白…
なんなの、コレ…って絶望すること数日。
そう、ヘッダーって2個あるんですよね。
何言ってんの?って感じかもですが、初心者には分からなかったの…
ヘッダーとヘッダー画像の違いが!
ヘッダーという、画面の一番上にサイトタイトル文字(画像も入る)なんかを入れる枠があって、
その下にヘッダー画像という枠があるんですよね。
私が使ってたのはやりたい事的にヘッダー画像だったのですが、ヘッダー画像のmarginをいくら消しても意味がない。
ヘッダーを設定せずにいたとしても、上にヘッダー様のスペースがあるんだもの!!
ヘッダーの存在を非表示にすれば良いんですよと会社の方に聞いたときは目から鱗でしたね!
(ありがとう!!!!)

この件については、またいつかまとめてきちんと記事書こうと思うので詳しくは省略ですが、
もし同じお悩みの方がいたらこちらでヘッダーをなかった事にしちゃって下さい。

#headbox-bg{
display: none !important;
}

まとめ

毎度のことながら、にわか知識をニュアンスでフワッと書いてるので分かりづらそうな記事ですね!
多分、間違ってるよーって事も沢山ありそうで…修正入れたら正直に告白しますのでご勘弁を!

しかし、困ってる人が少しでも解決に近づいていただければ幸い!







-基本, ワードプレス
-, , ,

Copyright© 3ism+9ality , 2020 All Rights Reserved.