テーマNaked用の記事になります。
このテーマは様々な背景画像に合うことを特徴にしています。
ただ背景画像をご自身で任意のものに設定する場合、設定によっては画像がずれたりする場合があるため、その場合のヒントを書いていきたいと思います。
任意の背景画像を入れる
はてなブログでは、簡単に任意の背景画像を設定することができます。
今回はおしゃれなフリー画像がたくさんある
から選びました。その他フリー画像を見つけたい場合は、
などを参考にしてみてください。
背景画像を入れたときの問題点
背景画像を入れた場合、簡単にブログをオシャレにすることができますが、「レスポンシブ設定」にしている方は下のような問題点があります。
背景画像を入れる際、
- 位置⇨中央
- 繰り返し⇨繰り返さない
- スクロール⇨固定
と入れると、PCだと問題なくうつっているように思えます。
ただ、これでブラウザの横幅をせばめていって、スマホの横幅ぐらいにすると・・・。
背景がアップでうつってしまって、星が荒々しくうつってしまっているのがわかるでしょうか?
これはスマホの横幅が小さくなればなるほど顕著になってきます。
解決策
解決策としては、「デザインCSS」に以下のことを入れてみてください。
@media screen and (max-width: 768px) { body { background-size: contain; background-repeat: repeat; }
これでタブレット以下のサイズになった場合、背景画像が横幅ぴったりに合うようになります(画像の横幅が768px以上あることが前提です)。
スマホでも以下のようにきちんと表示されます。
以上でカスタマイズは終了です。
その他
上のカスタマイズを行った際に起こりうる問題点と、解決策を書いていきます。
トグルメニューを開いた際に、画像が繰り返されている。
ナビゲーションメニューのカスタマイズを行った人向けです。
画像の横幅と縦幅の比率の関係で、トグルメニューを開いた際に、画像の「切れ目」が見えてしまう可能性があります。
これを解決するには、そもそもの画像を移す範囲を伸ばすしかありません。例としては、上に書いたコードの代わりにこんな感じのを入れるしかありません。
@media screen and (max-width: 768px) { body { background-size: 150%; background-repeat: repeat; }
background-sizeを150%にしました。こうするとこのようになります。
先ほどと違って、画像の切れ目なく、しっかりとおさまっています。
しかし今度は、横幅が切れてしまっています。
background-size: 150%は、「背景画像のサイズを150%にしろ」という指令なので、縦幅はおさまったかもしれませんが、横幅がはみ出てしまうんです。
150%の数字の部分を変えると、いろいろと調整ができるので、ご自身の画像の縦横サイズを見ながらいろいろと調整してみてください。
フッター部分に画像の切れ目がきてしまう
オリジナルフッターにコピーライトを設定している方向けです。
レスポンシブにしていると、横幅の値によって、フッター部分に画像の切れ目がきてしまう可能性があります。
また、切れ目を解消するだけでなく、フッターには画像の下の部分をうつした方が綺麗だと思います。
それをする際は、最初に書いたコードの代わりに、
@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をコピペしていただくとできます。
そうするとフッター部分にもきちんと画像が入るようになります。
画像の下がきちんと合っているため、綺麗にうつります。