BASEカスタマイズ中級編〜デザインオプション第4回〜「カラムのレイアウトを簡単に切り替えよう！」

2019.05.14

5回連続でお送りしています「デザインオプションの独自設定」を使ったBASEのカスタマイズ方法の4回目。

・第0回「基礎知識」
・第1回「お知らせをつくろう！」
・第2回「カラーを色々変えてみよう！」
・第3回「スライドショーをつくろう！」
・第4回「カラムのレイアウトを簡単に切り替えよう！」
・第5回「スライドショーのブロックを表示・非表示に！」

基本的な書き方は第０回で紹介しています。
第０回基礎編を振り返りながら参考にしていただければと思います。

4回目の今回は、デザインオプションで「select」を設定してカラムレイアウトを切り替えてみます。

今回やりたいこと

商品一覧のカラムレイアウトをHTMLを触らずに変更できるようにします。
まず、デザイン編集の左パネルにドロップダウンの項目を追加。
そして、ドロップダウンのリストでカラムの数を選び、HTMLの任意の場所のクラス名を切り替えます。

尚、前回同様「デザインオプション」を使用したカスタマイズですので、HTML、CSSを理解している方が対象のカスタマイズとなります。HTML、CSSの説明などは省略します。
※管理画面のデザイン →「 HTMLを編集する」からHTMLを編集しますので、バックアップをとってから編集するようにしてください。

手順1　headタグ内に特殊なmetaタグ「select」を記入

headタグ内に「select」用の特殊なmetaタグを記入します。
selectを使うと編集のサイドメニューからドロップダウンで選択項目が追加されます。

「select」のmetaタグはこんな感じです。
<meta name=“select:任意の英数字” content=“任意の英数字” title=”1カラム” label=“項目の名前”>
「name」は、HTML内に記入するカスタム独自タグに使います。
「content」は、HTML内のカスタム独自タグで出力する値。
「label」は左パネルに表示される項目名になります。
「title」が左パネルのドロップダウンのリスト名。
1番上のcontentの値が初期値になります。

管理画面のデザイン → 「HTMLを編集する」でHTML編集のサイドパネルを表示させ、<head>内に、
今回は初期値を２カラムにして、３カラム、４カラムに切り替えられるようなmetaの設定にしました。

プレビューの更新ボタン → 保存ボタンを押下します。
するとデザイン編集の左パネルに、「カラムレイアウト」という項目とドロップダウンのリストが表示されていると思います。