前の関連記事：Blogger:モバイルサイト(1)横にフリックでページが移動することを無効にする
Blogger:引用符をカスタマイズで設定したblockquoteタグの部分がモバイル画面からはみ出してしまいます。さらに引用符の画像のバックが白くて浮いて見えます。
引用符の画像の背景を透明に変更
引用符の画像の背景が白く浮いてしまっています。
引用符に使用している
の背景を透明にしないといけません。エクスプローラで引用符のgifファイルを右クリック→編集、を選択してペイントで開きます。
かんたん透過くんの詳細情報 : Vector ソフトを探す！これで簡単に背景を透明に変形できます。
あとは画像のURLを背景を透明にした
に変更するだけです。widthはautoにする
はみ出る問題はwidthを600pxとしていたのをautoに変形するだけで解決しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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画像の背景を簡単に透明にできます。
0 件のコメント:
コメントを投稿