このブログは、Wordpressの無料テーマSimplicityを使用しております。
名前の通り非常にシンプルな概観で満足しているのですが、1点だけ気になっている点があります。
それは、記事と記事の間に区切りがなく、ごちゃごちゃした感じがするのです。
今回はそれを直そうということで、色々やってみました。余白と線がないと以下のように境界が曖昧でみにくいです。
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(今回はグレー)でひく
という意味の条件を加えてあげています。
以下のようになっていればOKです。
#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の部分を変更すれば好みの幅や色に変えることができます。
皆さんもお試しあれ。
最近のコメント