SWELLのタイトル文字サイズ変更カスタマイズ【CSS】

2023年1月6日2023年1月26日

たくろー

この記事では、SWELLのタイトル文字サイズを変更するカスタマイズをご紹介します。

純正機能では対応していませんので、CSSを追加する形で調整しましょう。

「そもそもSWELLとは」については、下記の記事をご参考ください。

あわせて読みたい

SWELLの口コミ評判は？特徴や使い方、料金を全力レビュー評判のWordPressテーマ「SWELL」をご紹介します。 SWELLは2019年に販売開始されて以来ずっと人気のテーマです。個人的にも、仕事やプライベートで30以上にのぼるサイト…

カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。

Amazonで詳細を見る

時間割

たくろー

Webディレクター

ライティングから編集、校正、ディレクション、SEO対策、アクセス解析、撮影、画像編集、Web制作と、なんでもやってるwebディレクターです。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』

文亭とは

SWELL投稿ページのタイトル文字サイズを変更するカスタマイズ

SWELLの投稿ページタイトル文字サイズを変更するには、class「c-postTitle__ttl」を指定してフォントサイズを調整します。

「外観→カスタマイズ→追加CSS」と進み、下記のコードを追加してください。

/*投稿ページのタイトル*/
.c-postTitle__ttl{
font-size:2rem;
}

上記コードで文字サイズの指定につかっている「rem」という単位は、HTMLで指定されている通常テキストサイズを「1」として、その倍率でサイズをあらわすものです。

例えば「1.5rem」なら通常フォントの1.5倍サイズになり、「2rem」なら2倍、「0.8rem」なら0.8倍になります。

もちろんpxなどを使って直接サイズ指定しても問題ありませんので、お好みで調整してください。

SWELL固定ページのタイトル文字サイズを変更するカスタマイズ

固定ページのタイトル文字サイズを変更するときは、class「c-pageTitle」を指定しましょう。

「外観→カスタマイズ→追加CSS」と進み、下記のコードを追加してください。

/*固定ページのタイトル*/
.c-pageTitle{
font-size:1.5rem;
}

こちらも投稿ページのカスタマイズと同様に、サイズ部分は自由に調整してください。

フォントサイズ指定に関する簡単な解説

フォントサイズの指定には、主に「px」「rem」「em」「%」の4種類が使われます。

px：サイズの絶対値指定（例：24px）
rem：HTMLの文字サイズを基準とした倍率指定（例：1.5rem）
em：親要素の文字サイズを基準とした倍率指定（例：1.5em）
% :emと同様に親要素を基準とした倍率指定（例：150%）

基本的にはremが使いやすいかと思います。

SWELLのタイトル文字サイズは、ちょっとだけ大きくするといい感じ？

当サイト文亭でも、タイトルの文字サイズは少しだけ大きくなるよう調整しています。

カスタマイザーの画面を見ながら、好みの大きさになるよう調整してみてください。

なおタイトル文字を非表示にするカスタマイズは下記の記事で解説していますので、あわせてご参考ください。