2019年9月22日日曜日

ページビルダーのカスタムでCSSにはまる



「Wordpressがさいきさんみたいなプロの人が使えるだけだと困るのですけど…」と言われ、あっちも、こっちも自在に自由に書き換えができるようにしたいという要望を実現するため、確かになと思って、

No1ページビルダーWPBakeryというのを使って考えてみました。
ビルダーは日本語版になっているのは、結構高いのですが、ベーカリービルダーは飛躍的お安く、1回払うだけでずっとライセンスをゲットできます。中のテンプレートをさらにダウンロードするのは、年間45ドルさらに払う必要があるだけです。

テンプレートも、Tesraで購入し、ロゴの変更とかも、コントロールパネルで一発でいけるというのも導入しました。

もちろん、背後にはBootstrapも動いており 
ちょっと古いけどプロ版のfont-awesomeも採用しております。
でも、それでも、ここのこの動きは違うだろ! という所が出てまいりまして… この4つを分析しまくって苦労していました。

例えば、3分割をしてこの3つの中の物を中央にするためには、
margin: 0 auto; をしないといけない… 

.vc_col-sm-4>.vc_column-inner{display:flex;}
のようにして、4分割のときだけ Flexにします。

レイアウトこちらを参考にしてください。よいサイトです。

だけど、すると中の文字が中央にしかならない…

じゃ、どうするか…文字を左に寄せたい時は、

<div style="width: 100vw;">
文字列
</div>

というように、width 100vwを設定することで実現しました。

絶対忘れるからメモ。

と、思ったけど、よくよく考えたら、display-flexだけでできた!

   display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;

知らんかったわーdisplay-flex 勉強になった…


最近、新しいカメラをゲットして嬉しい私でした。

新品価格
¥859から
(2019/9/25 10:53時点)


この頃、頭が発狂しそうに忙しい時があり、こういうメモ帳に鉛筆でメモするようにしている。 整理できます。



お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *


View My Stats