この記事は、Zennに投稿した記事を一部編集して転載したものです。
概要
この記事では、BASEのHTML編集Appを用いてデザイン編集画面において、ユーザが自由に画像やテキストを設定できる方法について解説しています。
デザインオプション機能を活用することで、<head>内に特殊なmetaタグを記述し、独自の変数を設定することが可能です。この機能により、ユーザに画像やテキストの変更自由度を提供できます。
詳細についてはBASE公式ドキュメントに情報がありますが、本記事ではよく使う部分を抜粋してまとめています。
よく使うコードはこちら
//定義時
<meta name="if:TopImg" content="1" label="■トップ画像がある">
<meta name="image:TopImg" content="https:" label="└画像">
<meta name="text:TopText" content="キャッチコピー" label="∠キャッチコピー">
<meta name="color:ButtonColor" content="#174c4f" label="ボタンカラー">
//使う時
{block:if-TopImg}
{/block:if-TopImg}
{image:TopImg}
{text:TopText}
{color:ButtonColor}
