読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

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

f:id:wp-lesson:20160208114419j:plain

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を自分で
書けるようになってからプラグイン
使うことをオススメします。
 
意味もわからずプラグインを使っても、
プラグインの手が届かない細かい変更
ができないのでは、お客様向けの仕事
はできないからです。