makeshopでネットショップを構築するにあたり、「ショップ名」を入力するところがあります。
ショップ名に表示は欠かせないので、当然のように入力しました。
しかし、入力後ホームページを見てビックリ！
ショップロゴの上に、太字でドデンと居座っています。
これではあまりにもロゴとのバランスが悪すぎます。
ただでさえデザイン未完成なサイトが、さらにダサくなっちゃうじゃないですか～…
あんまりだよう（涙）
もちろん、ショップ名を入力しなければ表示されません。
しかし、ＳＥＯ的にもショップ名の設定は最重要なところ。
はずす訳には参りません。
設定は必要だけど、見た目をちょっとなんとかしたい。。。
助けてドラえも～ん！
ということで、カスタマイズしてみることにしました★
カスタマイズ方法を考える
ショップ名は入力したいけど、表示はしたくない。
どうするかな～とgoogle検索しましたが、どんぴしゃな情報が見つからず。
makeshopってすごい数の企業が利用しているはずなのに、ネットでの情報が少なくてビックリします。
やっぱり、トーシロー（死語）じゃ分からんのかね（鼻ほじ）と思っていると、脳裏にふとベーコン師匠の顔が浮かびました。
←ハリウッドを代表する爽やか系悪役。※ボンジョビ閣下ではありません。
なんでこんな時にベーコン師匠が…
そのとき、ふいにひらめきました。
そうや！そうや！トムソーヤ！（ゲシュタルト崩壊）
インビジブったらええねん！
[amazonjs asin=”B003CNVPE2″ locale=”JP” title=”インビジブル Blu-ray”]インビジブルとは、透明人間になったベーコン師匠が、あーんなことやこーんなことや、殿、ご乱心を！な映画でした。
つまり、存在するけど、見えない「透明」な存在に出来れば、問題は解決すると思い立ちました。
カスタマイズ手順
方針が決まれば後は簡単です。
順に見ていきましょう。
設定は独自デザインから
まず、「独自デザイン」に入ります。
問題の箇所は、この「上段メニュー管理」にあります。
内部はこの様に記述されていました。
ここの[SHOP NAME]というところが、最初に設定したショップ名を表示するタグです。
h1で囲まれていることからも、やはり最重要箇所であることに間違いはありません。
この文字を「透明」にするためにはどうするか。
透明にすることは出来ませんが、見えなくすることは出来ます。
文字の色を、サイトの背景色と同じにするのです。
文字色の変更
makeshopでは、入力支援のツールがあり、変更は容易です。
[SHOP_NAME]を選択し、テキストカラーで必要な色を指定してあげれば設定できます。
当サイトの場合、背景が白なので、白を選択します。
ここに載っている色以外でも、web上のカラーコードを指定すれば変更できるはずです。
そうすると、この様になりました。
[SHOP_NAME]が<span style ～> </span>で囲まれています。
これで、ショップ名はカラーコードFFFFFF、つまり真っ白な文字で表示されるはずです。
表示確認
実際に確認してみると、ちゃんと見えなくなっていました。
前後で画像を並べてみると、一目瞭然です。
BEFORE
AFTER
おまけ
これで目的は達成しました。
おそらく、ＣＳＳを使うなりして、もっと上手い方法があるはずです。
私はその方法が分からなかったので、原始的な方法で対処しました。
こんなことだと先が思いやられますが、一歩ずつでも改良していければと思います。
日々思考錯誤しながら取り組んでおりますので、よろしければ時々サイトにご訪問ください。
もちろん、品物も良いですよf(^^)
