ページ

2013年9月5日

【Blogger】モバイルサイトで記事タイトルが勝手に改行される問題を修正した

MacBook

モバイル端末でトップページの記事タイトルが変に改行されているのが、前から気になっていたので修正しました!!

こちらが修正前のトップページのスクリーンショット。タイトルの変なところで改行があってダサい…

修正前

修正方法

このブログではタイトルにh1タグを使っているので、モバイルページのタイトルを変更するには、.mobile h1を探して内容を変更します。

ちなみにコードの中から特定の文字列を探すにはMacでは「Command + F」のショートカットが非常に便利:)

修正前のコード

.mobile h1 {
  font-size: 150%;
}

width: 100%を追記し、文字サイズも気になっていたので以下のように修正しました

修正後のコード

.mobile h1 {
  font-size: 120%;
  width: 100%;
}

修正後のトップページはこんな感じ。横幅いっぱいまで改行なしで表示されて、いい感じになりました!!

修正後

まとめ

こんなに簡単に修正できるとは思ってなかったのでずっと放置していましたが、あっさり解決しましたね(笑)

忘れやすい自分の為のメモのためにも記事にしておきました。

0 件のコメント:

コメントを投稿