Blogger:モバイルサイト(2)引用符の枠がはみ出る問題

前の関連記事：Blogger:モバイルサイト(1)横にフリックでページが移動することを無効にする

Blogger:引用符をカスタマイズで設定したblockquoteタグの部分がモバイル画面からはみ出してしまいます。さらに引用符の画像のバックが白くて浮いて見えます。

引用符の画像の背景を透明に変更

引用符の画像の背景が白く浮いてしまっています。

引用符に使用しているの背景を透明にしないといけません。

エクスプローラで引用符のgifファイルを右クリック→編集、を選択してペイントで開きます。

かんたん透過くんの詳細情報 : Vector ソフトを探す！これで簡単に背景を透明に変形できます。

あとは画像のURLを背景を透明にした に変更するだけです。

widthはautoにする

はみ出る問題はwidthを600pxとしていたのをautoに変形するだけで解決しました。

blockquote {
 width: auto;
 border: 1px solid #666666;
 background: url(背景を透明にした引用符画像のURL) no-repeat scroll top left;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 30px;
 margin-top: 10px;
 margin-right: 0px;
 margin-bottom: 10px;
 margin-left: 30px;
 box-shadow: 1px 1px 2px rgba(204, 204, 204, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
 border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
}

参考にしたサイト

かんたん透過くんの詳細情報 : Vector ソフトを探す！
gif画像の背景を簡単に透明にできます。