初心者向けに、人気のWordPressテーマ「Simplicity」トップページの記事間に区切線を追加する方法をご紹介します。
今回もコピペで簡単にカスタマイズできますので、是非やってみてくださいね!
まず、初期はこんな感じです。

これでは、記事間の区切りがわかりづらく、読みづらいので、ちょっと工夫してみます。
クリックできる目次
コピペで記事間に区切線を追加
ご使用のテーマの子テーマをインストールしていない方は、子テーマをインストールしましょう。Simplicityの場合は、こちらからインストールできます。
そして、以下のコードをコピーしておきます。
#main .entry { border-bottom: 1px solid #000000; padding-bottom: 15px; }
次に、外観 ⇒ テーマの編集 ⇒ スタイルシート(style.css)を開いて、赤枠部分に貼り付けてください。

貼り付けたら、「ファイルを更新」をクリックします。トップページを表示して、記事間に区切線が入っていれば成功です。
オリジナルの区切線を作成
色の変更
カラーコードから好きなカラーを選んでみてください。

最初に貼り付けたコードをみてみると、1か所に「#000000」と記載されているのがわかります。つまり、現在「黒色」が指定されています。
#main .entry { border-bottom: 1px solid #000000; /*←ここを好きなカラーコードに変更*/ padding-bottom: 15px; }
この部分を書き換えることで、好きなカラーコードに変更することができるのです。
線のスタイルを変更
最初に貼り付けたコードをみてみると、1か所に「solid」と記載されているのがわかります。この部分で線のスタイルを指定します。
#main .entry { border-bottom: 1px solid #000000; /*←solidを変更してスタイルを指定する*/ padding-bottom: 15px; }
破線
破線にする場合は、「dashed」に変更します。
ドット線
ドット線にする場合は、「dotted」に変更します。
実線
実線にする場合は、「solid」に変更します。
まとめ
トップページにオリジナルの「区切線」を追加できましたか?
「記事を読む」ボタンのカスタマイズと同様、トップページの印象ががらりと変わりますので、ぜひ納得のいく線を引いてみてくださいね!
その他のSimplicityのカスタマイズも参考にされてください!
「「Simplicity」の「記事を読む」ボタンをカスタマイズする方法」
この記事がみなさまのお役に立てましたら幸いです!