カラーミーショップには無料版・有料版と様々なテンプレートが用意されています。
無料版の中でレスポンシブ対応でシンプルなデザインで人気の「Bit」のカスタマイズ方法を記載していきます。
今回はロゴのカスタマイズ方法です。
ロゴのカスタマイズ
お店によってロゴの大きさは違いますよね。
お店にあったロゴになるようにカスタマイズをしていきましょう。
まずはお店のロゴを用意しましょう。
Bitに使用されているロゴはサイズが幅320px×高さ100pxです。
このロゴに近いサイズのロゴを用意したほうがデザインを崩さずに仕上がると思います。
今回は当サイトのロゴを使用してカスタマイズをしていきます。
当サイトのロゴのサイズは幅232px×高さ22pxです。
一番簡単なカスタマイズの方法
カラーミーショップの上部メニューの「ショップ作成」から「ショップ情報」を選択してください。
ショップロゴ画像の「OFF」ボタンをクリックして、「ON」に変更してください。
「httpモード」と「httpsモード」の違いは「httpモード」は通常のページで表示されるロゴです。
「httpsモード」はお客様がお届け先など個人情報を入れるページに表示されるロゴです。
特に気にしないで同じロゴを使用して頂ければ良いと思います。
参照を押して、ご自身のロゴのデータファイルを選択してください。
ロゴのデータファイルを選ぶと「参照」の右側にファイル名が表示されます。
（ファイル名はご自身が選択したファイル名になります。）
画面下の「更新」をクリックして完了です。
これでロゴが変更されました。
SEOを意識したカスタマイズの方法
上記の方法だと画像データと読み込んでロゴを表示します。
SEOを優位にするためには画像データよりテキストデータのほうがオススメです。
設定が少し面倒ですけどSEOを意識したロゴデータに変更してみましょう。
ただし、「httpsモード」は上記の方法でしか変更できないので、「httpsモード」は上記の方法で設定してください。
カラーミーショップの上部メニューの「ショップ作成」から「デザイン」を選択してください。
「デザイン編集」をクリックしてください。
「共通」の「HTML/CSS編集」をクリックしてください。
表示されたHTMLとCSSなどをTeraPadなどのテキストエディタにコピー＆ペーストしてください。
ここからはHTMLとCSSの編集になります。
HTMLの編集
<h1 id="header-logo" class="shop-name header-link"><a href="<{$home_url}>"><{$logo}></a></h1>
上記の部分を探してください。（初期状態でしたら65行目になります。）
この「<{$logo}>」部分を変更します。
変更後がこちら
<h1 id="header-logo" class="shop-name header-link"><a href="<{$home_url}>">ショップ名;</a></h1>
ショップ名のところにお店の名前を入れてください。
この状態でショップを表示すると以下のようになります。
テキストとしてお店の名前が表示されていると思います。
これではせっかくのロゴの意味がありませんよね。ここからこのテキストを画像のロゴに変更する作業をします。
CSSの編集
ここからはCSSの編集をしていきます。
/* header logo */
.shop-name {
clear: both;
margin: 2em 0;
text-align: center;
font-size: 24px;
}
上記の部分を探してください。（初期状態でしたら310行目になります。）
この部分を変更していきます。
.shop-name {
clear: both;
margin: 2em auto;
width: 232px;
height: 22px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.shop-name a {
width: 232px;
height: 22px;
background: url(ロゴ画像のURL);
display: block;
}
上記のように変更していきます。
「width」と「height」が２箇所ずつあります。こちらはご自身のロゴのサイズを入力してください。
ロゴのURLは「一番簡単なカスタマイズの方法」で画像を設定した場合、画像のファイルを入力したページに移動するとロゴが表示されています。
そのロゴを右クリックして「画像のURLをコピー」などでURLを調べてください。
この方法でHTMLにはテキストを入力してCSSで画像を呼び出すことができました。
普通に設定するよりもSEOに優位に設定することができました。
ショップの名前もSEOに強くする
ショップの名前にもキーワードを必ず設定してください。
例えば「ラブリーラブリー」というショップ名では上記の設定をしてもあまり意味がありません。
商品に関連するキーワードを加えたショップ名「カラーミーショップのカスタマイズならラブリーラブリー」とショップ名を付けるようにしてください。
ショップ名は基本的には全ページに表示されます。
ですので最も気を使ってショップ名を考えてください。