当ブログ「ローカルブロガーのメモ帳」では、WordPressのテーマはデフォルトの「Twenty Twelve」を今も使用しています。
デフォルトでトップページを表示すると、記事と記事の間に二重線があるのですが、この二重線と次の記事タイトルとの間隔、つまり二重線の下のマージンがどうも広すぎて気になっていたんです。
この間隔を小さくしようとして、スタイルシートの内容を見ていたのですが、どうにもスタイルシートに疎くて、今回も全然どこを弄ればいいのか分からず(汗)
で、調べてみたところ、こちらの記事に書かれていて参考にさせていただきました。
ありがとうございました。
→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
これで、二重線の下の間隔が狭くなりました。
実はこれ、個別記事においても記事下に二重線があるのですが、その二重線の下の間隔も一緒に狭くなります。
ここも確かに気になっていたので、間隔が狭くなってよかったです。
※ただ、それぞれ別に(例えば、個別記事の二重線の下のみ)間隔を変更することはできないのかな?
もうちょっと個別記事下の方だけ、間隔を狭くしたいので、次の課題にします…
以上、こうやって分からないながらも、ちょっとずつ好みの表示にカスタマイズしている、おじさんブロガーの小梅太郎(@koume_taro)でした。