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

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

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

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

Advertisement

WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法

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

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

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

Advertisement

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

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

[修正前]style.cssの492行目から495行目を抜粋

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

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

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

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

Advertisement

完成

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

WORDPRESSカテゴリの最新記事