前略、pmes さん

見出しのマージンを調整すれば、もう少し狭くできるかと思います。

現状では、以下のようになっているようです。

.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
   margin: 2.4em 0 1em;
}

これは、上側のマージンが2.4em で左右が　0　で下側が1emという意味です。

今回お使いの見出しは、h4 ですので、h4 、h5 、h6 の上側のマージンを少なく指定すれば良いのではないかと思います。

.article h4,
.article h5,
.article h6 {
   margin-top: 1em;
}

一応 1em にしてみました。

あとは、お好みで適宜修正してみてください。

pmes さん

投稿者:: @pmes

ただ、写真は左寄せをしていて、文字を周り込ませたくないために

下のように書いてます。

 

写真（左寄せ）

<div style="clear:both;"></div>

ちょっと、実際にやってみないとですが・・

写真は左寄せにしなくても、自然と左に寄るような気もするのですが、いかがでしょうか？

左寄せにしなければ、文字も回り込まないような気もするのですが・・

@leafytree様

こんばんは、いつも教えていただいてありがとうございます。

さきほど、教えていただいたコードをそのまま追加CSSに入れました。（画像参照）

追加の後で、実際の画面なども確認したのですが、変化がないようでした。

私の作業が間違っていますでしょうか？

.article h4,
.article h5,
.article h6 {
   margin-top: 1em;
}

をそのまま追加CSSに入れました。

@pmes さん

私も、ちょっと、調べないと理由がわからない（知らないだけだと思いますが）のですが、以下のように書くと、上書きできるみたいです。

.article h4,
.article h5,
.article h6 {
   margin: 1em 0 1em;
}

なんでだろう？

単位がemとpxと解釈されちゃうのかな？

一括指定の方が詳細度が高いって、聞いたことないなぁ・・

@leafytree様

ありがとうございます！

少し狭くなりました。

私が<div style="clear:both;"></div>を使っているので

これが最小のスペースなのだと思います。

あと、写真はそのまとま貼り付けても左に寄りました。教えてくださってありがとうございます！

必ず、左寄せ・中央・右寄せなど、どれか１つを選ばないといけないものだと思っていました。

勉強になりました。

そして、そのまま左によった写真の下に文字を書いていっても、現状と同じぐらいのスペースだったので、これが限界なのかと思った次第です。

とりあえず、これでいきます！！！

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

@pmes さん

投稿者:: @pmes

あと、写真はそのまとま貼り付けても左に寄りました。教えてくださってありがとうございます！

必ず、左寄せ・中央・右寄せなど、どれか１つを選ばないといけないものだと思っていました。

私もローカルのテストサイトで試してみたのですが、画像ブロックの画像の配置で、どれか一つを一旦選択してしまうと、下の文字が回り込んでしまうようです。

なので、画像ブロックを再設定すれば、<div style="clear:both;"></div> は、要らなくなるかもしれません。

下の画像は、特になにもしていませんが、文字は回り込んでいません。

@leafytree様

さっそく、画像ブロックを組み直しました。

最終的に、こんな感じになりそうです。（画像添付）

今回、質問したことが解決できたばかりか、写真のこともそのまま貼り付ければいい！ということがわかり勉強になりました。

今日も、ありがとうございました。

いつも、本当に助かっています、おそらく私がWPを今回諦めずにできているのもleafytreeさんのおかげだと思っています。

私事ですが、10年前・７年前・５年前と過去に３回はWPに挑戦して、毎回初期設定などがわからず挫折した経験があります。

@pmes さん

おそらく、pmesさんの質問のし方が、上手いのだと思います。

本来は、見出しがあって、その次にコンテンツ、というのが、HTML的には、オーソドックスなスタイルだろうと思われるので、そのレイアウトの方が良いのかもしれません。

それにしても、CSSでマージンの一括指定が上書きできない、ということに初めて遭遇しました。 ?