Theme Naked Blog

Nakedのカスタマイズを紹介するブログ

Nakedで背景画像を変えたときにスマホ表示で崩れてしまう際のヒント

テーマNaked用の記事になります。

このテーマは様々な背景画像に合うことを特徴にしています。

ただ背景画像をご自身で任意のものに設定する場合、設定によっては画像がずれたりする場合があるため、その場合のヒントを書いていきたいと思います。

任意の背景画像を入れる

はてなブログでは、簡単に任意の背景画像を設定することができます。

f:id:ftmaccho:20160530231942p:plain

今回はおしゃれなフリー画像がたくさんある

unsplash.com

から選びました。その他フリー画像を見つけたい場合は、

www.yukihy.com

などを参考にしてみてください。

背景画像を入れたときの問題点

背景画像を入れた場合、簡単にブログをオシャレにすることができますが、「レスポンシブ設定」にしている方は下のような問題点があります。

背景画像を入れる際、

  • 位置⇨中央
  • 繰り返し⇨繰り返さない
  • スクロール⇨固定

f:id:ftmaccho:20160530231942p:plain

と入れると、PCだと問題なくうつっているように思えます。

f:id:ftmaccho:20160530232754p:plain

ただ、これでブラウザの横幅をせばめていって、スマホの横幅ぐらいにすると・・・。

f:id:ftmaccho:20160530233247p:plain

背景がアップでうつってしまって、星が荒々しくうつってしまっているのがわかるでしょうか?

これはスマホの横幅が小さくなればなるほど顕著になってきます。

解決策

解決策としては、「デザインCSS」に以下のことを入れてみてください。

@media screen and (max-width: 768px) {
body {
    background-size: contain;
    background-repeat: repeat;
}

これでタブレット以下のサイズになった場合、背景画像が横幅ぴったりに合うようになります(画像の横幅が768px以上あることが前提です)。

スマホでも以下のようにきちんと表示されます。

f:id:ftmaccho:20160530234309p:plain

以上でカスタマイズは終了です。

その他

上のカスタマイズを行った際に起こりうる問題点と、解決策を書いていきます。

トグルメニューを開いた際に、画像が繰り返されている。

ナビゲーションメニューのカスタマイズを行った人向けです。

theme-naked.hatenablog.jp

画像の横幅と縦幅の比率の関係で、トグルメニューを開いた際に、画像の「切れ目」が見えてしまう可能性があります。

f:id:ftmaccho:20160530234645p:plain

これを解決するには、そもそもの画像を移す範囲を伸ばすしかありません。例としては、上に書いたコードの代わりにこんな感じのを入れるしかありません。

@media screen and (max-width: 768px) {
body {
    background-size: 150%;
    background-repeat: repeat;
}

background-sizeを150%にしました。こうするとこのようになります。

f:id:ftmaccho:20160530234942p:plain

先ほどと違って、画像の切れ目なく、しっかりとおさまっています。

しかし今度は、横幅が切れてしまっています。

background-size: 150%は、「背景画像のサイズを150%にしろ」という指令なので、縦幅はおさまったかもしれませんが、横幅がはみ出てしまうんです。

150%の数字の部分を変えると、いろいろと調整ができるので、ご自身の画像の縦横サイズを見ながらいろいろと調整してみてください。

フッター部分に画像の切れ目がきてしまう

オリジナルフッターにコピーライトを設定している方向けです。

theme-naked.hatenablog.jp

レスポンシブにしていると、横幅の値によって、フッター部分に画像の切れ目がきてしまう可能性があります。

f:id:ftmaccho:20160531000303p:plain

また、切れ目を解消するだけでなく、フッターには画像の下の部分をうつした方が綺麗だと思います。

それをする際は、最初に書いたコードの代わりに、

@media screen and (max-width: 768px) {
body {
    background-size: contain;
    background-repeat: repeat;
}
#n-copyright {
    background-image: url('画像のURL');
    background-repeat: no-repeat;
    background-color:transparent;
    background-attachment: fixed;
    background-position: center bottom;
    background-size: contain;
}
}

といった感じで入れていただくとできます。

コードの中の(画像のURL)という部分には、同じくデザインCSSの上の方にある画像のURLをコピペしていただくとできます。

そうするとフッター部分にもきちんと画像が入るようになります。

f:id:ftmaccho:20160531000631p:plain

画像の下がきちんと合っているため、綺麗にうつります。