【SWELL】さぁ、始めようのフォントサイズ変更方法(メインビジュアルのカスタマイズ)

SWELL メインテキスト さぁ、始めよう。のフォントサイズの変更方法(CSSカスタマイズ)

こんにちは、ばにゃです。

本記事では、WordPress テーマ SWELL 環境において、トップページ上部に表示されている「さぁ、始めよう。」という部分のフォントサイズを変更する方法について解説します。

ばにゃ

追加CSSにコピペするだけなので手順は 1分 で終わります。

SWELL さぁ、始めよう。

結論、CSSに以下を追加すればOKです。

/* メインビジュアル メインテキスト フォントサイズ */
.p-mainVisual__slideTitle {
    font-size: 26px;
}
/* メインビジュアル メインテキスト フォントサイズ スマホ用 */
@media (max-width: 480px){
	.p-mainVisual__slideTitle {
		font-size: 20px;
	}
}

上記例では「さぁ。始めよう。」のフォントサイズをPC表示用に 26px、スマホ表示用に 20px としていますが、font-size: で指定している箇所をお好きなサイズに変更してください。

HTML・CSS についての知識があり、細かい説明が不要な方はこれ以降の内容は読まなくても問題ありません。上記をもとに適当にカスタマイズしてください。

ばにゃ

ということで 1分 で終わりました。さようなら、また見に来てね。

もう少し詳しい手順を知りたい方、別に見なくても大丈夫だけどせっかくだから見てもいいかなという方は、以降の内容も読んでみてください。

目次

はじめに

メインビジュアルについて

SWELLのトップページ上部に表示されている部分を「メインビジュアル」と呼びます。

SWELL メインビジュアル

メインビジュアルの各種設定・カスタマイズは SWELL公式サイト でも解説されていますが、メインビジュアル内に表示されている「さぁ、始めよう」部分のフォントサイズ変更方法については解説がありません。

調べてみたところ「さぁ、始めよう」部分のフォントサイズを変更するには CSS をカスタマイズする必要があるとわかりました。

メインテキストについて

メインビジュアルで「さぁ、始めよう。」と初期設定で表示されている部分は、正確には「メインテキスト」という名称です。

SWELL メインビジュアル メインテキスト

そのため本記事で解説する内容は、SWELL メインビジュアルのメインテキストのフォントサイズを変更する方法 が正しいですが、これだと何を言っているのかよくわからなくなるので「さぁ、始めよう。のフォントサイズを変更する方法」という書き方で解説してきます。

さぁ、始めよう。のフォントサイズを変更する方法

SWELL 環境のトップページ上部に表示されている「さぁ、始めよう。」という部分のフォントサイズ(文字サイズ)を変更するには、CSSをカスタマイズする必要があります。CSSがあまりよくわからない初心者の方でも、以下の手順通りにすれば問題ありません。

CSSのカスタマイズ画面を開く

  1. WordPressの管理画面より「外観」>「カスタマイズ」を選択します。
WordPress 外観 カスタマイズ
  1. カスタマイズ画面が開くので、左下に表示されている「追加CSS」を選択します。
WordPress 外観 カスタマイズ 追加CSS
  1. CSSの入力画面が開きます。
追加CSS入力画面

この「追加CSS」に「さぁ、始めよう。」のフォントサイズを変更するためのCSSを追記していきます。

フォントサイズを変更する

「追加CSS」入力フィールドに以下の内容を追記して「公開」をクリックします。

この例ではフォントサイズをPC表示用に 26px、スマホ表示用に 20px としています。

/* メインビジュアル メインテキスト フォントサイズ */
.p-mainVisual__slideTitle {
    font-size: 26px;
}
/* メインビジュアル メインテキスト フォントサイズ スマホ用 */
@media (max-width: 480px){
	.p-mainVisual__slideTitle {
		font-size: 20px;
	}
}
CSSカスタマイズ

上記設定後「さぁ、始めよう。」のフォントサイズは以下のように変更されます。

SWELL さぁ、始めよう。フォントサイズ 28px
CSSカスタマイズ前:フォントサイズ 28px
SWELL さぁ、始めよう。フォントサイズ 26px
CSSカスタマイズ後:フォントサイズ 26px

以上で「さぁ、始めよう。」のフォントサイズを変更するための手順は完了です。

SWELLの初期設定では PC表示用は 28px、スマホ表示用は 22px というフォントサイズになっているようなので、上記例(PC表示用 26px、スマホ表示用 20px)通りに設定すると、フォントサイズがやや小さくなります。

その他のカスタマイズ

サブテキストのフォントサイズ変更方法

SWELLではメインテキスト「さぁ、始めよう。」の下にサブテキストを表示させることが可能です。

SWELL メインビジュアル サブテキスト

このサブテキストのフォントサイズについても、メインテキスト「さぁ、始めよう。」のフォントサイズと同じようにCSSをカスタマイズすることで変更可能です。

/* メインビジュアル サブテキスト フォントサイズ */
.p-mainVisual__slideText {
    font-size: 20px;
}
/* メインビジュアル サブテキスト フォントサイズ スマホ用 */
@media (max-width: 480px){
	.p-mainVisual__slideText {
		font-size: 16px;
	}
}

メインテキストでは .p-mainVisual__slideTitle ですが、サブテキストでは .p-mainVisual__slideText という書き方になります。

にほんブログ村 IT技術ブログへ
にほんブログ村

よかったらシェアしてね!

この記事を書いた人

ばにゃ ばにゃ システムエンジニア

国内大手SIer勤務、SE10年以上やっています。これまでの経験を元にIT技術情報やIT資格試験、たまに投資/資産形成やSE界隈の話について記事にしていきます。

コメント

コメントする

CAPTCHA


目次