[解決済み] 商品詳細の本文(2)

フォーラム テンプレート(テーマ) [解決済み] 商品詳細の本文(2)

  • このトピックには7件の返信、4人の参加者があり、最後にmeijixにより12年、 7ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #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 のパーマリンク設定:


    #63986
    shika
    参加者

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

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

    #63987
    meijix
    参加者

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

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

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

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

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

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

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

    #63988
    nanbu
    キーマスター

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

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

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

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

    #63990
    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>

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

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

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

    #63991
    yasumax
    キーマスター

    こんにちは。

    横から失礼致します。

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

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

    #63992
    meijix
    参加者

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

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

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

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。