プライム会員限定!アマゾンミュージックの無料体験で音楽を聴けば500ポイントゲット!

【Simplicity2カスタマイズ】トップページの記事と記事の間に線を引くCSS!コピペで簡単

Simplicity2 記事と記事の間に線

当ブログのWordpressのテーマをWordpress公式テーマ「TwentyTwelve」から寝ログを運営しているわいひらさんという方が作ったテーマ「Simplicity2」に変更したので、「Simplicity2」のカスタマイズを備忘録がてら記事にしていきます。

この記事は「トップページに表示される記事と記事の間に線を引くCSS」をご紹介していきます!

スポンサーリンク

記事と記事の間に線を引く Before After

トップページに表示される新着記事一覧の記事と記事の間に線を引いて、記事がわかりやすくなるようにしていこうと思います。

また、記事の表示の仕方として、記事一覧リストのスタイルは「エントリータイトル(デフォルト)」に設定しています。

外観 → カスタマイズ → レイアウト(全体・リスト) → 一覧リストのスタイル からスタイルは変更できます。

このように変更前は、記事と記事の間に隙間があるだけで区切りがないので少し見づらいかもしれない。

記事の間に線 2

変更後は、このように記事と記事の間に線を入れることで見やすさがアップする。

記事の間に線

スマホではこのようになる。

こちらが線なしの表示

記事の間に線 スマホ2

変更後は、こちら

記事の間に線 スマホ

PCもスマホも記事と記事の間に境界線が引かれて、わかりやすく表示されている。

では、そのコードを解説していく。

・上の画像のようにサムネイルを横長にしたいならこちら

・記事一覧の「投稿日・カテゴリー名」を右に寄せて背景を変えたいならこちら

記事と記事の間に線を引く コード

テーマの編集をするには必ず子テーマを編集するようにしましょう

コードはSimplicity2の「スタイルシート (style.css)」に記述していきます。

外観 → テーマの編集 → スタイルシート (style.css)

コピペでOKです!

中身を解説していくと、このコードはトップページの記事一覧の一つ一つの記事の下に線を引くことで記事と記事の間に境界線ができるというわけです。

「border-bottom」が下に線を引くコードです。

先ほどの完成形のコードのこの部分を変更することで、線のスタイルを変更することができます。

「1px」は線の太さです。数を大きくすれば線が太くなります。

「dotted」は(線を点線にする)です。「solid」にすれば1本線で、「double」にすれば2本線で表示することができます。

「#333333」は線の色です。色のコードはこちらを参考にするといいでしょう「color-sample.com

先ほどの完成形のコードのこの部分を変更することで、記事と線の間隔を変更することができます。

「15px」の値を大きくすると間隔は広く、小さくすれば間隔は狭くなります。

また、記事本文ページに表示される「関連記事」の記事一覧に境界線を入れるには、このようなコードを「スタイルシート (style.css)」に追加してください。

トップページと中身は一緒なので、線のスタイルを変更したかったら先ほどと同じように中身を変更してみてください!

これで記事と記事の間に線が引かれ境界線ができるので、わかりやすくなりましたね。

記事と記事の間に線を引く まとめ

この記事は、「トップページに表示される記事と記事の間に線を引いて分けるCSS」をご紹介していきました。ついでに関連記事も。

コピペで簡単に実装できるので簡単だったと思います。

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