THETHORで記事一覧ページのタイトルサイズを変更する方法!!

 
マーシー
この記事ではTHETHORで【記事一覧ページのタイトルサイズを変更する方法】について紹介しているよ!!

記事一覧ページのタイトルサイズを変更する方法

PC画面に慣れていると、スマホ画面って意外とサイズ感があってなくて大きく感じたり、小さく感じたりとしたことありませんか?

作業自体はとても簡単なので、PC画面とスマホ画面のタイトルサイズ(記事一覧)を自分好みに調整してみて下さいね!!

PCの場合

追加CSSにCSSコードを記載することで、PC画面で表示されるアーカイブ(記事一覧)のタイトルサイズを調整することができます。

PC画面のタイトルサイズ(記事一覧)を変更する場合には、下記のCSSコードをコピペして下さい。色が付いている「20px」の部分の数値を変えることによってタイトルサイズが調整できます。

.archive__contents .heading a { font-size: 20px;}

スマホの場合

追加CSSにCSSコードを記載することで、スマホ画面で表示されるアーカイブ(記事一覧)のタイトルサイズを調整することができます。

スマホ画面のタイトルサイズ(記事一覧)を変更する場合には、下記のCSSコードをコピペして下さい。色が付いている「20px」の部分の数値を変えることによってタイトルサイズが調整できます。

@media only screen and (max-width: 767px) {.archive__contents .heading a { line-height: 20px;}}

「CSSコードをどこにコピペすればいいの?」という方は、THETHORでの追加CSSの記載場所や方法を下記の記事で詳しく解説していますので合わせて読んでみて下さいね!!

THORでCSSコードを追加記載する方法を紹介!!