[解決済み] 商品詳細の本文（２）

[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 のパーマリンク設定：

---

[shika]

こちらのページを参考にされると幸せになれるかも。

ブロックレベル要素とインライン要素 – Web標準普及プロジェクト

[meijix]

アドバイスをありがとうございました。

完全に理解できたわけではないのですが、

<p style=”margin: 30px 0px 10px; text-align: left; font-size:15px”>この商品はお勧め品です</p>

の場合は、ブロックレベル要素の指定だから、トップマージン設定も反映されるけれども、

別のタグを使って指定すると、インライン要素の扱いになるから、トップマージンの設定は無視されてしまうということなのかなと理解しました。

ではどうすべきなのかまでは、まだわかりませんが・・・。

ありがとうございました。

[nanbu]

> トップマージンの設定は無視されてしまうということなのかなと理解しました。

ご利用の環境や表示しているページごとにスタイルは異なったりしますので、はっきりとは言えませんが、親要素のスタイルの影響を受けているのかもしれません。また、マージンにはマージンの相殺というものがあるということも知っておかなくてはいけないことです。

こんな時はChromeの要素検証がとても役に立ちます。現在影響を受けているスタイルが一目でわかりますし、その場で変更して確認することもできます。

[meijix]

今度は、スタイルシートを

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の要素検証の件、調べてみます。アドバイスをありがとうございます。

[meijix]

さらに、スタイルシートを

p#mn{

color: blue;

font-size:20px;

margin-top:30px;

margin-right: 0px;

margin-bottom: 10px;

margin-left: 0px;

}

htmlを

<p id=”mn”>この商品はお勧め品です</p>

とクラスを使って指定したところ、全てきちんと反映されるようになりました。

ありがとうございました。

ただ、このような使い方が正しいのかは自信がないのですが・・・。

[yasumax]

こんにちは。

横から失礼致します。

idとclassの違いはこちらのページを参考にしていただければと思います。

CSSの記述方法 －idとclassの違い

[meijix]

アドバイスをありがとうございます。

実は、idとclassの違いに関しては、いくつかのホームページの説明で読んだことは読みました。それで、classを使ったほうが無難だということはわかったのですが、classで指定したのでは、どこか別のところで設定されているものに負けてしまうようで、マージンの設定は反映されても、フォントの設定が反映されません。そこで、やむなくidを使った次第です。

こちらで教わったChromeの要素検証という機能で、どこの設定に負けてしまっているのか調べることができるようなので、そのうち調べてみようと思っています。

[投稿者]

投稿