WordPressテーマ「Stinger3」のトップページの記事の間に区切り線を入れる方法

2014/02/042018/09/05

前回投稿したWordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法ですが、最初前回の記事と今回の記事を同じ投稿で残して置こうかと思っていましたが、実際記事を書いてみるとタイトルが長くなりそうだったので別々の投稿にさせて頂きました。お役に立つ事が出来れば嬉しいです。ちなみに前回まではこのように「続きを読む」ボタンを右側に移動しました。

[adsense]

今回はこれの下に区切り線を入れます。このような表示になります。

いかがでしょうか？区切る事で次の記事との境目がはっきりして見やすくなったと思います。（個人的には）

[adsense]

style.cssを開いて区切り線を使いするコードを追加します

例：ダッシュボード→外観→テーマ編集から→スタイルシート(style.css)
自分は編集にTransmit4を使っています。

[修正前]style.cssの４９２行目から４９５行目を抜粋

.entry {
     margin-bottom: 20px;
     padding-top: 10px;
}

ここの３行目の後に「 border-bottom: 1px solid #000000; 」を加えます。最終的にこのようになっていれば問題ありません。

.entry {
     margin-bottom: 20px;
     padding-top: 10px;
     border-bottom: 1px solid #000000;
}

これで完成です。線ではなく点線にしたい方は４行目の「solid」を「dashed」に線の色は現状黒ですが、変更したい場合こちら「カラーチャート（カラーネーム）」みたいなサイトが沢山あるので好きな色を「#000000」に入れて変更してください。

[adsense]

完成

いかがだったでしょうか？カスタマイズを覚えてくるともっとやりたくなってきますよね！読んで頂いてありがとうございました。