※商品PRを含む記事です。当メディアはAmazonアソシエイト、楽天アフィリエイトを始めとした各種アフィリエイトプログラムに参加しています。当サービスの記事で紹介している商品を購入すると、売上の一部が弊社に還元されます。
.box11{
position: relative;
padding: 0.25em 1em;
margin: 2em 0;
color: #5d627b;
background: white;
border-top: solid 5px #5d627b;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
}
.box11 p {
margin: 0;
padding: 0;
}
.box20 {
position: relative;
padding: 0.25em 1em;
margin: 2em 0;
top: 0;
background: #efefef;
}
.box20:before, .box20:after{
position: absolute;
top: 0;
content:'';
width: 10px;
height: 100%;
display: inline-block;
box-sizing: border-box;
}
.box20:before{
border-left: dotted 2px #15adc1;
border-top: dotted 2px #15adc1;
border-bottom: dotted 2px #15adc1;
left: 0;
}
.box20:after{
border-top: dotted 2px #15adc1;
border-right: dotted 2px #15adc1;
border-bottom: dotted 2px #15adc1;
right: 0;
}
.box20 p {
margin: 0;
padding: 0;
}
/*-- 人気記事デザイン --*/
ul.wpp-list li {
border-bottom: 1px dashed #79c06e;/*記事間の点線と色*/
position: relative;/*相対位置*/
counter-increment: wpp-count;/*カウント数*/
}
ul.wpp-list li img {/*アイキャッチ画像*/
margin: 10px 10px 10px 0px;/*画像の余白*/
padding: 3px;/*画像の位置*/
}
ul.wpp-list li a.wpp-post-title {/*記事タイトル*/
display: block;/*ブロック形式で表示*/
font-size: 15px;/*文字サイズ*/
color: #333;/*文字色*/
padding: 12px;/*タイトル位置*/
text-decoration: none;/*タイトルの下線なし*/
}
ul.wpp-list li a.wpp-post-title:hover {
color: #4169e1;/*ホバー時のタイトル色*/
}
ul.wpp-list li:before {/*ランキングカウンター全体*/
content: counter(wpp-count);/*カウンターを表示*/
display: block;/*ブロック形式で表示*/
position: absolute;/*絶対位置*/
font-size: 16px;/*数字サイズ*/
font-weight: bold;/*数字を太字に*/
color: #fff;/*数字の色*/
background-color: #333;/*背景色*/
padding: 5px 15px;/*縦と横の幅*/
border-radius: 6px;/*角の丸み*/
left: 0;/*右からの位置*/
top: 0;/*下からの位置*/
opacity: 1;/*透明度*/
z-index: 5000;/*重なりの順序*/
}
ul.wpp-list li:nth-child(1):before{/*ランキング1*/
background-color: #FBCC54;/*背景色*/
}
ul.wpp-list li:nth-child(2):before{/*ランキング2*/
background-color: #B7BFC1;/*背景色*/
}
ul.wpp-list li:nth-child(3):before{/*ランキング3*/
background-color: #D47B16;/*背景色*/
}
商品やサービスを紹介する記事の内容は、必ずしもそれらの効能・効果を保証するものではございません。
商品やサービスのご購入・ご利用に関して、当メディア運営者は一切の責任を負いません。
![chokotty[ちょこってぃ]](https://cktt.jp/assets/common/cktt_logo_PC_2-40c5a35e8da64f225f3dcdf1b548a3f3373f85eeab336668a1c00fe9a8ab42c8.png){kind=logo}
