こんにちはご訪問ありがとうございます。
当ブログではＰＣとスマホはレスポンシブ対応していますが、スマホでブログを見た時のタイトルが折り返しになって表示されていました。
ブログテーマとして使わせていただいてるのはＢｒｏｏｋｌｙｎです。
具体的な対応策が中々見付からずにいましたが、最近勉強し始めたChromeの検証機能で改善出来る事が分かりましたので操作手順を整理しておきたいと思います。
目次
文字が折り返してしまう原因
テーマで使われているフォントサイズでレスポンシブ表示した時にＰＣでは見やすく大きな文字で表示されますが、スマホで表示した時は文字数が多いため折り返しになってしまう。
文字数を減らすとブログタイトル自体変える必要が出てくるので減らせない
具体的な対応策
レスポンシブに対応したＰＣとスマホに合ったフォントサイズを見つけて変更する。
chromeの検証でフォントサイズを確認
①Googlechromeでブログを開きます。
②ブログタイトル上にカーソルを移動して右クリックします。
③検証画面を開きます。
＊ここからは検証画面の説明になります。
④セレクトモードをクリックします。
⑤セレクトモードの状態でフォントサイズをクリックして任意の数値に変更します。
スマホで文字の折り返しが発生していた時のコード内容
ｆｏｎｔ-Ｓｉｚｅ：１５０になっていました。
改善後のサイズは１３０にしました。
ｆｏｎｔ-Ｓｉｚｅ：１３０
※セレクトモードで確認した数値を変更して実際の表示がどのように変わるかを確認しながら出来ます。
このモードで数値を変えて変化をみるだけなら実際の表示には影響はなく、検証機能を終了すれば元に戻ります。
⑥サイズを変更したら、実際にどのように見え方が変わるかを確認するため、ＣＳＳコードをコピーしてデザイン→カスタマイズ→ヘッダー→デザインＣＳＳへ貼り付け変更後の画面を見ます。
ＣＳＳを変更する場合は同じテーマを使ったサブブログで確認してから行います。
ＰＣ側とスマホ側が正常に表示されたらＯＫです。
ここまではサブブログで確認しておきます。
ＣＳＳをコピーして追記
⑦スマホでの表示が改善されたことを確認できたら、検証画面のＣＳＳコード(数値を変更後)をコピーしてメインブログのデザインＣＳＳへ追記します
当ブログに追記したＣＳＳ
#title a {
font-size: 130%;
font-weight: bold;
color: #111;
}
ここまでの操作でスマホ表示タイトル文字が一行に改善されました。
関連記事
まとめ
このchrome検証での確認操作は、自分のブログ画面がどのようなコードを使っているかを見るのに大変役立つと思います。
変更したい箇所があれば、chromeの検証を開いてみると色々な発見があると思います。
スポンサーリンク
