［テンプレートカスタマイズ］ Bitでロゴを変更する

カラーミーショップには無料版・有料版と様々なテンプレートが用意されています。

無料版の中でレスポンシブ対応でシンプルなデザインで人気の「Bit」のカスタマイズ方法を記載していきます。

今回はロゴのカスタマイズ方法です。

ロゴのカスタマイズ
一番簡単なカスタマイズの方法
SEOを意識したカスタマイズの方法
1. HTMLの編集
2. CSSの編集
ショップの名前もSEOに強くする

ロゴのカスタマイズ

お店によってロゴの大きさは違いますよね。
お店にあったロゴになるようにカスタマイズをしていきましょう。

まずはお店のロゴを用意しましょう。

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を調べてください。