最新記事を久々に書きました
最新記事を久々に書きました
副業アフィリエイトで給料以上稼げるようになった4つのコツを暴露します(2017年最新版)
副業アフィリエイターがアフィリエイトでサラリーマン収入以上を稼ぐ秘密を、全て暴露します。 副業アフィリエイトで...

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

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

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

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

161118_2

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

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

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

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

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

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

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

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

2.3 プラグインを用いてグローバルナビを変更する方法とスタイルシート(style.css)の編集方法
本記事では,グローバルナビのデザインを変更する方法を説明します.上記のアイキャッチ画像の上の状態から下の状態へ変更します.今回グロー...

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

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

161118_2

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

p.related-entry-read a はp.related-entry-readが「記事を読む」ボタンを示していて,aはそのボタンの中の部分を編集しますという意味です.

その後文字の色やサイズ,ボタンの色を設定しています.

p.related-entry-read の部分はこのボタンを右端から10pxの場所に置きますという設定をしています.

最後に

p.related-entry-read a:hover はマウスカーソルが「記事を読むボタン」の上に乗ったとき(hover),どのように変化するかを設定しています.

ここで再度文字の色をfff(白色)に設定しているのは,何も設定していないと通常のテキストリンクの設定が反映されてしまうからです.

以上の設定により関連記事の部分が以下の画像のように変更されます.

161118_1

以上,関連記事部分のデザインを編集する方法の紹介でした.

ご一読いただきありがとうございます.