新しいインターフェースでカスタマイズで背景画像を設定し直すと、画質が悪くなる。
何故なのかが分からず、以前のテーマのHTMLを見比べた。そこで、気がついた。画像アドレスの『s100』この部分が違う事に。
※HTML編集の前にテーマ→バックアップは忘れずに。
*画像の大きさを直す
テーマ→HTML編集
『Contempo』では50行目くらいに背景画像のアドレスがある。
<Variable name="body.background" description="Background"color="$(body.background.color)"type="background"default="$(color) none repeat scroll top left" value="#ffffff url(//4.bp.blogspot.com/（画像アドレス・略）/s100/画像.jpg) no-repeat scroll top center"/>
この『s100』を『s1600』にすると画像が綺麗になった。
カスタマイズの背景で『配置を上部中央』『並べない』に設定。
画像を設定して保存した後で、もう一度カスタマイズを開くと設定が『上部左』『並べて表示』になっていた。二度のチェックで変わっているか確認を。
**画像の高さを変える
テーマ→HTML編集から。
<Variable name="body.background.height" description="Background height"
type="length"
min="420px"
max="640px"
default="480px" value="480px"/>
を探す。
色付きの数字を変えたい数字に変える。
min="420px" は最小値。max="640px"は最大値。
value="480px" は設定した数値。……テーマ→カスタマイズ→上級者向け→背景からも設定できる。
420pxから640pxの幅で変えたいのなら、HTMLを弄る必要はない。
以前は200pxにしていたので調べて変えたが、今回は480pxにしたので実はこの変更は要らないのだけど変更したままで使っている。
そして、誰かの役に立つかもしれないと思って、メモとして残しておく。
***黒っぽくしたくない（もしくは、白っぽくしたい）
『オーバーレイ』のタグを探した。テーマ→HTML編集。
.bg-photo-overlay{
background:rgba(0,0,0,.26);
background-size:cover;
height:$(body.background.height);
position:absolute;
width:100%;
z-index:2
}
この部分の色のついた数字を弄る。
最初の３つの0の数字は色変更。255に変更すると白になる。
26が濃さ……なので、これを0にして黒くしない事にする。
いらない人はこの部分を削除してもいいと思うのです。これも、以前の設定のままなので今回は弄っていない。背景を弄る人用のメモです。
****画像サイズについて
ついでに画像サイズも1600×1800へと新しく作り変えた。ただし、画面いっぱいではなくてこの画像の中央上部。上から500px。中央900pxに寄せて写真配置。
こんな感じ↓
両脇は450pxずつ空いてます。ピクセル数は大体こんな感じというだけです。
空白が多くて無駄な気がするのですが、スマホサイトでの閲覧も考えるとこれが一番それほど差がない気がする。なるべく削除される部分を小さくして、スマホでもPCでもそれなりの閲覧でという苦肉の策。もっと良いサイズがあったら変えるかもしれません。
画像については『Bloggerの画像の小技』という記事を見つけた。
色々使えそうだなと思ったのです。まとめてくれる人がいる事に感謝。
画質がおかしい、サイズがおかしいと思った時は画像アドレスを確認と覚えた。
そして、サムネイルを作るのにも役立つ。