• プレミアム
  • ビジネス
  • フリー
  • パソコン
  • スマートフォン

独自デザイントップ

独自デザイン「ベーシックモード」の設定画面を一覧で確認することができます。
HTMLと各画面ごとに利用できる独自変数タグを使って自由にショップのデザインをすることができます。
各画面に記載のないタグは、別の画面に入力しても反映されません。

2019年3月28日に追加された、新たなデザイン編集機能「クリエイターモード編集画面」へ切り替えることができます。
また、利用モードによってメニュー画面は以下のように表示されます。

「ベーシックモード適用中」の場合

ベーシックモード
  • 1 独自デザイン・カスタマイズテンプレート・デザインテンプレートを利用中の場合「ベーシックモード適用中」と表示されます。
  • 2編集画面を切り替えることができます。「クリエイターモード編集画面へ」切り替えたい場合はクリックします。
    (デザインの適用は切り替わりません)
  • 3「この画面のデザインをショップに反映する」とベーシックモードで設定されているデザインを適用します。

「クリエイターモード適用中」の場合

クリエイターモード
  • 1クリエイターモードのテンプレートを利用中の場合「クリエイターモード適用中」と表示されます。
  • 2編集画面を切り替えることができます。「ベーシックモード編集画面へ」切り替えたい場合はクリックします。
    (デザインの適用は切り替わりません)

独自デザイン「ベーシックモード」トップ画面の説明

「デザイン設定画面一覧」にあるボタンをクリックすると各設定画面に移ります。

独自デザイン一括保存

各画面のバックアップ機能について

各画面の「HTML入力エディタ右下」にバックアップボタンがあります。

各画面のバックアップ機能について
  • 「バックアップをとる」をクリックすると、現在の編集内容をバックアップデータとして保存することができます。
    バックアップ保存されるとバックアップ日時が表示されます。
    バックアップデータ保持件数は、1件のみのため、既存のバックアップデータを上書き更新します。
  • 「バックアップを読み込む」をクリックするとバックアップデータを読み込みます。
    編集中の内容を破棄して、入力欄に表示します。

独自デザインとは

独自デザインは、ショップのデザインを決定するテンプレートと、 オリジナルで作成したデザインの切り替えをおこなうことで、ショップに適用します。

独自デザイン

HTMLでページをデザインする

ショップの一部を除くページのHTMLは、以下のような構成になっています。
各メニューに部品として登録していただくことで、自動的にページが出力されます。

HTMLでページをデザインする
  • 全体のレイアウトはtableが設定されています。
  • ページの幅は800pxです。
  • 幅を変更するには、CSSをご利用ください。
HTMLバージョン HTML4.01準拠
HTML 1.0 DTD (HTML 1.0用のDOCTYPEなし)のDOCTYPE宣言を指定しております。
文字コード EUC-JP
PHP、CGI等 ご利用いただけません
独自デザイン

※独自デザインできないページは、以下のメニューから設定することができます。

※会社概要ページなど

※ログインページなど

※注文画面ページ

運営ノウハウ集

■無料ツール

オススメ!無料のHTMLエディタ!5選!

全部無料!バナーや商品画像をお手軽に作れる画像編集ツール5選!

■お困りの際

【修正した画像が変わらない…】ブラウザ別!キャッシュを削除する方法!

■HTML・CSS初心者向け

【初めてのHTML/CSS】まずは基本のタグを使ってマークアップしよう!

【初めてのHTML/CSS】CSS(スタイルシート)の基本の書き方と「id/class」について

【初めてのHTML/CSS】CSS(スタイルシート)の優先順位を覚えておこう!

かんたん便利なCSS(スタイルシート)の書き方!

CSSの指定が効かない!? 考えられる原因6つ

コーディングって何?初心者向けのコーディング基礎知識

■リンク

【資料ダウンロードなどに使える】PDFファイルにリンクさせる方法!

■画像編集初心者向け

【初心者向け】商品登録に最適!商品画像を”正方形”にしたい(ペイント利用)

【初心者向け】商品画像を縮小(200KB以下に)したい!”無料” で使える画像リサイズツール3選

画像編集どうやるの?HTML/CSSも分からない・・。【ネットショップ初心者必見】まずはこれをチェック!

■独自タグや機能について

気を付けたい!独自変数タグの書き方3つのポイント!

独自デザインを編集するその前に! “必ず” 知っておきたい4つのこと

独自デザインバックアップしてますか?!

うっかりソースを消しちゃった!そんな場合に便利なテンプレートの初期値を確認する方法

レスポンシブデザインできますか?

■レイアウト・応用

jQuery(JavaScript)を設置したい

バナーを同じ間隔で横に並べて表示したい!

「list-style」を指定しても反映しない場合の対処方法

【サイズ表などに最適】tableタグを使った表の作り方と、カスタマイズ方法

独自デザインに慣れてきたからこそ知っておきたい、ワンランク上のカスタマイズ5選!

■レイアウト・テンプレ

緑色のパーツ(ボタンやテキスト)を好きな色に変更する方法!(対象テンプレート: ENKEL)

■レイアウト全体

ショップの背景色を設定!ショップの両端に色や画像を表示したい

ダイナミックに商品を演出できる!「1カラムレイアウト」のショップデザインにしたい

ショップページ全体を真ん中に表示したい(センタリング)

ショップページの幅を広くしたい

メニューを右側に表示したい

ショップページを3カラムにしたい(トップページのみ編)

ショップページを3カラムにしたい(全ページ編)