AFFINGER6｜コピペでOK！記事一覧などフォント調整について

当ブログは「SWELL」を使用しています。

Madori

AFFINGER6は「本気で戦う」という謳い文句があるように、テーマデザインも強いイメージがありませんか？

もう少し柔らかくシンプルなデザインを求めたときに、決め手となるのがフォントではないでしょうか。

そこで、筆者が行ったカスタマイズをここで紹介いたします。

AFFINGER6では、記事一覧の文字の大きさや太さを管理画面の「全体設定」で細かく指定することができますが、スマホの記事一覧のサイズと太さはCSSを追加する必要があります。

もしよかったら試してみてくださいね！

フォントサイズや太さの調整

以下のCSSを追加します。

記事一覧のフォントサイズ（スマホのみ）

PC・タブレットのフォントサイズは全体設定からできますが、スマホのフォントサイズは以下のCSSを追加します。

dd h3:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no2) a {
 font-size: 15px;
}

筆者は、少し小さめの15pxにしました。

記事一覧のフォントの太さ

AFFINGERは、フォントの太さを設定画面で行うことができないようです。

以下のCSSを追加します。

.kanren h3 a, .kanren h5 a {
 font-weight: normal;
}

内部リンクカードのフォントの太さ

デフォルトでは太字ですが、こちらを細字にします。

以下のコードをコピペするだけです。

p.st-cardbox-t {
 font-weight: normal !important;
}

上記でうまくいかなかったら、こちらをコピペしてください。

h5.st-cardbox-t {
 font-weight: normal !important;
}

CSSコードの調べかた

はっちゃん（@hacchan_415）さんのブログがとてもわかりやすく、大変参考になります！

Turicco

知っておきたい！Chromeデベロッパーツールを使ったCSSセレクタ（クラスやID）の調べ方 デベロッパーツールを使えないとCSSは書けません。 ウェブ開発やデザインの作業を行う際、「特定の要素にどんなCSSセレクタが適用されているかを調べる」ことは非常に重要…

さいごに

以上になります。問題が解決できたら幸いです。

当ブログは「SWELL」を使用しています。