ショップ名表示のダサさを克服したい!makeshopカスタマイズ。

makeshopでネットショップを構築するにあたり、「ショップ名」を入力するところがあります。

2014-08-28_07h58_27

 

ショップ名に表示は欠かせないので、当然のように入力しました。

しかし、入力後ホームページを見てビックリ!

2014-08-28_22h39_45

 

ショップロゴの上に、太字でドデンと居座っています。

これではあまりにもロゴとのバランスが悪すぎます

ただでさえデザイン未完成なサイトが、さらにダサくなっちゃうじゃないですか~…

あんまりだよう(涙)

031937

もちろん、ショップ名を入力しなければ表示されません。

しかし、SEO的にもショップ名の設定は最重要なところ。

はずす訳には参りません。

設定は必要だけど、見た目をちょっとなんとかしたい。。。

助けてドラえも~ん!

ということで、カスタマイズしてみることにしました★

265x211x9f4e81761a4ee245b1735ddd

 

カスタマイズ方法を考える

ショップ名は入力したいけど、表示はしたくない。

どうするかな~とgoogle検索しましたが、どんぴしゃな情報が見つからず。

makeshopってすごい数の企業が利用しているはずなのに、ネットでの情報が少なくてビックリします。

やっぱり、トーシロー(死語)じゃ分からんのかね(鼻ほじ)と思っていると、脳裏にふとベーコン師匠の顔が浮かびました。

24256882←ハリウッドを代表する爽やか系悪役。※ボンジョビ閣下ではありません。

なんでこんな時にベーコン師匠が…

そのとき、ふいにひらめきました。

そうや!そうや!トムソーヤ!(ゲシュタルト崩壊)

インビジブったらええねん!

インビジブルとは、透明人間になったベーコン師匠が、あーんなことやこーんなことや、殿、ご乱心を!な映画でした。

つまり、存在するけど、見えない「透明」な存在に出来れば、問題は解決すると思い立ちました。

 

カスタマイズ手順

方針が決まれば後は簡単です。

順に見ていきましょう。

設定は独自デザインから

まず、「独自デザイン」に入ります。

2014-08-28_07h59_02

 

問題の箇所は、この「上段メニュー管理」にあります。

2014-08-28_07h59_10

 

内部はこの様に記述されていました。

2014-08-28_07h59_30

ここの[SHOP NAME]というところが、最初に設定したショップ名を表示するタグです。

2014-08-28_07h59_30

h1で囲まれていることからも、やはり最重要箇所であることに間違いはありません。

この文字を「透明」にするためにはどうするか。

透明にすることは出来ませんが、見えなくすることは出来ます。

文字の色を、サイトの背景色と同じにするのです。

文字色の変更

makeshopでは、入力支援のツールがあり、変更は容易です。

[SHOP_NAME]を選択し、テキストカラーで必要な色を指定してあげれば設定できます。

2014-08-28_08h00_00

当サイトの場合、背景が白なので、白を選択します。

ここに載っている色以外でも、web上のカラーコードを指定すれば変更できるはずです。

そうすると、この様になりました。

2014-08-28_08h00_33 [SHOP_NAME]が<span style ~> </span>で囲まれています。

これで、ショップ名はカラーコードFFFFFF、つまり真っ白な文字で表示されるはずです。

表示確認

実際に確認してみると、ちゃんと見えなくなっていました。

前後で画像を並べてみると、一目瞭然です。

 

BEFORE

2014-08-28_07h58_45

AFTER

2014-08-28_08h01_34

 

おまけ

 

 

これで目的は達成しました。

おそらく、CSSを使うなりして、もっと上手い方法があるはずです。

私はその方法が分からなかったので、原始的な方法で対処しました。

こんなことだと先が思いやられますが、一歩ずつでも改良していければと思います。

日々思考錯誤しながら取り組んでおりますので、よろしければ時々サイトにご訪問ください。

アクセサリーショップ Happy Yuki

もちろん、品物も良いですよf(^^)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です