はてB!PinterestFeedlyBASEテーマカスタマイズに必要な独自タグの使い方を解説。BASEでは値(ショップ名など)の出力や商品のループ表示にWordpressで使われているような独自タグを使います。ここでは効率よくテーマ開発を進めるための、独自タグの基本的な使い方をまとめています。独自タグは変数として使うものとブロックとして使うものの2通りがあります。使えるタグはドキュメントに掲載されているので、どんな値が出力されるのかなどを確認できます。変数タグは、{BASEMenuTag}のように単独で記述し、値を直接表示することができます。ページのリンクやショップの情報などがあります。-->{ShopName}ブロックタグの使い方ブロックはループや現在のページの判別(if文)で使用します。ループは商品一覧や関連商品、ifブロックは現在のページや商品の有無を判別できます。ブロックタグでは開始タグと閉じタグが必要です。{AppsItemLabelTag}{/block:AppsItemLabel}タグを使ったコードサンプルではタグを使ったコンテンツ表示の例をいくつか紹介します。ブロックタグでループを作り、変数タグで値を出力するだけです。ページのタグは{block:ItemPage}で囲み、商品用の変数タグで情報を表示します。{/block:AppsReview}{/block:ItemPage}カテゴリ一覧グルーバルメニューやサイドバーに表示するカテゴリ一覧は第2階層までの仕様となっているようです。表示方法は動的に表示するものと、HTMLタグをカスタマイズできるタイプの2種類。HTMLカスタマイズできる方はHTMLタグやclass名を自由に変更できます。href="{AppsItemCategoryMediumCategoryPageURL}">{AppsItemCategoryMediumCategoryName}</a></li>{/block:AppsItemCategoryMediumCategories}</ul></li>{/block:AppsItemCategoryCategories}</ul>{/block:AppsItemCategory}パンくずリストパンくずリストは動的に出力されるものをそのまま使用します。カテゴリページで表示できます。{block:AppsItemCategory}{block:IndexPageCategory}{BreadcrumbTag}{/block:AppsItemCategory}{/block:IndexPageCategory}まとめBASEはheadタグも含めていじれるのでけっこう自由度高いのが特徴です。CSSだけならそれほどでもないんですが、各ページのHTMLも含めてカスタマイズしようと思うとタグの使い方をしっかり覚える必要あり。商品ページは使えるタグが多くてけっこうややこしいですね。独自タグだけでなく、colorBoxやbxSliderといったjQueryプラグインも絡んでるので、カスタマイズする場合は難易度高めです。WebデザイナーフリーランスWebデザイナー。レスポンシブサイトの作成、Wordpress、EC-CUBEやカラーミー、BASEなどのネットショップのデザイン・構築を担当。EC-CUBE4プラグイン「UICube」開発者。このブログでは初心者がつまずきやすいポイントや、制作で得た知識をわかりやすく解説します。2018Web制作のことでお困りですか?・急に案件が増えて手伝ってくれる人を探している・担当していたデザイナーがやめてしまった・新しくホームページを作りたいこのようなことでお困りでしたら、お気軽にご相談ください。デザインからコーディング、WordpressなどのCMSの構築まで対応させていただきます。homupedia.com。