カラーミーショップ|フリーページでのCSS編集方法

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

中川
カラーミーショップでフリーページでのCSS編集について知りたい
という方のために、カラーミーショップでフリーページでのCSS編集について解説をします。

この記事を読むことで、

  1. フリーページでのCSS編集方法がわかる
  2. 他にもHTMLでの編集方法も理解できる

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

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

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

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

それではカラーミーショップでフリーページでのCSS編集について解説していきます。

 

カラーミーショップフリーページでのCSS編集方法

カラーミーショップでは、フリーページでのCSS編集方法として、

「初級モード」と「上級モード」の2種類があります。

初心者では、CSS編集が難しい場合は「初級モード」を利用して

デザインの変更を行うといいでしょう。

ある程度慣れてきた方は、上級モードでCSSやHTMLを利用して、

自分好みのデザインにカスタマイズをしてみてください。

初級モード

初級モードでは、テンプレート内にフォトサイズや色の変更を行うことができます。

カラーミーショップの管理画面から「デザイン設定」をクリックすると、

利用中のテンプレートの情報を閲覧できます。

初級モードでの編集項目は以下の通りです。

• 共通
• お問合せ
• マイアカウント・会員ログイン
• 友達に教える
• メルマガ登録・解除
• レビュー

HTMLやCSSの知識が無くても編集できるので、手軽に編集ができるのが初級モードの魅力です。

上級モード

上級モードでは、HTMLやCSSの知識があり、編集できる人が扱えるモードです。

上級モードでは以下の内容が編集できます。

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

フリーページでのCSS編集をするには、

「ショップ作成」→「デザイン」→「テンプレート編集」で進むと編集可能です。

フリーページでは、CSSの他にJavaScript、Smartyも使用できます。

独自タグは、「共通」で使用できるもののみ使用可能です。

フリーページでのHTML挿入方法

HTMLもCSSと同様「初級モード」と「上級モード」での編集が可能です。

ここでは、HTMLを挿入するにあたり、最初にランディングページ(LP)を作成し、

そこにHTMLを挿入する方法を解説します。

ランディングページを作成

ランディングページは、広告をクリックすると表示されるページのことを言います。

このページでは、訴求内容を最初に考えます。

次に商品の紹介に注力するため、

リンクやヘッダー・フッター・サイドメニューを非表示にしなければいけません。

このときに使用するのは「Smartyの条件文」です。

使用しているテンプレートにもよりますが、

共通HTMLの既存のコードを<{else}>~<{/if}>で括って、

その上にif条件文とtrue時の処理を施します。

HTMLを挿入

フリーページを任意の場所で呼び出して、

お知らせ欄の近くやフリーページで書いたHTMLの下に挿入するといいでしょう。

共通HTMLは半角65,530文字までに文字数制限がありますが、

フリーページにHTMLを挿入することで、文字数制限がかからず自由に記載が可能です。

フリーページ編集画面で表示状態を「公開・メニュー非表示 」にして、

以下のコードを差し込みましょう。

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

カラーミーでデザインを編集し、お客様に喜ばれるサイトに

CSSやHTMLは初心者の内では、知識が乏しいため編集が難しいと思うかもしれません。

最初はテンプレート内でデザインの編集ができるので、

デザインの選択や背景色、文字色の選択を行いましょう。

運営を進めるにつれて少しずつ知識も身についてきます。

そこからCSSやHTMLの編集をして、オリジナルのサイトを作成し、

他のサイトと差別化を図りましょう。

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

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