カスタマイズについて



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

基本 ワードプレス

スマホでの幅デザイン

更新日:

今回はレスポンシブ的なやつです!
ワードプレスのアフィンガー4からアフィンガー5(wing)に移行して使ってる私ですが、正直アフィンガー5優秀すぎて基本的にレスポンシブでしなきゃならない事なんて少ないんですよね。

ただ!1つだけあるとすればPCサイトでは2カラム(メインとサイドバー)で基本的に表示されてると思います。
スマホではそれが、ヘッダー、メイン、サイドバー、フッターという流れで1列に表示されますよね?
その際に!せっかく設定してる背景が見えない…!!!!
メイン、サイドを透過したり、枠線付けてたら尚更違和感なんですよ…
シンプルが良い!枠線も透過も背景もいらぬ!って人は良いかもなんですが、わちゃわちゃしてる私としては由々しき事態!!
正直別に良いかなー?って思ったりもしたけど。←
でも!これをしてるとしてないじゃ見た感じのサイトの雰囲気全然違いますよー!

って事で、思い思いにスマホに合わせて最適化しちゃいましょう!

どんな感じ?

言葉だと分かりずらいかもですが、つまりはこういう事。

左側はなにも指定していない場合。
アフィンガーで自動的にレスポンシブ対応してくれて1列表示にしてくれます。
が、枠線はギュウギュウだし背景の意味…ってなっててデザイン的に悪い!
わざわざサーバー代払ってるんだからここで妥協ダメ、絶対。

って事で、右側は余白設定してあげたバージョン。
画像じゃ分かりずらいかもしれませんが、スマホで見ると全然違うのですよ!!
ただ、もちろん記事内の幅も狭くなるのでそこはデザインとの兼ね合いでドウゾ。

簡単にcssを差し込むだけなのでサックっとやっちゃいましょう!
ちゃんと記事トップの注意事項は確認してね!

どこに書く?

cssを使ったカスタマイズになりますが、カスタマイザーを使って書きます。
ワードプレスのメニューの【外観】→【カスタマイズ】→【CSSの追加】の部分になります。

css内の日本語について

cssに説明文で「(ここから下のcssは)会話の枠線」みたいなのを付ける場合は「/*ほにゃらら*/」みたいな感じで書く方法があります。
ただ、なぜか私の場合はエラーになり保存できないんですよね…
詳しくは後程、別記事で書きますがそれについては個人で判断して書き込みをお願いします。
このページで説明するcssには、cssの最後に日本語で説明をつけています。
基本的にその説明部分はコピー出来ないようにしていますが、ブラウザによっては一緒にコピーになるようです。(IEがそうでした)
面倒ですが、その場合はペースト後に消して下さい。

RYOU
希望があれば「/*ほにゃらら*/」式にするよ

スマホ用余白CSS

REI&RYOU
日本語部分はPCだとコピーできないようにしていますが、ブラウザによってはコピーされちゃうので消して下さいませー!
@media only screen and (max-width: 959px) {適応する幅
#contentInner main {
max-width:90%;メイン部分の幅
margin: 20px 5% 20px 5%;上下左右の余白の振り分け
}#side aside {
max-width:90%;サイドバー部分の幅
margin: 20px 5% 20px 5%;上下左右の余白の振り分け
}
}

CSSを使った余白の事が詳しく知りたい場合はコチラからどうぞ!
(分からなくても問題はないと思う)

好みに応じて太字にしている部分のみ書き換えて下さいね★
説明すると、適応する幅というのはブラウザサイズですね。
959px以下の画面で開いた場合に、この幅を適応させるよ!って指定です。

次に、メインとサイドに分けて余白を指定しています!
レスポンシブに対応できるように左右は「px」でなく「%」で指定しています。

まずメイン部分(サイドバー部分)の幅を指定します!
今回の場合は90%!あまりないと思うけど、サイドバーは欲しくしたいとかならサイドバーだけ80%とか、好きにしてドウゾ!

次に上下左右の余白を指定しています。(順番としては上、右、下、左で書きます)
この時に、メイン部分(サイドバー部分)で指定した%と左右の%を足して100になるようにして下さいね!
でないと余白が偏ったりします。

まとめ

今見ると簡単なcssが最初は全く分からなかったんですよね…
どうぞお困りの方(が居るのかは分からないけど)に届きますように!
そして、いまだに初心者マークが外せない私のcssなのでバックアップはしっかりされてからドウゾ!!







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

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