今さら聞けない、WordPress「Twenty Twelve」の記事と記事の間にある二重線の下の間隔を変更したい

当ブログ「ローカルブロガーのメモ帳」では、WordPressのテーマはデフォルトの「Twenty Twelve」を今も使用しています。

デフォルトでトップページを表示すると、記事と記事の間に二重線があるのですが、この二重線と次の記事タイトルとの間隔、つまり二重線の下のマージンがどうも広すぎて気になっていたんです。

double_2014-03-07_12_07_42

この間隔を小さくしようとして、スタイルシートの内容を見ていたのですが、どうにもスタイルシートに疎くて、今回も全然どこを弄ればいいのか分からず(汗)

で、調べてみたところ、こちらの記事に書かれていて参考にさせていただきました。
ありがとうございました。
Twenty Twelveの記事と記事の間のマージン設定|WordPressテーマカスタマイズ

どうやら、style.cssファイルの.site-content articleのmargin-bottomの値を変更するといいとのことで、改めてstyle.cssファイルを見てみると、

.site-content article {
	border-bottom: 4px double #ededed;
	margin-bottom: 72px;
	margin-bottom: 5.142857143rem;
	padding-bottom: 24px;
	padding-bottom: 1.714285714rem;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

ここですね。ここのmargin-bottomを変更するといいようですね。
(あっ、素人の私はもちろんバックアップをとってですが、さらに当ブログでは子テーマにて作業してます)

今回は、子テーマに次のように追記しました。

.site-content article {
	margin-bottom: 28px;
	margin-bottom: 2rem;
}

※14px = 1rem

これで、二重線の下の間隔が狭くなりました。

double_2014-03-07_12_04_51

実はこれ、個別記事においても記事下に二重線があるのですが、その二重線の下の間隔も一緒に狭くなります。

(CSS変更前)
double_2014-03-02_14_30_48

(CSS変更後)
double_2014-03-07_11_51_18

ここも確かに気になっていたので、間隔が狭くなってよかったです。

※ただ、それぞれ別に(例えば、個別記事の二重線の下のみ)間隔を変更することはできないのかな?
もうちょっと個別記事下の方だけ、間隔を狭くしたいので、次の課題にします…

以上、こうやって分からないながらも、ちょっとずつ好みの表示にカスタマイズしている、おじさんブロガーの小梅太郎(@koume_taro)でした。