このブログは、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調整後の投稿一覧

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

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

投稿者 ホンダ芭蕉

四国は高知、車社会の片田舎で訳あって原付バイクだけで暮らしてます。 カブ生活の魅力と困難、ふらりと立ち寄った寺社仏閣や田舎の癒しスポットなどをご紹介します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です