関連記事の記事間、人気記事の記事間に線を引く方法
動作環境
Simplicity2.5 安定版とSimplicity2の子テーマ(バージョン:20161002)をインストール。
WordPress Popular Postsのインストール。(バージョン 3.3.4:人気記事表示のプラグイン)
外観 → テーマの編集 → Simplicity2 child: スタイルシート (style.css)
style.cssに追加で書き込めば、設定が反映されます。
/* 関連記事の記事間に線を引く */
#main .related-entry {
border-bottom: 5px dotted #a9b1fc;
padding-bottom: 15px;
}
/* 人気記事の記事間に線を引く */
.wpp-list li {
border-bottom: 5px dotted #a9b1fc;
padding-bottom: 10px;
}
「dotted」の部分を変更すると線の種類が変わります。
solid:1本線 |
|
|
double:2本線 |
|
|
dotted:点線 |
|
|
dashed:破線 |
|
|
「#a9b1fc」の部分を変更すると線の色が変わります。
#ff0000 |
|
|
#cc0000 |
|
|
#990000 |
|
|
|
|
|
|
|
|
|
#00ff00 |
|
|
#00cc00 |
|
|
#009900 |
|
|
|
|
|
|
|
|
|
#ffff00 |
|
|
#cccc00 |
|
|
#999900 |
|
|
|
|
|
|
|
|
|
#660000 |
|
|
#0000ff |
|
|
#0000cc |
|
|
|
|
|
|
|
|
|
#000099 |
|
|
#ff00ff |
|
|
#cc00cc |
|
|
|
|
|
|
|
|
|
#990099 |
|
|
#00ffff |
|
|
#00cccc |
|
|
|
|
|
|
|
|
|
#009999 |
|
|
#000000 |
|
|
#666666 |
|
|
|
|
|
|
|
|
|
#999999 |
|
|
#cccccc |
|
|
#ffffff |
|
「border-bottom: 5px」の数字の部分を変更すると線の太さが変わります。
dotted:点線:1px |
|
|
dotted:点線:2px |
|
|
dotted:点線:3px |
|
|
dotted:点線:4px |
|
|
dotted:点線:5px |
|
|
dotted:点線:6px |
|
|
dotted:点線:7px |
|
|
dotted:点線:8px |
|
|
dotted:点線:9px |
|
|
dotted:点線:10px |
|
|
「padding-bottom: 10px;」の数字の部分を変更すると文字と線の間の余白が変わります。
文字と線の間の余白が「5px」です。 |
文字と線の間の余白が「10px」です。 |
文字と線の間の余白が「15px」です。 |
文字と線の間の余白が「20px」です。 |
文字と線の間の余白が「25px」です。 |