関連記事に境界線を入れたり，ボタンの色を変更する方法

本記事では記事の最後に表示される関連記事を紹介する部分で，記事と記事の間に境界線を入れる方法と，「記事を読む」ボタンの色や配置を変更する方法について紹介します．スタイルシートの変更から設定します．

関連記事の記事と記事の間に境界線を引く方法

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

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

/*関連記事の間に線を*/
article.related-entry {
    border-bottom: 1px dotted #333333;
    padding-bottom: 15px;
}

/*関連記事の間に線を*/

article.related-entry {

border-bottom: 1px dotted #333333;

padding-bottom: 15px;

}

article.related-entry　は記事終わりの「関連記事」の各記事部分を編集しますというって意味です．

border-bottom: 1px dotted #333333;　は各記事の下に灰色の点線を引きます

padding-bottom: 15px;　は各記事部分の下側15px分に空白を作ってそこをborder-bottomとしますという意味です．

③以上の設定により記事と記事の間に境界線を入れることができます．

もしこの通りにやってもうまくいかない場合は，ブラウザのキャッシュが問題かもしれません．

もしくは全角スペースが誤ってコードに含まれている場合もあります．

以下の記事を参考にしてください．

2.3 プラグインを用いてグローバルナビを変更する方法とスタイルシート（style.css）の編集方法

本記事では，グローバルナビのデザインを変更する方法を説明します．上記のアイキャッチ画像の上の状態から下の状態へ変更します．今回グロー...

www.how-to-make-affiliate-blog.com

関連記事の「記事を読むボタン」を編集する方法

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

②スタイルシート（style.css）に以下のコードを貼り付けます．

/* 関連記事を読むボタンの変更 */
p.related-entry-read a{
 color:#fff;
 font-size:14px;
 background-color:#ff4500;
 border-radius:2px;
 padding:5px 5px 5px 5px;
}
p.related-entry-read {
 text-align: right;
 margin-right: 10px;
}
p.related-entry-read a:hover{
 color:#fff;
 background-color:#0000FF;
 text-decoration: none;
}