こんにちは。emiです。
先日、BASEレイアウト変更の案件をいただき初めてカスタマイズしたので備忘録です。
今回のカスタマイズの内容
- レイアウトの変更：右にあるウィジェットを左にもってきたいなど。
- リンク付きの画像をページに表示したい。かつ、リンクと画像は自分で入れ替えられるようにしたい。→「デザインオプション」でのカスタマイズ
デザインオプション とは？
デザインオプション を追加することで、コーディングの知識がない方でも管理画面から簡単に画像やリンク、テキストなどの追加ができるようになります。
レイアウトや文字色の変更のみであればこの機能は必要ありません。
イメージ↓
カスタマイズの基礎知識
- 「HTML編集」AppsをインストールすることでHTMLを自由にカスタマイズできる。
- 画像、css、jsなどの外部ファイルを除いて1つのソースでショップ全体のページ（トップ、about、ブログなど）を構成。
→エディタで確認可能。各ページのコンテンツは{block:IndexPage}などどこのページであるか判別するタグがあるので確認可能。
カスタマイズ ステップ
1.管理画面のヘッダーメニューの「Apps」からAppsページへ移動し、「HTML編集」Appsをインストール。「Apps」ページから下方へスクロール移動すると「HTML編集」が見つかります。
2.＜初めて編集する場合＞「HTML編集」から、「新規作成」をクリックするとエディタが開く。＜既にテーマを作成している場合＞「エディタ</>」からエディタを開く。
3.コードのバックアップ！
エディタ内全てのコードをコピーして保存しておく。（元の状態に戻したいときに使用。）全てのページ（トップ、about、ブログなど）のコードがこのエディタに記載されている。
4.HTML/CSS編集
文字色の変更など軽微なものであれば、この画面で編集することで完了します。
css/jsファイル等はアップロードして読み込むことも可能ですが、cssの変更のみであれば<style></style>内に記載することで変更可能。
５.デザインオプション でのカスタマイズ
デザインオプションは、headタグ内に特殊なmetaタグを記入し、<body>内の任意の場所に出力用のタグを記入することで追加できます。
headタグ内に特殊なmetaタグを記入
<head>タグ内 {block:Hidden}{/block:Hidden}内にmetaタグを記載します。
<head>
・・・
{block:Hidden}
//ここに記載
//例
<meta name="text:Sample Text" content="" label="サンプル テキスト">
{/block:Hidden}
・・・
</head>デザインオプションには5種類（テキスト、画像、色、セレクトボックス、ON\OFF）あり、詳しくは公式サイトに記載があります。↓
デザインオプション · Developers
デザインオプションとしてテーマ独自の設定項目を設けることで、テーマの魅力として様々な特色を持たせることが可能です。
docs.thebase.in
<body>内の任意の場所に出力用のタグを記入
{block:text-Sample_Text}
{text:Sample Text}
//テーマ別設定の「サンプル テキスト」に入力があった場合のみ表示
{/block:text-Sample_Text}↓テーマ設定画面からテキストを追加できるようになる
6.バックアップと開発後のコードを保管
開発前後のバックアップは保管しましょう。
参考サイト
公式 BASE Developers
はじめに · Developers
## BASE Templateとは
docs.thebase.in
ブログ：基礎から詳しく解説されています。
BASEカスタマイズ 中級編 〜デザインオプション第0回〜 「基礎知識」｜Eコマース｜Shopifyブログ｜ネットショップ開設ならShopify専門のショップアイズへ｜大阪のホームページ制作会社アイズオブシー運営のShopify（ショッピファイ）専門の構築サービス
BASEカスタマイズ 中級編 〜デザインオプション第0回〜 「基礎知識」｜Eコマース｜Shopifyブログ｜ネットショップ開設ならShopify専門のショップアイズへ｜大阪のホームページ制作会社アイズオブシー運営のShopify（ショッピフ...
shopeyes.jp
