読者です 読者をやめる 読者になる 読者になる

ブログだった何か

ジーナちゃん専門ブログ

はてなブログ:記事一覧ページの間隔の調整

どういうわけか記事一覧のページが酔っ払っていたので直したのですが、
記事同士の間隔がやたら狭かったので、少し広めて見やすくします。

↓初期状態。タイトル、記事本文の下が詰まっています。


f:id:djtaimi:20160716121110p:plain


記事一覧のタイトル部分は.archive-entry-headerが含まれているようです。
ここにmarginを入れれば解決します。
記事本文については、.archive-entryを広げればOKです。
.archive-entry-headerと.archive-entryを調整すると、このようになります。


f:id:djtaimi:20160716121328p:plain


.archive-entryではなく、.archive-entry-bodyのpadding等を調整する方法もあります。
ただし、短い文章の記事だと、このように詰まってしまいます。


f:id:djtaimi:20160716121359p:plain


これはサムネイルの.entry-thumbクラスにfloat: left;がかかっており、
右側の余白が考慮されていないものだからと思われます。
そこで、.archive-entry-body:afterを追加し、
clearfixと同じ処理を記述してみます。


f:id:djtaimi:20160716121414p:plain


うまくいけました。

※追記:空けたあとの方がむしろ見づらくなってますが、調整中ということで多めに見てください…

広告を非表示にする