▶ Windows 11情報をお求めの方はこちらをクリック

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

2 min

初心者向けに、人気の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」でフォント色を変更する方法

 

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

SEパパ

SEパパ

外資系IT企業SE職で2児の父ちゃん!職業柄かリサーチ&問題解決が好き。

幅広いジャンルで「お悩み解決」記事を執筆中。月間最高24万PV。雑誌掲載。

読者様に役立つ情報提供を心がけています。

カテゴリー:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA