- このトピックには8件の返信、2人の参加者があり、最後に
により9年、 9ヶ月前に更新されました。
-
投稿
-
-
ブログ記事本文内のpタグ同士の行間をもう少しあけたかったので、過去の質問を参考に以下のような記述を行いました。
.article { font-size: 16px; line-height: 170%; } .article p { margin: 2em 0; }すると狙い通りに段落間の余白は、自分の好みになったのですが、下部に出てくるSNSの「シェアする」「フォローする」の部分まで余白が広がってしまい、間延びした感じになってしまいました。
記事本文内とその他の部分の設定を分ける事はできるのでしょうか？
親テーマのスタイルシートを見たのですが、知識がなく理解できておりません。 -
-
回答ありがとうございます。
スタイルシートを見ているだけでは、サッパリ理解できなかったのですが、クロームのデベロッパーツールを眺めていたら、.articleと.entry-contentの範囲の違いが分かりました。もう少しCSSについて勉強したいと思います。
ありがとうございました。 -
これでどうでしょうか。
#the-content p { margin: 2em 0; }指定している範囲の違いを書くとこのようになります。
●.articleの影響する範囲
記事タイトルからSNSまで●#the-contentの影響する範囲
本文の始めから記事下レクタングルの手前まで自分で調べる方法のひとつとして、Chromeであれば Ctrl + Shift + C でデベロッパーツールというツールが起動して、マウスでクリックした部分のHTMLが見れるようになります。
今回の場合は以下の部分が該当しています。
<div class=”article”>
↓
.article<div id=”the-content” class=”entry-content”>
↓
#the-contentCSSを書く時、classの場合は「.」、idの場合は「#」を使って指定します。
デベロッパーツールで表示されているHTMLの部分にマウスを持って行ったら、Webサイトのほうで色が反転して範囲がわかるようになっているので、今回の.articleと#the-contentの範囲の違いも視覚的に見ることができます。
この説明だけだとシンプルすぎるので、デベロッパーツールの使い方がわからない場合は「デベロッパーツール 使い方」などでググってみてください。
※なお、この回答を見ているCSSに詳しい人で、#the-contentと.entry-contentのどちらを使ったほうがベターなのか、違っていた場合はご指摘ください。
ーーー
あと、.articleの記述とセットで書かれているのでもしやと思ったのですが、親テーマのCSSを直接編集していますか？※すでに子テーマを使用している場合はここから読む必要はありません。
親テーマのCSSを直接編集するとバージョンアップした時に自分でカスタマイズした部分が消えてしまうので、基本、子テーマを使うことをおすすめします。
Simplicity公式ブログに子テーマについての解説記事があるのでどうぞ。
https://wp-simplicity.com/downloads/child-theme/ -
あ、あれ？すでにわいひらさんが回答されてるのに気づかずに投稿してしまいました（笑）
すでに回答済みのところに長々とすいません。
範囲の指定はわいひらさんの通り.entry-contentを採用してください。
（それにしてもお二人の投稿した時間はとうに過ぎてたのに最初の質問文しか表示されてなかったのが不思議）
-
css自体は、質問の通りの上下2emで問題ありませんが、構造的な理想型としては、
p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; }こうです。
上下にスペースをとるということは、連続する要素にとってはあまりよろしくない場合があります。pの間に何かが入った時に、その挿入された要素にもマージンが入っていたりした場合に思いがけないスペースが生まれることがあるからです。
ただしまぁ、ぶっちゃけ何でもいいんですけどね(笑)下方向にだけマージンを規定の数値で入れておくということは、挿入した要素の上にも同じだけ隙間ができるということで管理がしやすくなります。
#mainで考えた場合、ボーダーが入ってそこにpaddingが入っています。このpaddingが例えば20pxだとして、中に入る要素にマージン等が無い場合は、綺麗に20pxの隙間ができます。が、中の要素の最後にマージンがある場合は、このpadding+その要素の下マージンとなり、下だけ余計なスペースができるのです。
まぁびっくりするぐらいのスペースの不自然さがない場合はどうでもいい部分ですが、綺麗に収めるには最後の要素の下マージンは取っておくべきです。
もっと限定的に言えば、リスト表示もそうです。
ul li { margin-bottom: 20px; } ul li:last-child { margin-bottom: 0; }こうすることで、ulにpaddingがあってもなかってもそれぞれのアイテムの間隔は綺麗に収まります。
last-childだけでなく、last-of-typeが必要な場合もあるので、そこらは臨機応変に。 -
＞パソ活さん
詳しい説明ありがとうございます。
ちょうどデベロッパーツールを適当に触っていたら、偶然できたところだったので参考になりました。
なお、既に子テーマを使用していますが、お気遣いありがとうございます。＞Hidekichiさん
CSSとはなかなか難しいものですね。たしかに上下にスペースを取った場合、重なる部分はどうなるんだっけ？とか思っていました。考えても分からないので、表示してみて結果オーライならOK（苦笑）
また、last-childとか初めて知りました。参考になりました。 -
文字だけではアレなんでサンプル作りました。
-
＞Hidekichiさん
サンプル非常に分かりやすかったです。
現在、まさしく見出しの下に空間が開いている状態です（苦笑）
参考にさせていただきます。
-
- フォーラム「Simplicityについての質問」には新規投稿および返信を追加できません。