SWELLの記事タイトルの文字サイズって、デフォルトだと自由に変更できないので困っちゃいますよね…！
そんな時はCSSコードで自分好みにカスタマイズしちゃいましょう！
ということで今回は、SWELLの記事一覧タイトルの文字サイズ変更方法をわかりやすく解説していきます。
目次
デフォで変更は無理
SWELLではデフォルトで記事タイトルの文字サイズの変更ができないため、CSSコードで文字サイズを変更する必要があります。
今回はCSSコードも配布しますのでコピペでOKです。
WordPress管理画面 → 外観 → カスタマイズ → 追加CSS に貼り付け
/* ============================================
記事一覧タイトル フォントサイズ調整
============================================
★ 使い方：下の数値を変えるだけでOK！
WordPress管理画面 → 外観 → カスタマイズ → 追加CSS に貼り付け
============================================ */
/* --------------- PC（600px以上） --------------- */
@media screen and (min-width: 600px) {
.-type-card .p-postList__title,
.-type-list .p-postList__title,
.-type-list2 .p-postList__title {
font-size: 13px; /* ← PC用：お好みで変更（元は16px） */
}
}
/* --------------- モバイル（599px以下） --------------- */
@media screen and (max-width: 599px) {
.-type-card .p-postList__title,
.-type-list .p-postList__title,
.-type-list2 .p-postList__title {
font-size: 13px; /* ← モバイル用：お好みで変更（元は3.6vw） */
}
}基本的にはこのままコピペでも、記事一覧からの記事タイトルの文字が一回り小さくなるのでちょうどいいと思いますが、調整を行いたい場合はCSSコード内で案内を行なっている部分の数値を変更してください。
font-size: 13px; /* ← PC用：お好みで変更（元は16px） */ font-size: 13px; /* ← モバイル用：お好みで変更（元は3.6vw） */13pxより数値を小さくすればさらに文字は小さくなります。
このカスタマイズを行うメリット
自分にとっては、特にモバイル表示の際に文字サイズが大きすぎてデザインが結構くずれてしまっていたんですよね。
それで記事タイトルを読みづらくなったりしていたので、小さくコンパクトにまとめることでデザインを整えることができました。
サムネイルメインの方なども、文字を小さくしてみると良いかもしれません。
コメント