カラーミーショップのカスタマイズ方法を初心者向けに解説

こんにちは。中川瞬(@shun01224)です。

中川
カラーミーショップでのサイト作成について知りたい
という方のために、カスタマイズ方法について解説をします。

この記事を読むことで、

  1. カラーミーショップでのカスタマイズ方法について理解できる
  2. テンプレートを使用したカスタマイズ方法がわかる
  3. カラーミショップでのHTML・CSS編集方法がわかる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それでは、初心者のためのカラーミーショップのカスタマイズ方法について解説していきます。

 

カラーミーショップのデザインカスタマイズ入門

カラーミーショップのデザインをカスタマイズするのは、

ワードプレスと使用しているタグが異なるため、最初はとても苦労するかもしれません。

慣れてくるとカスタマイズもしやすくなるので、特徴をつかんで上手く攻略していきましょう。

デザインカスタマイズ入門として、初心者でもやりやすい方法と慣れてきた方向けに

• カラーミーのテンプレートカスタマイズ
• フリーページ機能でトップページをカスタマイズ
• 初級モードと上級モード
• テンプレートで使える機能について

の4つに分けて解説します。

カラーミーのテンプレートカスタマイズ

テンプレート構造がワードプレスと異なるのは、

「テンプレートの削除ができない」「一部CSSしか編集できないページがある」の2点です。

CSSしか編集できないのは

• 決済
• お問い合わせ
• マイアカウント、会員ログイン
• 友だちに教える
• メルマガ登録、解除
• レビュー

のみです。

反対にHTMLとCSSが編集できるのは

• 共通ページ
• トップページ
• 商品一覧ページ
• 商品詳細ページ
• 特定商取引ページ
• 商品検索結果ページ
• 在庫、値段表
• プライバシーポリシー

となります。

CSSの編集ができないという方でも、

テンプレートの設定から色やデザインなどの簡単な編集ができるので、安心してください。

フリーページ機能でトップページをカスタマイズ

フリーページ機能を使ってトップページをカスタマイズすることが可能です。

ここでは、画像の大きさや背景色について触れます。

ショップ作成→デザインの順にクリック。

フリーページのボタン→新規作成ボタンをクリック。

フリーページの編集画面で、画像やテキストを使って作成します。

作成時、背景色を変えたい、ページに表示する画像の大きさを変えたい方は、

タグ一覧の左上にある「ソース」を押し、本文をソースに切り替えてください。

画像の大きさを変えたい方は、alt=””の後ろに半角スペースを空け、

style=”width:100%;と入力します。

以下のような形です。

<img style=”width: 100%;” src=”https://……shop-pro.jp/……jpg” alt=”” />

数字の部分を変更することで、画像の大きさが変わります。

お好みの大きさを、数字を変更して調整しましょう。

背景色や行間を変えたい方は

• background-color:#○○○○○○の○に色指定
• padding:○○pxの○にピクセル指定
• line-height:○と○に行間指定

のように変更して好みの設定にカスタマイズすることが可能です。

作成したページ名と内容を記入して保存をすれば完了します。

初級モードと上級モード

編集ページでは、初級モードと上級モードの2種類があります。

初級モード:テンプレートの文字色やサイズを設定可能
上級モード:HTML、CSSの編集設定可能

初級モードでは

• ページ背景色
• ページ背景画像
• フォント色(全体)
• リンク文字色(通常時)
• リンク文字色(マウスがあたっている時)

の5つの項目が出てきます。

それぞれの設定値を入力することで変更可能です。

上級モードでは、HTMLとCSSの編集画面が表示され、お好みにカスタマイズができます。

いきなり上級モードで編集をすると、画面が白くなり焦る可能性があります。

慣れないうちは初級モードで数値の入力で変更を行い、

慣れてきたら上級モードで少しずつ編集をしてみましょう。

テンプレートで使える機能について

カラーミーショップでは、ワードプレスと違いテンプレートごとに使える機能が確定しています。

テンプレートで使える機能は

• 会員機能
• ショップポイント
• 店長情報
• フリーページ
• カテゴリーとグループ
• カートの中身の表示
• 商品一覧の表示

の7点です。

テンプレートで使える機能が限定的ですが、

サイトに合わせてテンプレートを選び、お客様が喜んで買い物ができるようにチョイスしましょう。

カラーミーショップのHTML・CSS編集

カラーミーショップでは、ウェブサイトの作成で使われるCMSを使用しています。

HTMLやCSSの専門知識がなくても、テキストに直接入力したり、

画像をアップロードするだけでサイトの作成や変更ができるのがCMSの強みです。

次項でHTML・CSS編集との違いや初心者の学習内容について触れます。

HTML・CSS編集との違い

HTMLやCSSを独学で勉強しても、

カラーミーショップで表示されるHTMLやCSSの全部がわかるという訳ではありません。

なぜなら、カラーミーショップ特有のタグが含まれているからです。

この部分がHTML・CSS編集との違いと言えるでしょう。

カラーミーショップのHTMLの内容を見てみると、

半分がHTMLで残り半分が独自タグとSmarty構文です。

Smarty構文は、HTML・CSS入門の次に進むステップなので、

気にせずわからないところは調べながら進めていくことで、学習できます。

焦らず、コツコツと勉強しながら進めていってください。

初心者の学習方法

初心者の方には

• オンライン講座で学ぶ
• 入門書を読む

の2つをおすすめします。

オンライン講座では、無料で教えてくれるものもあります。

簡単なページ作成を実際に動かしながら作成している様子を見て、

沢山のことを学べるでしょう。

また、オンラインでは講師の指導だけでなく、

実際に自分の手で動かしながら作成するため、講師から教えられるインプットだけでなく、

自ら作成するアウトプットで効率よく学習できます。

入門書では、オンラインよりも幅広い知識をインプットできます。

ただインプットだけでは実践に生かされないので、

読んだら手を動かす癖をつけるようにしてみてください。

最初のうちは間違いだらけで苦戦しますが、何事も経験が大事なので、

覚えたことは直ぐに手を動かしてアウトプットするように心がけることが、

初心者の学習方法の1番の近道だと言えます。

カラーミーショップの独自タグについて

カラーミーショップにはSmartyを使用しています。

上記でも触れましたが、HTMLとCSSの次に学ぶ言語です。

カラーミーショップでは独自タグが使用されていますが、

以下のポイントを押さえておけば安心です。

• ページごとに使用できるタグが決まっている
• 値をそのまま出力するものとループ中に出力する2種類がある
• 自分でタグ作成ができない

独自タグは以下のページ名となります。

• 共通
• トップ
• 商品詳細
• 商品一覧
• 商品検索結果
• 商品一覧、商品検索結果共通
• 特定商取引法
• オプション
• プライバシーポリシー

これらはカラーミーショップで、独自タグの一覧で検索可能です。

独自タグの使い方は、タグ名を <{}> で挟み、<{ $shop_name }>と入力します。

商品一覧など、一覧データを出力するには「section」でループを作成します。

カラーミーショップでカスタマイズし、素敵なサイトを作成しましょう

カラーミーショップはCMSを使用してサイトを作成しているため、

HTMLやCSSを勉強しただけでは、全部が読み取れるものではありません。

Smarty構文を使用したカラーミー独自のタグがあるため、

初心者の方には読みづらい文字列だと感じるかもしれません。

最初は難しく感じると思いますが、わからない所を1つずつ調べて学習し、

学習したことを編集という形でアウトプットすることが大事です。

言語を学んで1つずつ積み上げながら、素敵なサイトを作成していきましょう。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。