[Simplicity]投稿一覧で記事と記事の間に線をいれて見やすく変更

シェアする

150716_投稿一覧で投稿と投稿の間に線をいれました

このブログは、Wordpressの無料テーマSimplicityを使わせてもらっています。

とってもよく出来たテーマで痒いところに手が届いているのですが、1か所気になることが・・・
そこを修正してみよう、というお話です。

スポンサーリンク

記事と記事の間に分割線を入れたい

simplicityデフォルトのトップページ表示はこんな感じです。

CSS調整前の投稿一覧

記事と記事の間に大きく余白をとったデザインですね。
ここの間にラインを一本引いたらどうなるかなー、より区切りが強調されてわかりやすくなるんじゃないかなー、と思ったわけです。

やり方は意外と簡単

編集するのはテーマ内の「style.css」
編集ソフト等で開いたら、「#main .entry」で検索して下さい。
こんな表記になっています。

#main .entry{
  clear:both;
  margin-bottom:40px;
  margin-right:10px;
/*  overflow: auto;
  zoom: 1;*/
  word-wrap: break-word;
}

これに以下の2行を追加するだけ。

padding-bottom: 20px;
border-bottom: 1px dotted #DDDDDD;

padding-bottom → 記事の下に余白を作りなさいよね!(今回は20pxで勘弁してあげるわ///)
border-bottom → 余白の上にボーダーラインを引きなさいよね!(1ピクセルのドットで色はDDDDDDなんだからぁ///)

という意味です。

出来上がりはこちら
#main .entry{
  clear:both;
  margin-bottom:40px;
  margin-right:10px;
/*  overflow: auto;
  zoom: 1;*/
  word-wrap: break-word;
  padding-bottom: 20px;
  border-bottom: dotted 1px #DDDDDD;
}

表示はこんなふうになります。

CSS調整後の投稿一覧

・・・わかりづらいですね。トップページやサイトメニューのリンクから見てもらうと分かりやすいです。

意味がわからなくてもコピペでできます。便利ですねー。
それでは。