【SWELL】メインビジュアルのフォントサイズの変更方法・2選

トップページのヘッダー画像エリアをSWELLでは「メインビジュアル」と呼びますが、そのメインビジュアル画像の上に表示されるテキストのサイズ変更に関する設定がSWELLにはないみたいなんですね。
あってもおかしくない箇所だとは思うんですけどねぇ。

まあ製作者側の何らかの思惑があるんでしょう。
ということでここではそのテキストサイズの変更のやり方を2つご紹介します。

スタイル追加で変更

SWELLでのデフォルトのフォントサイズの変更は「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」→「フォント設定」から変更できます。

メインビジュアルのフォントサイズの設定項目がデフォルトでは用意されてないため、以下のスタイルを子テーマのstyle.cssもしくは追加CSSに加筆します。

/*ヘッダー上のテキスト調整用*/
.p-mainVisual__slide {
	font-feature-settings: "palt";
}
.p-mainVisual__slideTitle {
	font-size: 1.5em;
}
.p-mainVisual__slideText {
	font-size: 1.2em;
}
@media screen and (min-width: 1025px) {
	.p-mainVisual__slideTitle {
		font-size: 3.5em;
	}
	.p-mainVisual__slideText {
		font-size: 1.5em;
	}
}

3行目は自動カーニング有効化の設定です。ただしフォントが対応してないと機能しません。
WebフォントのNoto Sans JPや游ゴシックなどは対応。（メイリオは非対応）
必要なければ2～4行目までを削除もしくはコメントアウトします。

/*.p-mainVisual__slide {
font-feature-settings: "palt";
}*/

.c-mvBtn__btn{
font-size: 1.5em;
}

テキストカラーなんかもスタイルを追加すれば変更は可能です。
ここでは割愛しますのでCSSに詳しい方はトライしてみてください。

ブログパーツで変更（推奨）

HTMLやCSSに詳しくない方はこちらの方が簡単です。というかこちらの方が断然ラクです。
しかもテキストサイズや色なんかもすぐに変えられるし、装飾効果もすぐにつけられます。

まずはこのページ冒頭の画像にあるメインテキストとサブテキストに入力したテキスト内容でブログパーツを新規作成します。

ここでテキストサイズや色なんかも変更しちゃいます。
ブログパーツなら囲みなどの装飾効果も簡単につけられるのがいいですよね。

完成したら”公開”します。
続いてブログパーツの管理画面を開くと今公開したブログパーツが登録されてるので、ショートコード欄の数値をコピーします。

メインビジュアルの設定画面を開き、先に設定済みのテキストを削除します。（残しておくと二重表示になっちゃいます）
続いて『ブログパーツID』欄にコピーしたショートコード用の数値をペーストします。
これで最初に設定したのとほぼ同じレイアウトでテキストを表示することができます。囲み装飾もちゃんと適用されてます。

この状態で公開します。サイトをリロード（更新）してみるとちゃんと反映されてます。

このやり方の便利なところはテキストの大きさや色、装飾などブログパーツ側で変更した設定が即反映されるということ。だから修正も簡単です。

たとえばブログパーツ側でテキストの一部を赤文字に設定してみます。すると即座に変更が適用されるんです。
これならいちいちスタイルをいじくる必要がありません。

囲み枠線など（SWELLで予め設定済み）の色を変更するにはスタイルを追加指定する必要があります。

余談ですが、一段目のテキストを見出しブロックにしてH1を指定してみました。

実際にサイトのソースを除いてみるとちゃんとテキストとしてH1が反映されてます。
SEO的にも問題はないですね。