【SWELL】固定ページのタイトルを中央寄せで美しく整える追加CSS

2025-01-11

「固定ページのコンテンツヘッダーをもう少しお洒落にしたい！」とお考えの方向けの記事です。

このブログでは、私自身の備忘録として、お洒落なデザインのアイデアや実装の手順を記録していきます。同じように悩んでいる方の参考になれば嬉しいです！

Before

After

SWELLの標準仕様

SWELLの固定ページタイトルは、デフォルトではこのように左寄せで表示されます。

今回はこちらを中央寄せにカスタマイズする方法を記述していきたいと思います。

固定ページのタイトルを中央寄せで美しく整えるためのCSS

タイトルを中央寄せにするCSS

 /* タイトルの中央寄せ */
.c-pageTitle {
    text-align: center;
}

css記述後

サブタイトルの斜体を解除し調整するCSS

中央寄せにはできましたが、サブタイトルが右側にあると違和感があるため、改行します。また、斜体だとかっこいい印象になりすぎてしまうので、今回は女性向けのサイトに合わせて斜体を解除します。さらに、サブタイトルも中央寄せにし、上下の余白を調整して仕上げていきます。

/* サブタイトルの斜体を無効化 */
.c-pageTitle__subTitle {
    font-style: normal;
    letter-spacing: var(--swl-letter_spacing, 1px);
    margin-left: 0em;
    opacity: .8;
    position: relative;
    top: -2px;
}

.c-pageTitle__subTitle {
    display: block; /* サブタイトルを改行 */
    margin-top: 10px; /* 上下の余白調整 */
    text-align: center; /* サブタイトルも中央寄せ */
}

css記述後

h1のフォントサイズを調整するCSS

これで完成でも問題ありませんが、文字サイズが少し小さく見づらいと感じたため、調整を加えました。

/* h1のフォントサイズを調整 */
.c-pageTitle {
    font-size: 2.5em;
    line-height: 1.4;
    position: relative;
}

css記述後

これで完成です！

固定ページの「パンくずリスト」を整えたい方はこちらの記事をご覧ください^^

【SWELL】固定ページのタイトルを中央寄せで美しく整える追加CSS

SWELLの標準仕様

固定ページのタイトルを中央寄せで美しく整えるためのCSS

タイトルを中央寄せにするCSS

サブタイトルの斜体を解除し調整するCSS

h1のフォントサイズを調整するCSS

関連記事

関連記事