- 締切済み
css使って<br>みたいに改行したいけど出来ない
ブログの記事を書くときに<br/> を連発して改行していたんですが、seo敵によろしくないらしいのでこれからは cssを使って書き変えていこうと思いました ワードプレスのエディターから style.css の一番下に p.p1{ margin-top: 1em; } p.p2{ margin-top: 2em; } p.p3 { margin-top: 3em; } こうやって書きました。 それでブログの記事htmlを書くときには <p class=“p1"></p> ⇐これ書けば1行空白が空く <p class=“p3"></p> ⇐これ書けば3行空白が空く と思い書いてみたんですが <p class=“p1"></p> <p class=“p3"></p> どちらを書いても、記事は1行分の空白しか空きませんでした 大げさに p.p6{ margin-top: 6em; } というのをcssに書いて 記事のhtmlに <p class=“p6"></p> と 書いても空白は1行しか空きませんでした（；へ：） ブラウザのキャッシュを消して表示し直したりしてますが駄目です1行しか空きません なぜでしょうか？？cssの記入場所が悪いのか書き方が悪いのか margin-top を margin-bottom に変えても変わりませんでした 初心者にもわかるよう、 cssを使った改行、レイアウト変更方法を教えてください なんかcssで指定して html側になんかp classみたいな指定をした方が SEO対策になっているとか ルールにのっとっているらしいですが ググってもわかりませんでしたし なぜか一行分の空白しか空きませんで困っております。 こうやって何行も空けたいです！ <p style="margin-top:6em;"></p> とhtml側に書くと改行思ったようにできます これが一番簡単ですがそれもcssで指定してないから良くないらしいです たすけて！
- shitumongaaru
- お礼率6% (23/366)
- その他（インターネット・Webサービス）
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- Safe_Mode
- ベストアンサー率48% (1329/2725)
>別のどれが影響してるかわからないんです(´・_・`)困りました― 本文のhtmlファイル側で<head></head>間のヘッダー情報の中に下記を追加してみて、スタイルシートが反映されるか、確認してみてはどうですか？ <style type="text/css"> p.p1{ margin-top: 1em; } p.p2{ margin-top: 2em; } p.p3 { margin-top: 3em; } </style>
- t_ohta
- ベストアンサー率38% (5292/13827)
<p class=“p6"></p> だと中身が何も無いので要素として無視されている。 SEOを気にしてと言うのなら、中身の無い要素が有るのも構造的に変だと解釈される可能性がありますよ。 改行のために空要素を入れるのではなく、その前か後にある文章の入った要素にマージンを設定するのが正解です。
- Safe_Mode
- ベストアンサー率48% (1329/2725)
>どういった事が考えられますか？ cssに記述された他の要素については反映されているというなら、他に<p>タグに関する別の属性記述があるとか… いずれにしてもcssの中身を確認、cssファイルがきちんと更新されているか確認、といったところかと思います。
お礼
解決しました！！詳しくは t_ohta さんの回答の所に書きました こんなくだらないミスで時間を使わせてしまい申し訳ない
補足
別のどれが影響してるかわからないんです(´・_・`)困りました―
- Safe_Mode
- ベストアンサー率48% (1329/2725)
単純に .p1{ margin-top: 1em; } .p2{ margin-top: 2em; } .p3 { margin-top: 3em; } でいいんじゃないでしょうか？
補足
駄目でした、書き方の問題では無くて、CSSが反映されてないんです その省略型のをCSSに書いて htmlの方に<p class=“p3"></p><p class=“p3"></p><p class=“p3"></p>と連続で書きまくっても 結局の所1行分しか空かないんです本来なら９行分あくはずです どういった事が考えられますか？
お礼
うわああああ 解決しました！！！！！！ 大変申し訳ないです <p class=“p6"> “p6" “““““““ こいつのせいでした！！ “““ではなく """"""" これです この記号が間違ってました！！！ <p class="p6">これで指定出来ました</p> こんなくだらない事に5時間ぐらい使っていたとは。 本当に申し訳ない あの説明サイトめ、こんな所に罠を仕掛けていたとは！ ソースコードのコピペ使用にはこんな罠も隠されているのですね！
補足
☆<p class=“p6"></p> だと中身が何も無いので要素として無視されている。☆ これだ！！と思い <p class=“p6">文章を挟む</p> 文章を挟んだ使い方をしてみましたが、駄目でした（´・ω・`)いけると思ったのに。やはり１行しか空かないのです ワードプレスのテキストエディタで書いてるんですが、 <p style="margin-top:6em;"></p> こういった書き方をするか ビジュアルエディタに切り替えてエンターを押す＝<p> </p> を挿入する。しか解決策が見つかりません。。 <p> </p> これもSEO的にはよろしくないと書いてありました <p style="margin-top:6em;"></p>これよりは文字を挟んでいる分良さそうですが・・。 CSSのどの部分が邪魔をしていると考えられますか？なぜ一行分しか空かないのでしょう なぜだああああ ちなみに 同じ方法の cssに p.red { color:#ff0000; } ｈｔｍｌに <p class="red">あかいろになる</p> は成功してるんです！ 改行の量だけどうしても増やせません！