アメブロヘッダー画像のサイズが合わない時の対処方法



アメブロにヘッダー画像を設置しようとしたのにサイズが合わない時は以下の2つの方法で対応します。

 

1:設置サイズに合わせてCSSを使って画像を拡大縮小させる

2:画像編集ソフトを使ってヘッダー画像自体のサイズを加工調整する

 

それぞれの方法について解説します。

スポンサーリンク

 

設置サイズに合わせて画像を拡大縮小させる

設置サイズに合わせて画像を拡大縮小させるにはCSSで対応可能です。

主に横サイズを基準に拡大縮小させる事が多いです。

例えば、画像の横幅を980pxから1120pxに変更したい場合、

background-size:1120px auto;

というような設定をcssに加えます。

 

旧CSS編集用デザインの場合は、

.skinHeaderArea{
background-color:#FFFFFF;
background: url(画像のURL) no-repeat;
background-size:1120px auto;
}

 

新CSS編集用デザインの場合は、

.skin-bgHeader {
background: no-repeat scroll center;
background-color: #FFFFFF;
background-image: url(画像のURL);
background-size:1120px auto;
}

 

と設定すれば画像のサイズを変更できます。

ただし、この方法は横幅の大きさに合わせて縦幅も大きくなるので他の部分で縦幅を設定しているならその部分も変更が必要となりますので注意が必要です。

 

ヘッダー画像自体のサイズを加工調整する

一つ目はCSSでサイズ調整をしましたが、画像自体を加工してサイズ調整する方法もあります。

これは画像加工ソフト(photoshopやGIMPなど)が必要です。

画像加工ソフトを使った事がある人はこちらの方法でサイズ調整をした方が簡単です。

しかし、ソフトを使った事が無い人はソフトの使い方を覚えるよりも最初に説明したCSSの編集でサイズを合わせる方が簡単なのでそちらを試した方が良いでしょう。

 

もしくは、フリーツールを使って画像のサイズを加工する事も可能です。

「画像 サイズ変更 ソフト」

とキーワード検索すると色々なツールがあったりするのでそれらを試してみるのも良いでしょう。

 

フリーツールは簡単に使える反面、細かい調整ができないといったデメリットもあるので、複数のソフトをダウンロードしてみて自分に合うものを探すと良いですよ。

 

ここで紹介した方法でヘッダーのサイズが合わない問題は解決できますが、どうしても自分で出来ない場合は部分カスタマイズとして調整依頼もお受けしていますので参考にどうぞ。

 


スポンサーリンク