BASE独自タグを理解しよう│BASEデザインカスタマイズの勉強会記録(2)

BASEの使い方/カスタマイズ

BASEでデザインカスタマイズをしたい方に参考になれば幸いです。自分で勉強したことをアウトプットしていきます。

BASEには独自のプログラミング言語であるタグがある

{}が見ているとあると思います。これはBASE独自のプログラミング言語です。これを使うことによって自分で改装したいページや入れておきたい機能を追加したりすることができます。ブロックはページを表しており、タグは機能を表しています。

{block:IndexPage}トップページ

{block:ItemPage}商品詳細ページ

{block:AboutPage}aboutページ

{block:ContactPage}お問い合わせページ

{block:PrivacyPage}プライバシーポリシーのページ

{block:LawPage}特定商取引のページ

全体のヘッダー内のコードを分かろう

一番下の方にこのような形のプログラミングコードがあると思います。あくまで全体像なのでほんとはもっと複雑です。この以下のようなコードが各ページごとを表しています。

<header>

{block:IndexPage}

<!-- トップページのコンテンツをここに記述 -->

{/block:IndexPage}

{block:ItemPage}

<!-- 商品詳細ページのコンテンツをここに記述-->

{/block:ItemPage}

{block:AboutPage}

<!-- Aboutページのコンテンツをここに記述-->

{ShopIntroduction}

{/block:AboutPage}

{block:ContactPage}

<!-- お問い合わせページのコンテンツをここに記述-->

{ContactContentsTag}

{/block:ContactPage}

{block:PrivacyPage}

<!-- プライバシーポリシーのページのコンテンツをここに記述-->

{PrivacyContentsTag}

{/block:PrivacyPage}

{block:LawPage}

<!-- 「特定商取引法に基づく表記」のページのコンテンツをここに記述-->

{LawContentsTag}

{/block:LawPage}

</header>

 

必須!張らないといけないBASE独自タグ

ヘッド内<head>

{FaviconTag} ブラウザのファビコンおよびスマートフォンのホームアイコン用画像として適用されるようにlinkタグが出力されます。

{BackgroundTag} バックグラウンドのタグ。styleタグとして出力されます。デザイン編集で設定した背景色、もしくは背景画像の内容が反映されます。

{JQueryTag} JQueryライブラリのタグ。scriptタグとして出力されます。

{GoogleAnalyticsTag} Google Analyticsのタグ。Google Analytics Appsで設定したタグがここに表示されます。

 

ボデイ内<body>

{LogoTag} ロゴのタグ。デザイン編集で設定したロゴ画像、もしくはロゴテキストが出力されます。

{ContactPageURL} お問い合わせページのURL

{PrivacyPageURL} プライバシーポリシーページのURL

{LawPageURL} 特商法ページのURL

{BASEMenuTag} BASEメニューのタグ。カートへのリンクとBASEへのリンクがアイコンで表示されます。

{ContactContentsTag} お問い合わせページのコンテンツのタグ

{PrivacyContentsTag} プライバシーポリシーページのコンテンツのタグ

{LawContentsTag} 特商法ページのコンテンツのタグ

{ItemAttentionTag} 商品ページの注意文のタグ

{IllegalReportTag} 商品ページの通報するのタグ

まとめ

ちょっとずつ勉強していきましょう。

第一回目はこちら↓

サイトの構成は全部で3段階ある│BASEデザインカスタマイズの勉強会記録(1)
BASEのデザインのテンプレートを勉強したものをアウトプットしています。 サイトの構成は全部で3段階である サイトのページには全部で3つの段階があります。ヘッダー、ボデイ、フッターです。ヘッダーは<header></h...
BASEの使い方/カスタマイズ
スポンサーリンク



鹿丸雑貨店
タイトルとURLをコピーしました