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)さんのブログがとてもわかりやすく、大変参考になります!
知っておきたい!Chromeデベロッパーツールを使ったCSSセレクタ(クラスやID)の調べ方
デベロッパーツールを使えないとCSSは書けません。 ウェブ開発やデザインの作業を行う際、「特定の要素にどんなCSSセレクタが適用されているかを調べる」ことは非常に重要…
さいごに
以上になります。問題が解決できたら幸いです。
当ブログは「SWELL」を使用しています。