スマホで文字サイズを小さく。画面に合わせた文字の調整法

2025年8月7日

スマホでは文字を小さくしたい！

ホームページを作っていると、会社名やサービス名などを大きく目立たせたいと感じる場面があります。
PCでは問題なく見えていても、スマートフォンで見ると文字が大きすぎて折り返され、不格好になることも。
そんなときに「スマホだけ文字サイズを小さくしたい」と考えたことはありませんか？

意図しないところで折り返しが発生。。

画像として用意する方法もある

文字サイズのコントロールが難しい場合、画像にしてしまうという方法もあります。
画像編集ソフトやCanvaのようなツールを使えば、会社名やブランド名をきれいにデザインした画像を作成できます。
画像であればスマホでも縮小表示されるため、レイアウト崩れを防ぎやすいのがメリットです。

画像なら折返しは発生しません。

画像が用意できないときはCSSで対応

「画像を作るのが面倒」「後から文字を変更したい」という場合には、CSSで対応するのがおすすめです。
PAGEKitには「オリジナルCSS」機能があるので、これを使って画面サイズごとのスタイルを設定できます。

それでは、実際の画面で手順を紹介します。

実際の手順

1．編集ページを開く

通常通り、対象となるページの編集画面を開きます。

2．文字を入力する

文字サイズを調整したいテキストを本文中に入力します。

3．HTML部分編集でクラス名を付ける

対象テキストを選択して「HTML部分編集」へ。たとえば次のようにクラス名を付けます：

< span class="company_logo">〇〇株式会社</span>

4．編集を保存して終了する

HTML部分編集を終えたら、必ず保存して編集画面を閉じます。

5．「背景・カラー」からデザイン編集へ進む

ページ上部メニューの「背景・カラー」をクリックし、デザイン編集画面へ進みます。

6．「オリジナルCSS」→「編集」をクリック

デザイン編集画面内の「オリジナルCSS」タブを開き、「編集」ボタンを押します。

7．オリジナルCSSにメディアクエリを記述

以下のように、スマホ用のスタイルを設定します：

@media screen and (max-width: 950px){
.company_logo {font-size:12pt !important; }
}

8．CSSの編集を保存

記述が終わったら「設定」ボタンで保存します。

9．「オリジナルCSSを利用する」にチェックを入れて保存

最後に「オリジナルCSSを利用する」にチェックを入れ、「変更を反映する」ボタンをクリックします。

まとめ

メディアクエリを使えば、スマホとPCで異なるスタイルを指定でき、より細やかなデザイン調整が可能になります。
今回ご紹介した方法は、文字サイズだけでなく、行間や余白、色の変更などにも応用可能です。
「ちょっとだけスマホ用に調整したい」そんなときは、ぜひ活用してみてください。

ホームページかんたん作成のPAGEKit（ページキット）

ホームページを作るのは、むずかしそう。そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。まずは一度、実際の使いやすさを体験してみませんか？

サンプルを作ってみる！