[解決済み] 商品詳細の本文(2)
フォーラム › テンプレート(テーマ) › [解決済み] 商品詳細の本文(2)
-
投稿者投稿
-
2012年2月29日 2:04 PM #51353
meijix
参加者いつもお世話になっております。
商品詳細の本文に強弱をつけたいのですが、やり方がわかりません。Welcartというよりもスタイルシートの使い方とWordPressの使い方に関する内容ではありますが、もし可能なら教えて頂ければありがたく存じます。
現在、商品詳細の本文に、
<p style=”margin: 30px 0px 10px; text-align: left; font-size:15px”>この商品はお勧め品です</p>
という形で、文章の行間や文字の大きさを定めています。
この方法であると、確かに思った通りの形となります。
しかし、全ての行に対して要素を書き込まなければならないため、かなり煩雑な状態になってしまいます。
この部分を別のタグ(クラス?ID?)を使ってスタイルシートに書き出して、シンプルにしたいと思っています。例えばタグmnを使って、
<mn>この商品はお勧め品です</mn>
のような形です。
しかし、いろいろやってみたのですが、一部分は反映されるものの全てが反映されるところまでいきません。
例えば、商品詳細の本文に
<mn>この商品はお勧め品です</mn>として、
スタイルシートに、
mn{
color: blue;
font-size:20px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 30px;
}
と加えた場合、文字の色と大きさは変わるのですが、トップマージンとボトムマージンが全く反映されません。なぜかレフトマージンは反映されます。
セレクタやIDについて調べて、いろいろやってみたのですが、指定の仕方が間違っているのか、やはりうまくいきません。
大変申し訳ありませんが、正しい指定の方法に関してアドバイスを頂ければありがたく存じます。
動作に関するご質問の場合は必ずご記入ください。
WordPress のバージョン:
Welcart のバージョン:
ご利用のテーマ:
症状を確認したブラウザ:
サーバー(会社名、サービス名):
SSLの利用: 無し | 専用SSL | 共用SSL
WordPress のパーマリンク設定:
2012年3月1日 12:13 AM #63986shika
参加者こちらのページを参考にされると幸せになれるかも。
2012年3月1日 1:18 AM #63987meijix
参加者アドバイスをありがとうございました。
完全に理解できたわけではないのですが、
<p style=”margin: 30px 0px 10px; text-align: left; font-size:15px”>この商品はお勧め品です</p>
の場合は、ブロックレベル要素の指定だから、トップマージン設定も反映されるけれども、
別のタグを使って指定すると、インライン要素の扱いになるから、トップマージンの設定は無視されてしまうということなのかなと理解しました。
ではどうすべきなのかまでは、まだわかりませんが・・・。
ありがとうございました。
2012年3月1日 2:14 AM #63988nanbu
キーマスター> トップマージンの設定は無視されてしまうということなのかなと理解しました。
ご利用の環境や表示しているページごとにスタイルは異なったりしますので、はっきりとは言えませんが、親要素のスタイルの影響を受けているのかもしれません。また、マージンにはマージンの相殺というものがあるということも知っておかなくてはいけないことです。
こんな時はChromeの要素検証がとても役に立ちます。現在影響を受けているスタイルが一目でわかりますし、その場で変更して確認することもできます。
2012年3月1日 2:40 AM #63989meijix
参加者今度は、スタイルシートを
p.mn{
color: blue;
font-size:20px;
margin-top:30px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
htmlを
<p class=”mn”>この商品はお勧め品です</p>
とクラスを使って指定したところ、
マージンは上下ともにきちんと反映されるようになったのですが、フォントの色とサイズが反映されなくなりました。
マージンの相殺、及びChromeの要素検証の件、調べてみます。アドバイスをありがとうございます。
2012年3月1日 3:02 AM #63990meijix
参加者さらに、スタイルシートを
p#mn{
color: blue;
font-size:20px;
margin-top:30px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
htmlを
<p id=”mn”>この商品はお勧め品です</p>
とクラスを使って指定したところ、全てきちんと反映されるようになりました。
ありがとうございました。
ただ、このような使い方が正しいのかは自信がないのですが・・・。
2012年3月1日 4:08 AM #63991yasumax
キーマスター2012年3月1日 5:21 AM #63992meijix
参加者アドバイスをありがとうございます。
実は、idとclassの違いに関しては、いくつかのホームページの説明で読んだことは読みました。それで、classを使ったほうが無難だということはわかったのですが、classで指定したのでは、どこか別のところで設定されているものに負けてしまうようで、マージンの設定は反映されても、フォントの設定が反映されません。そこで、やむなくidを使った次第です。
こちらで教わったChromeの要素検証という機能で、どこの設定に負けてしまっているのか調べることができるようなので、そのうち調べてみようと思っています。
-
投稿者投稿
- このトピックに返信するにはログインが必要です。