最新記事一覧ページのカスタマイズ｜境界線を入れる，記事を読む等の変更方法

 

本記事からは発展編となります．本記事では上記のアイキャッチ画像に示すように最新記事一覧ページを左から右の状態に編集します．記事と記事の間に境界線を入れ，記事を読むボタンを変更し，最後にタイトルの文字を小さくする方法を紹介ます．

 

新着記事ページで記事と記事の間に境界線を入れる方法

まずはじめに，記事間に境界線を入れる方法を紹介します．

 

 

①管理画面から「外観→テーマの編集」を選択します．

 

 

②テーマがSimplicity2 child: スタイルシート（style.css）になっているのを確認し，コードの一番最後に以下のコードを貼り付けます．

 

 

 

各コードの意味を説明します．

#main .entry {　メインページの新着記事部分を編集しますという宣言です
border-bottom: 1px dotted #333333;　記事の下側に1pxの点線を灰色で引きます
padding-bottom: 15px;　記事紹介の部分を下15pxまで領域を広げ，そこに境界線が引かれるようにします

 

以上のコードを加えることで記事と記事の間に境界線を入れることができます．

 

 

記事を読むボタンの編集方法，色を変える，右端に寄せる

次に記事を読むボタンを編集します．

 

 

①管理画面から「外観→テーマの編集」を選択します．

 

 

②Simplicity2 child: スタイルシート（style.css）のコードの一番最後に，以下のコードを貼り付けます．

 

各コードの意味を説明します．

.entry-read a{　記事を読むボタンの中を編集しますという意味です
color:#fff;　文字の色を白にします
font-size:14px;　文字の大きさを少し小さくします
background-color:#ff4500;　文字の背後をオレンジに設定します
border-radius:2px;　ボタンの角を丸くします
padding:5px 5px 5px 5px;　文字の周りを大きくして，ボタンを大きくします

 

.entry-read{　記事を読むボタンを編集します
 text-align: right;　ボタンを右端そろえで配置します
margin-right: 10px;　ボタンを右端から10px左に配置します

 

.entry-read a:hover{ ボタンの上にマウスが乗ったときの変化を設定します
 color:#fff;　文字色を白にします
 background-color:#0000FF;　ボタンの色を青にします
 text-decoration: none;　下線は引きません

 

hoverの部分を設定するのは，これがないと，通常のリンクのときと同じ設定が適用されて下線が出てきたり，文字色が変わったりして，使いにくいからです．ボタンならではhoverを設定します．

 

 

以上のコードを加えることで，記事を読むボタンを編集することができます．

 

 

新着記事ページでタイトル文字を小さくする方法

①管理画面から「外観→テーマの編集」を選択します．

 

 

②Simplicity2 child: スタイルシート（style.css）のコードの一番最後に，以下のコードを貼り付けます．

 

コードの意味を説明します．

.entry h2 a{　記事紹介のh2タグで囲まれたタイトル部分を編集しますという宣言

font-size: 21px;　文字の大きさを小さくします

line-height: 1.3;　1行の高さを低くします

 

 

以上でタイトル部分の編集は終了です．

 

以上の3つの設定で新着記事部分が以下の画像のように変更されます．