Cocoonカスタマイズ　サイドバー編

サイドバーのカスタマイズをします

備忘録として書き残そうと思います。

.widget_categories ul li{
　　border-bottom:1px solid #ddd;/*カテゴリーの区切り線（左から線の太さ、線の形状（直線solid)(点線dotted)(破線dsshed))、線の色*/
}
.widget_categories ul,.search-box{
　　padding:0 2%;/*カテゴリーと検索ボックスの横幅を短くする*/
}
.sidebar h3 {/*サイドバーのタイトル*/
    font-size: 18px;/*文字の大きさ*/
    display: inline-block;
    position: relative;
    width: 100%;
    padding-left: 1.5em;/*左に丸を入れる隙間を開ける*/
　　color:#393f4c;/*文字の色*/
　　margin:20px 0 10px;/*上に20px下に10pxの余白を入れる*/
}
.sidebar h3::after {/*右側の線*/
    content: '';
    position: absolute;
    top: 50%;/*縦位置の指定*/
    width: 35%;/*先の長さ*/
    border-top: 1px solid #393f4c;/**/
　　color:#393f4c;/*線の色*/
　　right: 0;/*線を右端につける*/
}
.sidebar h3::before {/*左側の円*/
     position: absolute;
     top: 50%;/*縦位置の指定*/
     left:5px;/*左から5pxの位置を指定*/
     transform:translateY(-50%);/*位置の調整*/
     content: '';
     width: 8px;/*円の幅*/
     height:8px;/*円の高さ*/
     border: solid 3px #393f4c;/*ボーダーの指定*/
     border-radius:50%;/*円にする*/
}
/*480px以下*/
@media screen and (max-width: 480px){
	.widget-entry-cards{;/*スマホで見たときに横2列に並べる指定（以下全て）*/
		display:flex;
		flex-wrap:wrap;
		justify-content: space-between;
    　　}
	.widget-entry-cards .a-wrap{
		width:49.5%;;
　　　　}
}

以上になります。