【超簡単】文字サイズをスマホ/PCに対応!

ABOUTこの記事をかいた人

杉本 郁

1991年6月生 はり師/きゅう師/あん摩マッサージ指圧師の免許を所有。自費による鍼灸マッサージ院に就職後23歳で副院長、24歳で院長を経験。その後25歳で退社・独立。自身の治療技術に限界を感じ、より技術の高い先生のサポートをする様になる。“治して欲しい患者“と“治せる技術を持つセラピスト“を繋げるためWEBマーケッターとして活動中。

治療家さんが僕の周りには多いのですが、その方々は日々ブログを一生懸命書いています。

そんなブログは一生懸命書けるし、毎日毎日律儀に頑張ってホームページの質を上げている先生方で残念なのが

【症状別ページ】

これの何が残念なのか…
全体的に良い構成なのに、テキストの部分だけ『あともうちょっとなのになぁ』という所です。
このちょっとが最初の印象を大きく左右します。

スマホ/PC両対応のHP

今多くのHPはレスポンシブデザイン。
つまり、スマートフォン/パソコンどのデバイスでも最適に見られる。というデザインです。

ちなみにここのHPもレスポンシブデザインです。
試しにブラウザの幅を小さくしてみて下さい。

いかがでしょうか…?
このように、全体的なデザインがブラウザ(或いは端末)幅に合わせて変化するホームページデザインの事をレスポンシブデザインと言います。

今は、スマートフォンにHPが対応していないと致命的です。

レスポンシブデザインの難しい点

さて、スマホ/PC両対応のHPに関して理解して頂きました。
このレスポンシブデザインの何が問題なのか?

bodyの幅は自由に変わるけど文字サイズは基本的に固定ということです。

また新しい用語“body”という言葉が出てきました。
これについて簡単に説明すると、今皆さんが読んでいるこの記事が書いてある部分です。

このメインのコンテンツが入力されるのが“body”という部分になります。

bodyは変わるけど文字サイズは変わらない

問題はこれなんです。
一つのHPで複数の解像度に対応できるのですが、文字は完全に固定で表示されるという事です。

多くの人がやる対応がPCで編集している時に

先生
なんか文字小さいな。大きくするか

ということで、パソコンでの編集の時に文字を大きくします

こんな感じに

どうですか?皆さんそんな風に編集していませんか?
上記みたいに短い文章なら全く問題無いのですが、例えば

朝起きた瞬間に痛む腰痛で
お困りのあなたへ

このようにすると、パソコン画面では違和感無く表示されますが、スマートフォンでは本来意図した所とは別の所で改行されてしまい、一気に素人感が増してしまいます…。HPの信頼度もガタ落ちです。

文字サイズの変更方法には色々ある

上の文字を大きくするために書き込んだHTMLは“パーセント”を使いました。
文字サイズの変更方法はいくつかありまして

  • ポイント
  • ピクセル
  • パーセント

どれも同じような挙動を示します

これはポイントでサイズ変更
これはピクセルでサイズ変更
これはパーセントでサイズ変更

これは文字サイズを指定したサイズに変更するため、ブラウザの幅が変わっても文字サイズは固定です。

大きな画面に合わせた文字サイズだと、スマホなどの小さい画面になったときに変な表示の仕方や改行、不自然な行間になります。
実際上の文字サイズに関してもPCで見ると一行に納まっていますがスマホで見ると変な改行状態になっています。

この不自然な改行を無くす方法が実はあるんです。

幅に合わせてサイズを変更させる方法がある

実は、ブラウザや画面のサイズに合わせて文字サイズを自動で変更させる挙動を出す事が可能なのです。
(多くの場合はメディアクエリでブレイクポイントを設定するのですが、たぶんその話は不可能なので…)

文字サイズの上限を決めて、幅がが小さくなったら文字サイズも小さく、逆に幅が大きくなったら上限に達するまで大きく。
という様に、勝手にブラウザ側で変えてくれる方法です。

ここまでスマートフォンでこのブログを読んでいただいていた方はここから、パソコンに切り替えて読んでみて下さい。

PCでブラウザの幅を変えてみよう!

どんな風に挙動が変わるかな?

今すぐご予約の連絡をして下さい!

今すぐご予約の連絡をして下さい!

今すぐご予約の連絡をして下さい!

今すぐご予約の連絡をして下さい!

いかがでしょうか?一番下の文字だけ幅に合わせて文字サイズが変わっていませんか?
こういう挙動をさせる事が出来るのです。

中途半端なブラウザの幅だと2行になってしまっているかもしれませんが、通常のPCにおけるブラウザ幅とスマホのブラウザでは一行として表示されています。
これで変な改行になる事はありません。

どうやるのよ

さて、前置きが長くてすいません。本題です。
これを簡単にできなければ、WEBの得意でない整体師の先生には全く意味がありません。

ワードプレスを使われているというのを前提に話しますが、HTMLの話なのでWEBの原理原則ですからほぼ全てのWEBサイトで機能するはずです。

ビジュアルモードではなくテキストモードに

ワードプレスの編集画面は【ビジュアルモード】と【テキストモード】に切り替える事が可能です。
多くの治療科の先生はビジュアルモードで使用されていると思いますが、この挙動をだしたいときは“テキストモード”で編集する様にして下さい。

クリックで拡大

簡単な文字サイズ変更のHTMLを入力

文字サイズを大きくしたいテキストの所にカーソルを合わせて下記のHTMLを入力します。

<span style="font-size: 5vmin;">ここにテキスト</span>

『ここにテキスト』の部分は任意の文字に変更して下さい。
実際にやってみると

クリックで拡大

これで、ブラウザの幅やPCやスマホのどちらで見ても文字が最適化されて表示される様になります。

注意点がいくつか

一見スゴそうなテクニックなのですが、もちろんデメリットもあります。
あまりに長いテキストはそもそもどうやっても一行に表示することが出来ません。

例えば、、、
長い長い長い長い長い長い長いテキストを打ち込んだとするとこんな感じになります

ある一定の下限と上限の文字サイズが決められるので極端にはなりませんが、違和感が出ることがあります。なのでこのテクニックを使う場合は長すぎない様に注意。或いは長くなりそうだな。と感じたら、自分の好みのタイミングで改行させて下さい。

こんな感じに
改行を組み合わせると
とても読みやすい

自分の任意のタイミングで改行を仕込む事が出来ますので、変な改行に悩まされることも無くなり、HPを訪れた人も実に見やすい!

これでヘッドラインも
訴求力が高いものにっ!

“vmin”の手前の数字は色々変えられます

文字サイズの変更

文字サイズの変更

文字サイズの変更

文字サイズの変更

文字サイズの変更

これは上から順番に

<span style="font-size: 4vmin;">ここにテキスト</span>
<span style="font-size: 4.5vmin;">ここにテキスト</span>
<span style="font-size: 5vmin;">ここにテキスト</span>
<span style="font-size: 5.5vmin;">ここにテキスト</span>
<span style="font-size: 6vmin;">ここにテキスト</span>

ちなみにこれは見出しタグ(h2やh3など)でも機能しますので応用が利かせられそうな場合は試してみて下さい。一応コードも載せておきます。

<h2 style="font-size: 5vmin;">ここにテキスト</h2>
<h3 style="font-size: 5vmin;">ここにテキスト</h3>
<h4 style="font-size: 5vmin;">ここにテキスト</h4>
<h5 style="font-size: 5vmin;">ここにテキスト</h5>

最大の注意点

長いテキストを挿入する際は構成を考えながらサイズを調整してみて下さい。
そして、これを使用する際の最も重要な注意点があります。

それは

編集画面でビジュアルモードにすると設定が解除される
ということ。

そのため、せっかく色々設定したのに、最後に確認しよう!と誤ってビジュアルモードに戻してしまうと、設定したものが全て解除されてしまう可能性があります。(ワードプレスのビジュアルモードで対応しているテーマもあります)

ですので、上記のHTMLを設定する場合は、最後の締めで行う或いは一度設定したらその後はずっとテキストモードで編集する。このどちらかでやるようにして下さい。

今回は難しい話をしました。分かる人分からない人両方いると思います。分かる人は頑張って下さい。分からない人は。。。頑張って下さい!

本日も最後までお読みいただきありがとうございます。もし記事が気に入れば“いいね!”してください。管理人の励みになります。

 

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

杉本 郁

1991年6月生 はり師/きゅう師/あん摩マッサージ指圧師の免許を所有。自費による鍼灸マッサージ院に就職後23歳で副院長、24歳で院長を経験。その後25歳で退社・独立。自身の治療技術に限界を感じ、より技術の高い先生のサポートをする様になる。“治して欲しい患者“と“治せる技術を持つセラピスト“を繋げるためWEBマーケッターとして活動中。