関連記事の表示と記事の間に空白ができるように設定!物件探し
Yet Another Related Posts Pluginを導入すると関連記事が表示されるようになりますが記事と関連記事の表示タイトルに空白がなくものすごく見にくいです。
記事と関連記事のタイトルに空白をあけて見やすくしたいと思ったのですが情報があまり公開されていなかったので掲載します。
Yet Another Related Posts Pluginを導入していない方は下記の記事をご参照ください。
関連記事を表示するプラグイン!Yet Another Related Posts Plugin
1,下記の画像の赤線で囲んだ①~⑤の箇所にコードを入力します。
2,①の箇所に<h4>関連記事も合わせて読む</h4><ul>を記入。
3,②の箇所に</ul>を記入。
4,③の箇所に<li>を記入。
5,④の箇所に</li>を記入。
6,⑤の箇所に<h4>関連記事はありません</h4>を記入。
7,変更を保存をクリック
8,管理画面>外観のテーマ編集をクリック>スタイルシート
9,スタイルシートに下記のコードを追加
h4 {
font-size: 16px; /*タイトル文字のサイズ*/
padding-left: 10px;
color: #3F3F3F; /*文字の色*/
margin-top: 50px;/*記事と関連記事タイトルの間隔*/
margin-bottom: 5px;
margin-right: 10px;
margin-left: 5px;
font-weight: bold;
border-left-width: 7px;
border-left-style: solid;
border-left-color: #3c78a7;/*記事タイトルの左の色*/
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #EAEAEA;/*記事タイトル下の線色*/
padding-top: 2px;
padding-bottom: 2px;
}
文章、色や間隔などはサイトの雰囲気に合わせてチェンジしてください。