『SWELL』トップページ・サイドバーのタイトル文字を細くするCSS

あるとき、ふとトップページのデザインが気になり始めたかきばナ。

そこで、CSSを追加してスッキリさせてみました。

今回は、SWELLでトップページの文字を細くするために使用したCSSをご紹介します。

『SWELL』トップページ・サイドバーのタイトル文字を細くするCSS

文字の太さを変えられる場所は、以下の3つに分かれているので、必要に応じて使用してください。

1. 投稿一覧
2. サイドバータイトル
3. 人気記事・新着記事など

各CSSは「外観」→「カスタマイズ」→「追加CSS」の最下部に貼り付けましょう。

①投稿一覧の文字を細くするCSS

/* 投稿一覧タイトル文字を細くする */
.p-postList__item h2.p-postList__title {
    font-weight: normal;
}

②サイドバータイトルの文字を細くするCSS

/* サイドバータイトル文字を細くする */
.c-widget__title {
    font-weight: normal;
}

③人気記事・新着記事などの文字を細くするCSS

/* 人気・新着記事タイトル文字を細くする */
.p-postList__item div.p-postList__title {
    font-weight: normal;
}

さいごに

使用しているフォントによってはfont-weight: normal;のnormalを100,200,300…と、より細かく太さを指定できます。

例）font-weight: 100;