【Simplicity2カスタマイズ②】コピペで簡単♪記事と記事の間に境界線を引く方法

Simplicity2_カスタマイズ② WordPress

今回行うカスタマイズは、「記事と記事の間に境界線を引く」です。

 

トップページやカテゴリごとのページには記事がずらりと並びますが、デフォルトだと記事と記事の間にはなにも無い状態です。

そこで、記事と記事の間に境界線を引くことで、見た目をすっきりさせましょう。

 

記事と記事の間に境界線を引こう

それでは、記事と記事の間に境界線を引いてみましょう。

Simplicity_カスタマイズ03

 

「外観」>「テーマの編集」でテーマの編集画面を開きます。

Simplicity_カスタマイズ04

 

子テーマを編集しますので、画面右上の「編集するテーマを選択」のところが「Simplicity2 child」であることを確認してください。

もし異なっていたら「Simplicity2 child」を選んで「選択」をクリックします。

そして、下の「スタイルシート」をクリックします。

Simplicity_カスタマイズ05

 

「Simplicity2 child:スタイルシート(style.css)」に次のコードを記入します。

コピペでもOKです。

/* 記事と記事の間に線を引く */
#main .entry {
    border-bottom: 1px dotted #333333;
    padding-bottom: 15px;
}

「dotted」を「solid」に変更すると直線になります。

ちなみに、上記コードの一行目は、このコードが何をしているかをメモしただけのものですので、無くても問題ありません。

 

関連記事にも同じような境界線を引きたい場合は、次のコードを追加で記入しましょう。

/* 関連記事と関連記事の間に線を引く */
#main .related-entry {
    border-bottom: 1px dotted #333333;
    padding-bottom: 15px;
}

 

これで記事と記事の間に境界線を引くことができました!

 

参考 トップページやカテゴリの記事リストに境界線を入れたい -Simplicity公式サイト-

 

まとめ

今回はSimplicity2の子テーマのスタイルシート(style.css)にコードを追加することで、記事と記事の間に境界線を引くというカスタマイズをしてみました。

 

いかがでしたでしょうか?

コピペでもできちゃうので、簡単だったと思います。

 

次回以降も基本的に今回と同じ作業で色々カスタマイズしていきます。

次回は「記事を読む」ボタンを装飾して位置を右側に移動する方法について解説します。

【Simplicity2カスタマイズ③】「記事を読む」ボタンを装飾して位置を右側に移動する方法
今回行うカスタマイズは、「記事を読む」ボタンの装飾です。 「記事を読む」ボタンを装飾して目立たせてみましょう! ついでに、「記事を読む」ボタンの位置を変更してみたいと思います。 ↓こんな感じです。 「記事を読む」ボタ...

 

当ブログで行ったカスタマイズのまとめはこちら↓

【Simplicity2カスタマイズ】WordPress初心者が行った6つの方法【まとめ】
WordPressテーマ『Simplicity2』を愛用している私が行ったカスタマイズ方法をまとめて紹介します!WordPress初心者でも簡単にできるカスタマイズばかりですよ♪

コメント