2012年7月25日水曜日

ショップできすぎくんの落とし穴

以前の記事「ショップできすぎくんへオリジナルCSSを適用する方法」に意外な(?)落とし穴がありました。
しかも、原因がなかなか分からず、長時間ハマってしまいました・・(泣)

実は、ショップできすぎくんの「ショップデザイン設定」内で設定する「見出しの表示設定」は、CSSファイルとして設定されているのではなく、HTML内に<style>タグとして設定されていました。
全部を確認していませんが、おそらくショップできすぎくんの中から自分で設定する文字色や背景色は全て<style>タグ内に配置されています。
<style>タグ内に配置されているということは、当然CSSファイルよりもスタイルの適用優先順位が高いので、オリジナルCSSファイルの設定が反映されません。

解決策としては、まずショップできすぎくん内で設定できる物は全てショップできすぎくん内で行なって、その他のものをCSSファイルを使って設定します。
後々の可読性が悪くなるので、私はこういうやり方は嫌いなのですが、仕方がない・・・(泣)

さらに、ショップできすぎくん内で設定できないのに、<style>タグ内で設定されているスタイルは、CSSファイル内に「!important」を付けて設定することで優先順位をあげます。
私が気がついたものでは<h2>タグの「border」スタイルが「none」になってました。「border」を設定する必要がある場合は、次のように書く必要があります。

「border solid ! important」

これで、なんとかオリジナルCSSを適用することができます。
でも、<style>タグの中を細かくチェックする必要があるので、少々手間がかかりますが・・・。

今回、私が行ったのは、<h2>タグになっている見出し部分の変更です。

(例)


これは見出しです。



これに変更しました。

たったこれだけに、1時間以上かけてしまった・・・(泣)





CSS3デザインブック 仕事で絶対に使うプロのテクニック
by カエレバ

0 件のコメント:

コメントを投稿