【レスポンシブなプラグインの正体を暴いてみた】

Page Layout Builder というWordpress用
プラグインが便利です。
　
▼紹介記事はこちら
http://design-plus1.com/tcd-w/2014/06/page-layout-builder.html

私も触ったことはあります。確かに手軽です。
でもお客様向けのサイト制作には使いません。
　
こういうのをお客様に使わせると、
プラグインやWPの更新で非互換が生じたとき
問い合わせがくるからです。
　
何せ、本当にCSSの知識ゼロで好き勝手
できてしまうんだという過信を抱かせて
しまうことになるので（本当は違うのに）、
　
「自分でやってみようと思ったんですが、
　ここがうまくいかなくて・・・」
　
って質問がくるんです（笑）
　
で、大概そういう質問ってプラグインが
助けてくれる範疇を越えてるんですよね。
　
教えるとしたら授業料をいただかないと
いけないレベル。
　
Page Layout Builderに関して言うと、
例えば、各ブロックのタイトルの色や
文字サイズを変えたいとか、
ワンポイントのアイコンデザインを
つけたいと思ったらどうするの？
　
CSSを知らないとできないですよ。
CSSを使うために、見出し部分のHTML
を解読する力がないとできないですよ。
　
▼この記事が言っているのは、
http://design-plus1.com/tcd-w/2014/06/page-layout-builder.html
　
「レスポンシブな仕組みを作るだけなら
　CSS知らなくてもできますよ」
　
ってこと『だけ』なんですよ。
それ以上のことは言っていません。
　
そこを自分の都合の良いように拡大解釈
してはいけないってことです。
　
まぁ、消費者心理をついてるよなぁ～
とは思いますけどね。
　
例えば「50％増量」って書いてあったら
すっごい得だなって思うじゃないですか。
　
でも、隅っこに小さく「当社比」って
書いてあるんですよね。ぎりぎり読める
ぐらいの字で。
　
しかも「当社比」って言われても
消費者には元がどれくらいなのか
わからないでしょ。
　
嘘は言ってないんだけど、
事実以上に良いように錯覚させられる。
　
それに似てる。
　
話がそれたけど、レスポンシブなBOXは
たぶんこんな原理で作ってあるはずです。
　
推測を書いてみます。
　
▼プラグインが用意しているCSS

.row {
margin-left: -15px;
margin-right: -15px;
}
.col-xx-1, col-xx-2, ....,col-xx-12 {
padding-left: 15px;
padding-right: 15px;
float: left;
position: relative;
}
（中略）
.col-xx-4 {
width: 33.333333%;
}
（中略）
.col-xx-6 {
width: 50%;
}
（中略）
.col-xxx-12 {
width: 100%;
}
@media screen and (max-width: xxx ) {
.col-xx-1, col-xx-2, ....,col-xx-12 {
float: none;
width: 100%;
}
}

　
▼プラグインが生成するHTML

<div class="row">
<div class="col-xx-4">
<h3>Image</h3>
<div class="inner">ImageのHTML</div>
</div>
<div class="col-xx-8">
<h3>テキスト</h3>
<div class="inner">テキストのHTML</div>
</div>
</div>
<div class="row">
<div class="col-xx-4">
<h3>カレンダー</h3>
<div class="inner">カレンダーのHTML</div>
</div>
<div class="col-xx-4">
<h3>アーカイブ</h3>
<div class="inner">アーカイブのHTML</div>
</div>
<div class="col-xx-4">
<h3>カスタムメニュー</h3>
<div class="inner">カスタムメニューのHTML</div>
</div>
</div>

レスポンシブCSSの仕組みの理解と
Bootstrapを使った経験があれば、
何も見ずにスラッと書けて然るべき
コードです。
　
と、予想を立てたところで実際この
プラグインを使ってページを作って
HTMLとCSSを覗いてみたら、
　
あらま。仕組み的には予想的中。
　
ソース見たらやっぱりこのプラグイン
Bootstrap使ってるじゃん！！！
　
そうだろうと思ったよ(-_-;)
　
　
　
とりあえず目的が果たせればよい人には
オススメのプラグインです。
　
仕事としてサイト制作ができるように
なりたいWebデザイナーさんには、
まずBootstrapのレスポンシブCSSの
仕組みを理解して同様のCSSを自分で
書けるようになってからプラグインを
使うことをオススメします。
　
意味もわからずプラグインを使っても、
プラグインの手が届かない細かい変更
ができないのでは、お客様向けの仕事
はできないからです。