BASEでオリジナルテーマを作成する際、デザインオプションのグルーピングが意図通りに表示されない場合があります。本記事では、記述方法のポイントやよくある原因を解説し、正しい表示にするための設計方法を紹介します。
デザインオプションの基本構造
BASEのデザインオプションでは、<head>内に<meta>タグを{block:Hidden}内に記述し、label属性で項目名、data-group属性でグループを指定します。
正しい記述例は以下の通りです。{block:Hidden}<meta name="text:Hero Slide 1 Description" content="説明文" label="ヒーロー1 説明" data-group="home">{/block:Hidden}
項目名にdata-groupが含まれてしまう原因
項目名にdata-groupの文字列まで含まれてしまう場合、多くは<meta>タグの属性値に全角スペースや不適切な引用符が混ざっていることが原因です。
例えば、label属性やdata-group属性の前後に不要なスペースや改行があると、管理画面が正しく解析できず、表示がおかしくなることがあります。
グルーピングされない場合のチェックポイント
グルーピングされない場合は、以下を確認してください。1つ目はdata-group属性のスペルが正しいか。2つ目は“{block:Hidden}”タグで囲まれているか。3つ目は閉じタグ“{/block:Hidden}”が正しく配置されているかです。
これらが正しくても表示されない場合、ブラウザのキャッシュや管理画面の反映タイミングを確認することも重要です。
実例：正しいmetaタグの書き方
正しい記述例は以下です。{block:Hidden}<meta name="text:Hero Slide 2 Description" content="別の説明文" label="ヒーロー2 説明" data-group="home">{/block:Hidden}
このように記述すると、項目名が「ヒーロー2 説明」と正しく表示され、HOME設定グループに入るはずです。
まとめ：BASEデザインオプションの表示改善
BASEのデザインオプションでグルーピングや項目名の表示がおかしくなる場合は、属性値のスペースや引用符、タグの閉じ忘れ、data-groupのスペルを確認することが重要です。
正しい記述を守ることで、管理画面で意図した通りに項目をグループ化し、見やすい設定画面を作成できます。
コメント