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

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

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

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

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

やり方は意外と簡単

編集するのはテーマ内の「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;
}

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

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

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