こんにちは！ざわわです！
今回はパソコンではうまくタイトル画像が表示されているのにスマホで見ると左右が見切れてしまう問題についての解決策を紹介します。
この問題で困っている人の役に立てると嬉しいです。
スマホで見るとタイトル画像の左右が切れる解決策です。
初めに
僕が使っているテーマは「minimalism」です！
シンプルでオシャレなテーマを求めていた僕にはぴったりでした。
こちらの記事で紹介しています！ぜひ興味のある方はチェックしてね！
そしてこのテーマはレスポンシブデザインなのです！
レスポンシブデザインとはPCで見てもスマホで見てもそれぞれに応じて表示を設定してくれる便利ちゃんなんです。
だがしかし…
何故かうまく表示されない
なんで！？！？(笑)
タイトル画像なしで運営しているときは問題なかったのですが、
いざヘッダータイトル画面を自分で作ってみたときのことです。
ヘッダータイトル画像を自分で編集していい感じのが作れたのですが↓
よし、レスポンシブデザインだからこれでスマホで見ても大丈夫だろう。
チェックしてみよっと。
( ͡° ͜ʖ ͡°) いやダメダメやないか〜〜いっ！！
そうです、左右が千切れ倒してるんです。
レスポンスデザインなのに出来ない
えええ、とりあえず解決策を探すために片っ端からネットで調べてみて
【コピペOK】のやつを貼り付けてみたりしたのですが、うまく反応しなくてダメダメ。
これはレスポンスデザインが原因だな、、？？
おそらくですが
「レスポンシブデザインだから勝手に変更しちゃだめよん( ͡° ͜ʖ ͡°)」ってことなんでしょうねぇ、、
そして調べて行くうちに同じ境遇にいる方を発見！！
こちらの方の記事を参考にして僕は解決することができました！最後にコピペでOKなコードを貼っておきますね↓↓
最後に
同じ境遇にいる方へ
以下のコードをデザイン→カスタマイズ→デザインCSSに貼り付けで解決すると思います！
もしうまく表示されない場合は、他のコードもあるので検索してコピペでOKを見つけてみてください！
@media (max-width: 480px){
#blog-title-inner,#title a{
height:100px!important;
} #blog-title-inner {
background-size: contain;
}
}
いかがでしたでしょうか。
うまくいきましたかね？？
僕はこれで解決したのですが皆さんも解決できるように祈ってます！
こちらの記事も合わせてチェック！
