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

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

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

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

もちろん、背後にはBootstrapも動いており　
ちょっと古いけどプロ版のfont-awesomeも採用しております。

アサヒカメラ　2019年9月号

でも、それでも、ここのこの動きは違うだろ！　という所が出てまいりまして… この４つを分析しまくって苦労していました。

例えば、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　勉強になった…


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

Transcend SDカード 16GB UHS-I Class10 (最大転送速度95MB/s) 5年保証 TS16GSDC300S-E【Amazon.co.jp限定】 新品価格 ￥859から (2019/9/25 10:53時点)

メモ帳 薔薇雑貨 薔薇のリングメモノート ゆうパケット可 かわいい いちご プチギフト 文具 薔薇柄 ローズ 花柄 価格：324円（税込、送料別) (2019/9/25時点) 楽天で購入

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

---

お問合せフォーム

お名前 :

Email: (必須)

メッセージ: (必須)

｢今日も勉強しました｣の 「ページビルダーのカスタムでCSSにはまる」について…

約束します！迷惑かけません

　約束しないと、送信できません。再度の場合はリロードが必要です。

Tweet