スマホでの見え方を確かめて直す

タグページの次は、スマホでの見え方です。ここまでは、直す前と後をパソコンの画面で見比べてきました。でも、パソコンで整えたブログも、スマホで開くと見え方が変わります。

この記事では、ハナさんのブログをスマホで確かめて、Claude Code に直してもらった様子を紹介します。

スマホで開いて気になったところ

ハナさんのブログをスマホで開いてみると、気になるところが2つありました。

1つめは、カテゴリページのカードです。カードが2列のままなので、1枚の幅が狭く、本のタイトルが4行に細切れになっていました。

2つめは、記事のページの大きなタイトルです。「『月あかりの読書／室』」のように、言葉の途中で行が変わっていました。

さらに、画面の幅がもっと狭いスマホでは、ブログの名前の下のキャッチフレーズが2行に折り返し、「い本」の2文字だけが2行目に残ることも分かりました。

ハナさんのスマホでは1行に収まっていたので、画面の幅によって変わるところです。

ハナさんの頼み方

ハナさんは、3つをまとめて次のように頼みました。

スマホでの見え方を直したいです。

・幅の狭いスマホでは、ブログの名前の下のキャッチフレーズが2行に折り返して、「い本」だけが2行目に残ります。きれいに収まるようにしてください。
・カテゴリとタグのページ、記事の下の「同じ気分の、ほかの本」は、スマホでは2列だとタイトルが細切れになります。スマホでは1列にしてください。
・記事のページの大きなタイトルが、スマホでは「月あかりの読／書室』」のように言葉の途中で切れています。言葉の切れ目で折り返すようにしてください。

Claude Code は、まずブラウザをスマホの大きさにして、本物のブログを開いて確かめました。パンくずリストの記事名も、同じように言葉の途中で切れていたそうです。

報告によると、カードはスマホでは1列になり、パソコンでは2列のままです。キャッチフレーズも、「悩んだとき、迷ったときに、」と「そっと手渡したい本」の2行に、きれいに分かれるようにしてくれました。

タイトルの折り返しは、テーマが自動で「ここなら折り返してよい」という目印を入れる作りにしたそうです。目印は、ひらがなから漢字やカタカナに変わるところや、「、」のあと、「『」の前などに入ります。

ハナさんがタイトルの書き方を変える必要はありません。

幅のいちばん狭いスマホでも確かめて、とても狭い画面のときだけ、名前やタイトルの文字を少し小さくしたそうです。

最後は自分のスマホで確かめる

報告には、「正直にお伝えしたいこと」も書いてありました。

Claude Code が確かめられるのは Chrome（Android のスマホに近い見え方）だけで、iPhone の Safari ではまだ見られていない。だから、iPhone で変なところがあったら教えてほしい、というのです。

キャッチフレーズの見え方がハナさんのスマホと幅の狭いスマホとで違ったように、スマホでの見え方は画面の幅やブラウザで変わります。

Claude Code に確かめてもらったあとも、最後は自分のスマホで開いて見ておくと安心です。

直したあとのスマホでの見え方

テーマを入れ直して、ハナさんの iPhone で開いてみると、こう変わっていました。入れ直し方は、こちらの記事で紹介しています。

関連記事：できたテーマを自分のブログに反映する

カテゴリページのカードは1列になり、本のタイトルが2行で読めるようになりました。

記事のタイトルは、「夜ふかしのお供にしたい／エッセイ『月あかりの／読書室』」と、言葉の切れ目で折り返しています。

ハナさんのブログの「眠れない夜に」のページは、お手元のスマホでも開いて確かめられます。

眠れない夜に（心に寄り添う一冊）