今日はウェブデザイン向けのトピックです。
Wordpressの便利なプラグイン、Visual Composer。最近日本語訳がついていますが、正直ちょっと直訳過ぎる印象です（訳者さん、ごめんなさい！）。
カラム設定の「Inherit from smaller」が「より少なく承継する」と訳されている、その意味が理解できず苦労しました。その苦労を２分で解決できるよう、本稿に記載します。
- ｢より少なく承継する｣は｢必要に応じて設定｣に読み替えよう。
- つまり、カラム設定には二種類のアプローチがある。
- まず、要素の「行」で配列を調整できる。
- だけでなく、行のインナーカラム設定でも配列をコントロールできる。
- デバイスごとの調整を念頭に使い分けるとよいでしょう。
Visual Composer について
このプラグインの内容については、日本語の解説もありますので省略します。詳しくはグーグル先生にお問い合わせしてみてください。
カラム設定
Visual Composer（以下「VC」と省略します）の基本は「行」すなわち「Column」です。
行自体も要素になっていますが、この中に子要素を埋め込むことでページを構成していきますよね。
行自体の設定は、標準オプションである全幅（1/1）や複合カラム（1/3+2/3）など様々に構成できる他、カスタム設定として、「1/1+1/6+4/6+1/6+2/3+1/3+1/4+3/4」と言った複雑な構成もできます。
上記のカスタム設定は、縦で考えると４段になりますが、ブロックとしては一つになります。４つのブロックにせず１つのブロックにしてしまう意味は、背景画像の設定（特にパララックス効果をかける場合）や、idをまとめる場合にあると言えます。
しかし、idをまとめる場合は、別に一番上のカラムにのみidを設定し、下のブロックにidを入れなければいいだけの話しですので、一番の意味は背景画像にあると思います。
また、上のカスタム設定の場合、最初に「1/1」の大きなカラムを置いて、その中に、さらにカラムを設定することでもほぼ同じスタイルが実現できます。
まずは、「1/1」
その中に、さらに「1/1」
その後ろでかつ大きな「1/1」の中に「1/6+4/6+1/6」
さらにその後ろに「2/3+1/3」
と言った具合です。
当然、この構成ではカラムの数が増える分、コンテナの階層は深くなります。
ただでさえVCは階層が深いので、そういうこともあって、カスタム設定で一発でカラムを構成できるようにもなっているのでしょう。
そして、カラム設定としては、外側の設定と内側の設定があります。
ここで問題になるのが、内側、インナーカラム設定の「Responsive Options」です。
Responsive Options の設定
この設定、簡単なようで難しい。日本語訳が「より少なく承継する」となっているため、なんのこっちゃさっぱり分からない。これを解説するのが本稿の目的です。
この設定、あーだこーだとやってみるのが一番なんです。
「より少なく承継する」というのは、正確ではなくて「必要に応じ選択してください」と読み替えるのが良いと私は思います。
上の画像の通り、設定項目最上部にある「幅」は、操作画面上の幅を表しています。
この幅を変えると、操作画面上の幅も変わり、外側のカラム設定（「1/1」等）も変更されます。
次に、オフセットは、左側のマージンを表します。
これが、このVCの凄いところですね。
オフセットの効果的な使用例
たとえば、幅広いサイトの真ん中だけにコンテンツを寄せて作りたい場合を考えましょう。
この時、古いバージョンのVCでは、「1/6+2/3+1/6」のカラム設定にして、左右の「1/6」は空にしていました。
しかし、空divはあまり好ましいとは言えません。
このようなケースでは、次のようなやり方で少しだけスマートなコードを作れます。
①元のカラム設定を「1/1」にする。
②インナーカラムオプションから「Responsive Options」を開く。
③PCのデバイス表示で、オフセットを「1/6」、幅を「2/3」に設定する。
こうすることで、外側のカラム設定は「1/1」を維持したまま、デバイス単位で表示を変えることができる。つまり、こうなります。
①PCからは左側に「1/6」のマージンを取った「1/6+2/3+1/6」のレイアウトができる。
②タブレット以下では、外部設定のとおり「1/1」で表示される。
しかし、外部カラム設定を「1/6+2/3+1/6」としても、この「Responsive Options」で、1/6をモバイルで非表示にすれば、同じことが実現できます。
複数可能なアプローチのうち、どの手法を選択するかは、設定のしやすさ、好みなどに依拠するでしょう。
私の場合、後からカラム設定を変えることが多いので、複雑なカスタムカラムにしておくと、中の要素が移動して、再設定が面倒になります。
ですので、比較的シンプルなカラム設定を縦にたくさん並べる傾向があります。
まとめ
VCの日本語訳、ありがたいのですが、原語の方が分かりやすい部分もあります。poファイル削除すればいいだけなんですが、クライアントワークで使う場合にはそうもいきません。
オプション欄の英語「inherit from smaller」もそこそこ分かりにくい気がしますけれど、「より少なく承継する」と書かれたらもっと分かりにくい。ここは「必要に応じ設定」と読み替えることで、ぐっと使い易くなるはずです。
ご参考になさってください。ちなみに、VCはビデオチュートリアルも充実してるんですが、英語でいいので解説つけて欲しいですよね。あれみても正直さっぱりでした。