サイドバーのカスタマイズをします
備忘録として書き残そうと思います。
.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%;; } }
以上になります。