カラーミーショップにSEO Plusテンプレートを追加する手順

カラーミーカスタマイズ

この記事では、カラーミーSEO Plusテンプレートの初期設定について説明しています。

スポンサーリンク

デザインテンプレートを追加する

カラーミーショップでは、まずテンプレートを選択し、テンプレートを編集する形でショップページを作ります。

テンプレートには無料47種類・有料31種類(2020年5月18日時点)用意されており、料金プランに応じて10種類〜インストールすることができます。

カラーミーSEO Plusテンプレートの場合は、無料テンプレートのカラーミーキットをインストールした上で、購入いただいたテンプレートデータをコピー&ペーストで上書きしていく流れとなります。

カラーミーキット

テンプレートを複製することもできるので、デザインを変更したいときなどは複製テンプレートを作成・編集して、問題がなければ本番環境に移行させる、という手順が安全です。

カラーミーSEO Plusのインストール方法

1・カラーミーSEO Plusをダウンロード

カラーミーSEO Plusテンプレート」からご注文ください。
お支払いが完了すると、ダウンロード用リンクからデータをダウンロードします。(現在は以下の画面ではありません)

SEO+テンプレートのダウンロード画面

zipファイルですので解凍してください。フォルダの中身は以下のようになっています。

カラーミーSEOプラステンプレート

実際に使用するのは1・HTMLと、2・CSSのフォルダです。(3.Original-CSSは使用しませんが、カスタマイズ時の参考で入れてあります。) ReadMeは、使い方や注意書きを記した説明書です。

2・カラーミーキットをインストール

先述のとおり、カラーミーキットのテンプレートに上書きする為、カラーミーキットをインストールします(無料です)。

管理画面 > ショップ作成 > デザイン > テンプレート追加

無料テンプレートを一番下までスクロールすると「カラーミーキット(2カラム)」が登場しますので、「追加」。

カラーミーキットのインストール画面

テンプレート一覧画面

矢印の部分をクリックすると、テンプレートの編集画面にすすみます。

「利用する」をクリックすると、実際のショップページにテンプレートが適用されるのでご注意ください。

3・テンプレートを編集する

テンプレート名は変更できるので、間違えないように変更しておくことをおすすめします。

カラーミー テンプレート編集画面

文字色や背景などは、共通の「項目編集」から変更できます。

続いて、HTML・CSS編集をクリックして編集画面を開きます。カラーミーSEO Plusテンプレートを利用するために、枠線で囲った1〜8番のHTMLおよびCSSをダウンロードしたファイル内容に差し替えていく作業です。

編集作業見本

見本として、「共通」のHTML・CSSファイル編集を図解します。

HTML/CSS編集画面をひらくと、カラーミーキットのオリジナルコードが入っているので、右クリック「すべて選択」→削除します。

カラーミーショップ HTML編集
内容をいちど全て削除します

次に、ダウンロードしたSEO Plusの1_HTML」フォルダをひらきますと、番号順に8つのテンプレートが入っています。

SEO Plusテンプレート HTML編集フォルダ

番号が編集するページに対応していますので、「1・共通」の編集に使用するのは「1_common.tpl」です。1_common.tpl をテキストエディタでひらきます。(Wordやメモ帳など)

カラーミー テンプレートSEO plusのHTMLファイル

「すべて選択」し、全文コピーします。

カラーミーショップHTML編集画面

コピーした内容を、カラーミーショップのHTML編集に貼り付けます。

同様に「2_CSS」フォルダの、「1_common.min.css」を、CSS編集スペースに貼り付けます。

HTML 、CSS両方を貼り付けたら「保存」クリックで完了。

残りの「2・トップ」から「8・プライバシーポリシー」までも同じ作業を繰り返します。(8番のプライバシーポリシーにはCSSファイルは使用しません:空白のままでOK)

最後にプレビューで表示を確認し、問題がなければ初期設定は終了です。

カラーミーショップ対応テンプレート
カラーミーショップ専用テンプレートSEO Plus

カラーミーショップでご利用いただけるSEO対策済みテンプレートを販売しています。

リッチリザルト用の構造化データの自動生成、商品スライドの自動設置、内部リンクの最大化などSEOフレンドリーな構造となっています。

7月まで50%オフセール中。テンプレート利用にはデザイン編集(HTML操作など)が必要になりますので、操作が不安な方はご相談ください

SEO Plusデモページ
ミフネWEB
タイトルとURLをコピーしました