【WordPress】Simplicity2の記事と記事の間に線を入れて見やすくする方法~CSSコピペ

【WordPress】Simplicity2の記事と記事の間に線を入れて見やすくする方法~CSSコピペ

WordPressのテーマで人気のSimplicity2のトップページに新着記事を並べますが、記事と記事の間に線を入れて見やすくする方法を紹介します。

CSSをコピペするだけで実装できますので試してみて下さい。

 

記事と記事の間に線を入れるBefore After

トップページの記事と記事の間に線を入れる前と入れた後のサンプルを見て下さい。

以下のような線を入れるCSSを紹介します。

Simplicity2 記事と記事の間に線

記事と記事の間に「線」を入れた方が、どことなく見やすくないですか?

区切りがあった方が見やすいですね。

 

Simplicity2でトップページに新着記事を表示する方法

Simplicity2でトップページに新着記事(最新の投稿)を表示するには「ダッシュボード」から「ホームページ設定」に行き、最新の投稿にチェックを入れます。

Simplicity2で最新の投稿を表示

記事の間に線を入れるCSS

トップページの最新の投稿の記事の間に線を入れるCSSは、以下をコピペするだけで実装できます。

凄く簡単ですので参考にして下さい。

 

CSSのコピー

 

Simplicity2 child: スタイルシート (style.css)に貼り付け

CSSを貼り付けるには、子テーマを使用します

「Simplicity2 child」の「style.css」に貼り付けます。

Simplicity2の子テーマにCSSを貼り付け

/* Simplicity子テーマ用のスタイルを書く */」という行の下であれば、どこにコピペしても構いません。

僕は、CSS(スタイルシート)が何のCSSか区別がつくようにCSSの前にコメントを書いています。

みなさんも自分なりに分かりやすいコメントを書くといいでしょう。

 

まとめ

Simplicity2は、そのまま使用してもカッコいいテーマではあります。

しかし、CSSをカスタマイズできるような工夫をされており、誰でもカスタマイズできるようになっています。

色々、カスタマイズできますので、自由にしてみて下さい。

他のカスタマイズする方法は、当プログでも紹介していますので参考にしてみて下さい。

 

この記事が気に入ったら
いいね ! しよう

Simplicity2カテゴリの最新記事