記事と記事の間に余白と線を入れるには？

Tweet

このブログは、Wordpressの無料テーマSimplicityを使用しております。
名前の通り非常にシンプルな概観で満足しているのですが、１点だけ気になっている点があります。
それは、記事と記事の間に区切りがなく、ごちゃごちゃした感じがするのです。
今回はそれを直そうということで、色々やってみました。余白と線がないと以下のように境界が曖昧でみにくいです。

style.cssをちょっといじる。

cssを編集するというと難しく聞こえるかもしれませんが非常に簡単。
最悪、意味がわからなくても書いてある通りにコピペしたら大丈夫です。

まずは、wordpressのダッシュボードに行きます。
外観をクリックして、『テーマの編集』をクリックします。
するとスタイルシートの編集画面に入ります。
ここで『main .entry』というワードを検索します。（「Ctrl+F」で検索ボックス開きます）
編集する箇所は、

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

です。
要はメインエントリーに関する定義付けがされている部分をいじるわけです。
ここに

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

と付け加えるだけです。
簡単に解説すると
『padding-bottom: 30px;』は記事の下に30pxの余白を作るということ
『border-bottom: 1px dotted #DDDDDD;』は記事と記事の間に1pxの線を#DDDDDD（今回はグレー）でひく
という意味の条件を加えてあげています。

以下のようになっていればＯＫです。

#main .entry{
  clear:both;
  margin-bottom:40px;
/*  overflow: auto;
  zoom: 1;*/
  word-wrap: break-word;
  padding-bottom: 30px;
  border-bottom: 1px dotted #DDDDDD;
}

とても簡単ですよね！
30pxとか1pxや#DDDDDDの部分を変更すれば好みの幅や色に変えることができます。
皆さんもお試しあれ。