Kindle IT・専門書フェアへ

SANGO 「カードや記事、ウイジェットの角を丸くする方法」

はじめに「WordPressテーマのSANGOカスタマイズ」

SANGOの記事一覧のカードの角を丸くしたくて調べてやってみた。

手順

  • カスタマイズでCSSを追加する

「外観」-「カスタマイズ」-「追加CSS」を開き、以下のCSSを追加する

/*カードの丸み*/
.cardtype .cardtype__article {
    border-radius: 10px;/*丸み度合い*/
}
.cardtype__img img {
    border-radius: 10px 10px 0 0;
}

.sidebar .widget:not(.widget_search) {/*サイドバーウィジェットに丸み*/
    border-radius: 10px;/*丸み度合い*/
    overflow: hidden;
}
.textwidget p {
margin-top: 0;
}

/* 記事の丸み */
article#entry {
    border-radius: 10px 10px;
}
/* 検索窓 */
input#s {
border-radius: 10px 10px;
}
#searchsubmit {
border-radius: 0px 10px 10px 0px;
}
/* 前後の記事の横長カード*/
div.prnx_tb {
border-radius: 10px;
}
/*end カードの丸み*/

まとめ

参考サイトにカードの角丸の説明があったので、それにカードの画像(アイキャッチ)と記事の丸みを追加した。

参考サイト