【SWELL】投稿ページのタイトルを目立たせる

「SWELLの投稿ページのタイトルを↑のように、もう少し目立たせたい！」
と思うことはありませんか？

この記事では、SWELLの投稿タイトルをもう少し目立たせる方法をご紹介します。

前提条件

お使いのバージョンやプラグインの相性、すでに適用している他のカスタマイズ等によっては動作しない可能性があります。

SWELLの投稿タイトルは目立たない？

SWELLの投稿タイトル周りは、他のテーマと比べると以下のような特徴があります。

（特にPC閲覧時に）タイトル周りの隙間が大きく空いてシンプルに見える

SWELLのタイトルは、本文やパンくずリストとの間が広く空いています。
そのため、ごちゃごちゃ感がなくタイトルエリアが独立してスッキリ見えるのが特徴です。
タイトルエリア自体は目立つようになっていると思います。

広告やカテゴリーなどの表示がタイトルに近い

一方で、広告・PR表記やカテゴリー・タグ類、投稿・更新日時などの文字がタイトル直下に表示されます。
よってタイトル付近はごちゃついている印象です・・・

タイトルの文字の大きさや太さがやや小さめ

さらにタイトル文字が小さめでボールド（太字）も控えめ。

まとめると…

SWELLの投稿タイトルは、タイトルエリア自体は目立つものの、エリア内にタイトル以外の表示が多く出てしまいタイトルの文字が埋もれて見えます。

SWELLの投稿タイトルをカスタマイズ

SWELLの投稿タイトルをCSSでカスタマイズする場合、「.c-postTitle__ttl」というクラス名をしています。
管理画面から「外観」－「カスタマイズ」－「追加CSS」を開き、次項以降の文を追加して保存します。

文字サイズ変更

文字サイズ（フォントサイズ）を変更するだけでも、だいぶ目立つようになります。
ただし、長めのタイトルでは２段表示になり得るため、大きくしすぎると読みにくくなることもあります。

以下の「2rem」は2倍にするという意味です。
1.5rem（1.5倍）のように小数で細かく倍率を設定することができます。

.c-postTitle__ttl{
font-size:2rem;
}

文字を中央揃えにする

文字を左寄せから中央揃えにする変更することで、左側の広告やカテゴリーをタイトルから遠ざけることができます。

.c-postTitle__ttl{
text-align:center;
}

タイトル背景を色で塗りつぶす

タイトルに背景色を付けることで、タイトルを目立たせることもできます。

以下の「e6b422」は色コードです。好みの色に変更してください。
原色に近い色でも良ければ、redやgreenなど色名を設定することもできます。

.c-postTitle__ttl{
background-color:#e6b422;
}

全て合わせる

文字サイズ変更、中央揃え、背景色を全て対応することも可能です。

.c-postTitle__ttl{
font-size:2rem;
text-align:center;
background-color:#e6b422;
}

固定ページも対応する

投稿ページだけでなく、固定ページのタイトルも同じようにしたい場合もあるでしょう。
その場合は、「.c-pageTitle」というクラス名を使用します。

.c-pageTitle,
.c-postTitle__ttl{
font-size:2rem;
text-align:center;
background-color:#e6b422;
}

まとめに替えて

投稿記事タイトルはページ表示時に必ず目に入る部分です。
何が書いてあるのかを瞬時に読者に理解させるために、分かりやすい工夫が必要です。
とは言っても、ブログ・サイトの肝は記事の中身ですから、目立ちすぎてもダメですが…

一工夫重ねて、他のサイトと差をつけてみましょう！