本記事では記事の最後に表示される関連記事を紹介する部分で,記事と記事の間に境界線を入れる方法と,「記事を読む」ボタンの色や配置を変更する方法について紹介します.スタイルシートの変更から設定します.
関連記事の記事と記事の間に境界線を引く方法
①WordPressの管理画面から「外観→テーマの編集」を選択します.
②テーマがSimplicity2 child: スタイルシート(style.css)になっているのを確認し,一番最後に以下のコードを貼り付けます.
1 2 3 4 5 |
/*関連記事の間に線を*/ 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としますという意味です.
③以上の設定により記事と記事の間に境界線を入れることができます.
もしこの通りにやってもうまくいかない場合は,ブラウザのキャッシュが問題かもしれません.
もしくは全角スペースが誤ってコードに含まれている場合もあります.
以下の記事を参考にしてください.
関連記事の「記事を読むボタン」を編集する方法
①WordPressの管理画面から「外観→テーマの編集」を選択します.
②スタイルシート(style.css)に以下のコードを貼り付けます.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* 関連記事を読むボタンの変更 */ 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; } |
p.related-entry-read a はp.related-entry-readが「記事を読む」ボタンを示していて,aはそのボタンの中の部分を編集しますという意味です.
その後文字の色やサイズ,ボタンの色を設定しています.
p.related-entry-read の部分はこのボタンを右端から10pxの場所に置きますという設定をしています.
最後に
p.related-entry-read a:hover はマウスカーソルが「記事を読むボタン」の上に乗ったとき(hover),どのように変化するかを設定しています.
ここで再度文字の色をfff(白色)に設定しているのは,何も設定していないと通常のテキストリンクの設定が反映されてしまうからです.
以上の設定により関連記事の部分が以下の画像のように変更されます.
以上,関連記事部分のデザインを編集する方法の紹介でした.
ご一読いただきありがとうございます.