【BASE】デフォルトロゴを消したいときのカスタマイズ方法

先日、BASEでECサイトを開設する案件で、デザインのカスタマイズを担当しました。

そのときに気になったBASEのロゴについて書いていこうと思います！

BASEのロゴって消していいとかいな？

直接問い合わせてみよう！

ロゴの非表示は禁止！

結論からいうと、ロゴの非表示は禁止だそうです！

（表示箇所の変更などスタイルの変更はOK）

BASEでショップを開設するとデフォルトで右上にこのようなロゴが2つ配置されています。

HTMLを確認すると{BASEMenuTag}の独自タグで設置されており、このタグ自体を削除すると・・

しっかりと警告されて保存できないようになっています。

BASEのApps「HTML編集（無料）」を使い、display:none;を付ければ消えるには消えますが、禁止行為だそうなので注意が必要です！

対処方法はある？

BASEは、ロゴを非表示にするオプションを用意していますが月額500円・・

高くはないけど、せっかく無料で開設できるなら無料で済ませたいですよね。

完全に簡単に非表示にしたい！という方は、オプション（有料）を検討してみてください！

カスタマーサポートからの返答では、スタイルの変更は問題ないとのことだったので、デザインに影響ないようにCSSを書き換える方法を紹介していこうと思います。

※CSSを編集するためには「HTML編集（無料）」が必要です！

※<style>～</style>の中に記述してください。

スクロールについてこないようにする

#baseMenu {
    position: absolute;
    top: 5px; /*上からの位置*/
    right: 25px; /*右からの位置*/
}

デフォルトではposition: fixed;で画面に固定されているので、position: absolute;を記述することでスタイルの上書きができます。

表示する位置も調節できるので、右上以外にも配置できますよ！

透明度/サイズを調節する

#baseMenu{
    opacity: 0.1;
}

#baseMenu a{
    padding: 5px 5px 0 !important;
    border-radius: 15px !important;
}

#baseMenu img{
    width: 15px;
    height: 15px;    
}

透明度はopacityの0.1～1の間で自由に調節してください。

右の写真は、サイズを小さくして丸いアイコンにしてみました！

要素の後ろに配置する

#baseMenu {z-index: 0;}

デフォルトだと大きい数値が設定されていて、要素の上に表示されるのでz-indexを0に設定して、ロゴよりも上に表示させたい要素に、1～を設定してください。

まとめ

BASEのデフォルトロゴは、完全に非表示にするには月額500円かかりますが、

カスタマイズはApps「HTML編集（無料）」をインストールすれば簡単にできるので、

今回紹介したコードを調節しながらカスタマイズしてみてください♪

当ブログは、BASEのカスタマイズ方法を紹介していますが、直接のご依頼も受け付けています♪

こういうデザインにしたい！

試してみたけどできなかった・・

などの簡単な修正でしたらワンコインから受け付けていますので、TwitterのDMかお問い合わせフォームよりお気軽にご連絡ください＾＾

コピペで簡単にできるのでやってみてね～

最後まで読んでいただきありがとうございました！