クラフトカート
デザイン編集マニュアル

株式会社クロフトクラフト
2023/07/01

内容
1.

各デザイン編集の解説について .................................................................. - 2 1.1. 画面内ヘルプウィンドウについて .............................................................. - 2 1.2. ツールチップヘルプについて .................................................................... - 2 -

2.

3.

4.

5.

ファイル管理について .............................................................................. - 3 2.1.

ファイル管理のフォルダ構成 ................................................................. - 3 -2.2.

ファイル管理の使い方について .............................................................. - 4 -2.3.

ファイル管理に関わる FAQ.................................................................. - 4 -デザインテンプレートについて ...................................................................... - 5 3.1.

各デザインメニューについて .................................................................. - 5 -3.2.

ページ設定について ......................................................................... - 6 -3.3.

テンプレート編集について ................................................................... - 7 -3.4.

クラフトカートタグについて .................................................................... - 9 -ランディングページ管理について .................................................................. - 10 4.1.

共通ヘッド部について....................................................................... - 10 -4.2.

各ランディングページの設定について ....................................................... - 10 -4.3.

ランディングページ管理に関わる FAQ ..................................................... - 11 -PC デフォルトテンプレートについて ............................................................... - 13 5.1.

基本の読み込みについて .................................................................. - 13 -5.2.

CSS について ............................................................................... - 14 -5.3.

head 内用（ブロック）を使用していないウィンドウについて .............................. - 15 -5.4.

デフォルトテンプレートに関わる FAQ ....................................................... - 15 -Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

-1-1. 各デザイン編集の解説について
本マニュアルでは、デザインを編集する際の流れについてのみ解説をおこないます。
各メニューの機能詳細につきましては、管理画面上の「画面内ヘルプウィンドウ」や「ツールチップヘルプ」をご参照ください。

1.1. 画面内ヘルプウィンドウについて各メニュー内タイトル部の「？」をクリックすると、左部に画面内ヘルプが表示されます。
また画面内ヘルプ上部の「×」もしくは「？」をクリックすると、画面内ヘルプを閉じる事ができます。

1.2. ツールチップヘルプについて各項目のラベル部分にマウスを合わせると、ツールチップヘルプが表示されます。
Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

-2-

2. ファイル管理について
画像や JavaScript 等、様々なフォーマットのファイルを管理するには『コンテンツ＞ファイル』よりファイル管理メニューを呼び出します。
ファイル管理ではフォルダーに対応したファイルのアップロード・ダウンロード・表示・削除等の全体的な管理を行う事ができます。
※日本語のファイル名や、許可されていない拡張子のファイルはアップロードする事ができません。
※プログラムファイル等は、アップロードが出来ても動作しません。

2.1.

ファイル管理のフォルダ構成

ファイル管理で編集できるものは下記になります。

■ショップファイル
転送したファイルは https://独自ドメイン/contents/ex/ 以下のパスとして対応しています。
（例）ファイル管理で/img/に 001.jpg をアップロードした場合、HTML では<img src=”/contents/ex/img/001.jpg”>で画像が表示されます。
■テンプレート『デザイン』メニューから編集できるテンプレートをファイルとして扱います。
本メニューでテンプレートを編集した場合は『デザイン＞キャッシュ削除』を行うまで反映されません。
また SFTP からの更新はテンプレート編集メニューの更新履歴にも対応していませんので、テンプレートの編集は『デザイン』メニューより編集する事を推奨しています。
Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

-3-※別途お申し込みいただける SFTP 接続（有償オプション）では、ファイルアップロード転送都度に『デザイン＞キャッシュ削除』が必要です。

2.2.

ファイル管理の使い方について■フォルダツリーブロック
左部のフォルダツリーブロックでは、フォルダをクリックする事によりフォルダを展開し、中に入っているフォルダやファイルを表示する事ができます。
■フォルダブロック
右部のフォルダブロックでは、フォルダ内に含まれているフォルダやファイルの一覧を表示します。

上部のアイコンより各種操作を行う事ができます。

アイコンにマウスを合わせると、メニューの説明が表示されます。

2.3.

ファイル管理に関わる FAQ■複数のファイルを一度にアップロードするには？
『ファイルまたはフォルダをここにドロップ』に複数ファイルをドロップする事で一括アップロードが可能です。また『ファイルアップロード』からでも複数ファイルを一度に選択してアップロードする事が可能です。

■sitemap を設置したい場合は？
動的出力の sitemap はトップ階層に sitemap.php という名前で自動生成されています。
例）https://ドメイン名/sitemap.php

Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

-4-

3. デザインテンプレートについて
クラフトカートはオンラインショップ全体を１つの独自ドメインで管理する CMS（コンテンツマネージメントシステム）を備えた EC システムです。
購入フローを含め全てのページを管理しながら、全てのページについて『デザイン』メニューよりデザインテンプレートを編集する事が可能です。

3.1.

各デザインメニューについて『デザイン』メニューは下記のメニューから成り立っています。

■ページ設定各ページのテンプレート編集と、ブロックを使ったレイアウトを編集する事ができます。
■ページタイトル設定
各ページで自動出力されるタイトルのパターンを設定する事ができます。
■CSS 設定利用する CSS ファイルの編集と読み込む順番を設定する事ができます。
読み込むファイルと順番の設定は【有効にする CSS ファイルの選択】をクリックして設定してください。
■フォーム設定
会員登録やお届け先登録などのフォーム画面に対して、各項目の表示/非表示や並び替えを行う事ができます。また『会員＞追加項目管理』で追加した項目に対しても同様に設定が行えます。

Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

-5-

■テーマ管理フロント（お客様用画面）側のデザイン一式を一つのテーマとして、編集や切り替えができます。
テーマの中にはデザインメニューの「ページ設定」「ページタイトル設定」「CSS 設定」と、コンテンツメニューの「ランディングページ管理」が含まれます。
■テンプレートキャッシュの削除
ファイル管理や SFTP からテンプレートファイルをアップロードした場合は、本メニューでキャッシュを削除する事でフロント側に内容が反映されます。

3.2.

ページ設定について『デザイン＞ページ設定』では下記の設定を行う事ができます。

① 「PC」「スマートフォン」
PC 版とスマートフォン版の、レイアウトやテンプレート編集画面を切り替えます。
スマートフォンのボタンは『詳細設定＞デザイン＞スマホサイト利用』が有効になっている場合のみ利用できます。デフォルトは無効で、PC 版テンプレートをレスポンシブデザインとしてスマートフォンでも利用します。
② 「レイアウト」「レイアウトを編集」
ブロックを使ったレイアウトの配置を設定する事ができます。
Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

-6-

TOP ページのレイアウト編集中に「全ページ」チェックを入れるとサイト全体にブロックが自動配置されます。また「除外」にチェックを入れると、そのページのみチェックを付けたブロックが非表示になります。
③ 「テンプレート」「テンプレートを編集」「ブロックの編集アイコン」
各種ページやブロックのテンプレートを直接編集する事ができます。
④ 「ブロックを新規作成」「未配置ブロック」
レイアウト編集で使用する「ブロック」テンプレートを新規に作成できます。
下記のブロックは特殊ブロックとなっています。
・お客様情報入力フォーム：会員登録などのお客様情報入力画面において共通で使用されるブロックです。レイアウト内に配置して使用するとエラーになります。
・水色背景のブロック：特定のページのみレイアウト配置できるブロックです。
⑤ 「ページを新規作成」
新規にユーザーページ（フリーページ）を作成する事ができます。
作成したユーザーページは『編集可能ページ一覧』で「ユーザーページ」のタブをクリックする事でレイアウトやテンプレートの編集リンクが表示されます。

3.3.

テンプレート編集について各ページのテンプレート編集では下記の編集を行う事ができます。
■状態
公開/非公開が設定可能で、非公開に設定するとページを表示した時にエラーになります。
■名称
一部標準ページやユーザーページでは名称（ページタイトル）を設定する事ができます。
■URL
ユーザーページではファイル名を設定する事ができます。（フォルダー変更不可）■各種メタタグの編集
author、description、keywords、robots などを設定できます。
■メモ（更新履歴用）
テンプレートの更新履歴に対して編集者のメモを残す事ができます。

Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

-7-

■共通ヘッダー/フッターを使用する『デザイン＞レイアウト』の『共通ヘッダー部』『共通フッター部』で設定したテンプレートを使用するかどうかを設定できます。
■テンプレート編集フォーム（テキストエリア）
テンプレート編集フォームに直接 HTML やクラフトカートタグを使ってテンプレートを編集する事ができます。
右上の「フルサイズ表示」をクリックすると全画面での編集モードに切り替えが可能です。また「Tab キー」によるタブ入力をサポートしています。
■更新履歴
テンプレートを保存する度に更新履歴に内容を保存しており、日付をクリックする事でその日付に保存されたテンプレートを呼び出す事が可能です。
また『保護』ボタンをクリックすると「保護履歴」に残り古いテンプレートでも呼び出す事ができるようになり、『デフォルトテンプレートを読み込む』をクリックするとシステム標準のテンプレートを読み込むことができます。
■利用可能タグ
各テンプレートで利用できる『クラフトカート』タグが確認できます。各ページによって使用できるクラフトカー
トタグは変わってきますので、ここに記載されていないクラフトカートタグは登録時にエラーになります。

Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

-8-

3.4.

クラフトカートタグについて『クラフトカートタグ』は、システム側で用意している情報をページ表示のタイミングで呼び出して表示するものです。各クラフトカートタグがどのような動作を行うのかは『利用可能タグ』ボタンよりご確認ください。
※ブロックの編集画面ではブロックを設置するページが明確ではない為、登録時にはエラーにならず表示時にエラーになります。編集後は必ず表示テストを行う等、設定にはご注意ください。
■クラフトカートタグのフォーマット
クラフトカートタグは必ず『<!--{』で開始され『}-->』で終了します。
・<!--{xxx}-->：システムで用意された情報を表示するタグ
・<!--{xxx}-->～<!--{/xxx}-->： ページを表示した時の状況に応じて『～』内を表示するか否か動作が変わるブロックになっています。多くのタグでは冒頭に「section」の文字が付いています。
・<!--{* xxx *}-->：HTML のコメントと違い出力ソース上にも出力されないコメントを記載できます。

Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

-9-

4. ランディングページ管理についてランディングページ管理（※）は、共通のサイト構造を使わずにページを構築する事ができます。
キャンペーンに最適化した内容などのページ等を登録し、通常の商品詳細ページよりも強力にキャンペーンを行うことが可能となります。
※「ランディングページ管理」はライトプランではオプションです。

4.1.

共通ヘッド部について各ランディングページの設定で「共通のヘッダーを使用する」にチェックしてあるランディングページにおいて、ここで設定した内容を head 要素内に追加で挿入します。

4.2.

各ランディングページの設定について各ランディングページでは下記の設定を行う事ができます。
■商品 ID
ラインディングページで紹介するメインの商品 ID を設定してください。
ここで設定する商品 ID の商品は「公開」されている商品の必要があります。
特に商品を紹介するページでない場合は、常に公開されている商品 ID を設定してください。
■名称
ランディングページのタイトルや管理画面での名称を設定してください。
■URL
ページ URL のファイル名部分を設定します。
『詳細設定＞デザイン＞スマホサイト利用』を「有効」に設定の場合で、アクセスされるデバイスが決まっていない場合は、「PC」「スマートフォン」の URL 設定を同じファイル名とし、両デバイスに最適化されたページを作成してください。両デバイス用のページが存在しない場合は「PC」ページが代替として表示されます。
■各種メタタグの編集
description、keywords などを設定できます。
■メモ（更新履歴用）
テンプレートの更新履歴に対して編集者のメモを残す事ができます。

Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

- 10 -

■サイト構造を利用する
ユーザーページと同じように<body>～</body>の中身だけをテンプレート設定したい場合にチェックを入れてください。チェックを入れると「共通の CSS を使用する」「共通のヘッダーを使用する」「共通のフッターを使用する」の３つの設定済みデザインを使用できます。
また『コンテンツ＞ランディングページ管理＞共通ヘッド部』で設定した内容も使用できます。
チェックを入れない場合は<html>～</html>全体を記述する必要があります。
■更新履歴
テンプレートを保存する度に更新履歴に内容を保存しており、日付をクリックする事でその日付に保存されたテンプレートを呼び出す事が可能です。
また『保護』ボタンをクリックすると「保護履歴」に残り古いテンプレートでも呼び出す事ができるようになり、『デフォルトテンプレートを読み込む』をクリックするとシステム標準のテンプレートを読み込むことができます。
■利用可能タグ
各テンプレートで利用できる『クラフトカート』タグが確認できます。各ページによって使用できるクラフトカー
トタグは変わってきますので、ここに記載されていないクラフトカートタグは登録時にエラーになります。

4.3.

ランディングページ管理に関わる FAQ■カゴに商品を入れる HTML はどう記述するのですか？
『商品＞商品一覧』に表示されている各商品の『タグ』をクリックして表示される HTML を参考に設定してください。

Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

- 11 -

■ランディングページの下部にフォームを設置して購入させる事はできますか？
既に登録されている「フォーム一体型サンプル」のコードを参考にフォームを設置してください。
フォームから購入された場合は会員登録と商品購入を同時に行う為、仮会員システム（『詳細設定＞
詳細機能＞会員時に仮会員確認メールを送信するか』）を有効にしている場合はご利用できません。

Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

- 12 -

5. PC デフォルトテンプレートについて各テンプレートの『更新履歴』ボタンから、『デフォルトテンプレートを読み込む』をクリックするとシステム標準のテンプレートをテキストエリアに読み込むことができます。
【ご注意】
本項は最新版のデフォルトテンプレート（PC）の内容に基づいて記載されています。
2023 年 7 月 1 日以前にご契約したショップのデフォルトテンプレートは下記 URL にアーカイブがございますので、旧デフォルトテンプレートを参考にしたい場合は URL よりダウンロードしてご使用ください。
https://www.craftcart.jp/contents/ex/help/craftcart_20230701.zip

デフォルトで設定されているテンプレートは下記の内容に基づいて構成されています。
5.1.
・

基本の読み込みについて
jquery.min の version3.6.1 を読み込んでいます。
※jquery のバージョン変更は『デザイン＞テーマ管理』から「現在の標準テーマ」に設定されているテーマの【タイトル】部分をクリックして変更できます。

・『デザイン＞PC＞head 内用（ブロック）や一部モーダルウィンドウ内では下記の設定を行っています。
・ viewport でレスポンシブの設定
・ BootstrapIcons 1.8.0 の読み込み
・ Bootstrap 4.6.2 の読み込み
・ Swiper 8 の読み込み

・『デザイン＞お客様情報入力フォーム（ブロック）では下記の読み込みを行っています。
・ jQuery ValidationEngine 2.6.4 の読み込み

読み込まれている各ライブラリの使用方法は公式ドキュメントや検索エンジンからの情報をご参考ください。

■参考・ BootstrapIcons 1.8.0：アイコン一覧、使用方法
https://icons.getbootstrap.jp/
・ Bootstrap 4.6.2：Components、Utilities に使用 class の説明あり
https://getbootstrap.jp/docs/4.5/getting-started/introduction/

Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

- 13 -

・ Swiper 8 ：公式
https://v8.swiperjs.com/
・ jQuery ValidationEngine 2.6.4：公式 github
https://github.com/posabsolute/jQuery-Validation-Engine

5.2.

CSS について■common.css
サイト全体で利用する CSS が定義されています。
■layout.css
自動出力されるレイアウトや、『デザイン＞レイアウト』で設定する共通部分やブロックなどで利用する CSSが定義されています。
■contents.css『デザイン＞ページ設定』の「標準ページ」で利用する CSS が定義されています。
■tool.css
外部から読み込んでいるライブラリで利用する CSS が定義されています。

Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

- 14 -

5.3.

head 内用（ブロック）を使用していないウィンドウについて下記のテンプレートは別ウィンドウ表示の為、「head 内用（ブロック）」を使用していません。
各ライブラリの読み込み等を変更したい場合は、下記テンプレートを直接編集してください。

テンプレート名

ファイル名

パスワードの再発行/forgot/index.tpl

パスワードの再発行(秘密の質問)/forgot/secret.tpl

パスワードの再発行(完了)/forgot/compete.tpl

MY ページ/お届け先追加・変更/mypage/delivery_addr.tpl

MY ページ/メール内容表示/mypage/mail_view.tpl

お客様の声(入力ページ)/products/review.tpl

お客様の声(確認ページ)/products/review_confirm.tpl

お客様の声(完了ページ)/products/review_complate.tpl

5.4.

デフォルトテンプレートに関わる FAQ■ボタンの色を変更したい場合は？
『デザイン＞CSS 設定＞common.css』の編集から、「BUTTON COLOR」項の各 btn で設定されているカラーコードを変更してください。
デフォルトテンプレートでは下記３種類のボタンパターンを利用しています。
・btn-primary：デフォルト黒背景、白文字・btn-secondary：デフォルト白背景、枠線あり、黒文字
・btn-tertiary：デフォルトグレー背景、白文字■隙間の調整を行いたいのですが？
CSS の margin、padding 以外に、HTML 側で Bootstrap の下記クラスを多用しています。
https://getbootstrap.jp/docs/4.5/utilities/spacing/

Copyright(c) 2018 CroftCraft INC. All Rights Reserved.

- 15 -