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

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

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

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

\ この記事を書いた人 /

たくろー
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のタイトル文字サイズは、ちょっとだけ大きくするといい感じ?

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

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

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

\ 当サイト最推しテーマ /

テーマを作りました

「シンプルすぎるWordPressテーマ」がコンセプトの無料WordPressテーマを制作しました。

自作・カスタマイズを前提としたテーマになっています。テーマ制作の学習やベーステーマに興味がある方は、ぜひ活用してみてください。

記事をシェア
  • URLをコピーしました!
  • URLをコピーしました!
時間割