見出し画像

BASEのHTML編集でMETAタグを使ってユーザーに画像や色を変更できるようにする方法

こんにちは!web制作エンジニアの伊とうです。
HTML編集Appにてオリジナルデザインでサイトを作る際、画像や色など後からユーザー自身で変えれると便利ですよね。
そんなこともMETAタグを使用すればできちゃいます。この記事ではその方法をお伝えします。

結論:コードは下記です。

<!-- 定義時 -->
<meta name="color:ButtonColor" content="#174c4f" label="ボタンカラー">
<meta name="if:TopImg" content="1" label="トップページ画像 ON/OFF">
<meta name="text:FontColor" content="" label="∟ タイトル">
<meta name="image:TopImg" content="" label="└ 画像">

<!-- 使用時 -->
{block:if-TopImg}
{/block:if-TopImg}

{color:ButtonColor}
{text:FontColor}
{image:TopImg}

使い方はとっても簡単。METAタグで変数を定義して、使うときに定義した変数で呼び出すだけ。具体的な使い方が知りたい方は続きをどうぞ。


ifタグ

ON/OFFの条件を設定できます。使用するときはON、使用しないときはOFF。ON/OFFはユーザーも選択できます。

"content"は初期値、content="1"ならON、content="0"ならOFF

使うときは{block:if-(任意の変数){/block:if-(任意の変数)}で使用します。この{block}と{/block}で囲うのはBASE独自のコードであり、他にも多く使うので覚えておいて損はないです。


参考サイト Base developers
https://docs.thebase.in/docs/template/








この記事が気に入ったらサポートをしてみませんか?