「Simplicity」の記事間に区切線を追加する方法

初心者向けに、人気の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」の「記事を読む」ボタンをカスタマイズする方法

「Simplicity」でフォント色を変更する方法

この記事がみなさまのお役に立てましたら幸いです!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする