png画像の透明背景

blogger テーマのカスタマイズ画面

少し前に書いた ”png画像の透明背景”については旨くできたという事だけで、その手順については触れずに簡単に済ませてしまいましたが、そこをもう少し具体的に説明します。これは自分自身で辿り着いた訳ではなく、人様のサイトでたまたま見掛けたものです。
ただ、この方の説明とは少し違っていましたが、似たような所をコメントにして無効にしてみたところ、これで投稿の中の画像に付いていた白枠やドロップシャドウが消えてスッキリし、背景を透明にしたpng画像も背景が白くはならず、透明で表示されるようになりました。

<まず最初にhtmlのバックアップをとっておいて下さい。>

具体的には「blogger」から「テーマ」を選び使用中テーマの「HTMLの編集」を選択するとこのテーマのhtmlファイル？が表示されます。開いた時には9行目あたりで600行以上が纏められ閉じられているので、行番号の右にある▶をクリックして展開します。
このリストの430行あたりに下のような記述がありますからこの範囲をコメントにして無効にしてから保存すれば前述のような結果になるはずです。

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,.BlogList .item-thumbnail img {
  padding: 5px;
  background: #fff;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

.post-body img, .post-body .tr-caption-container {
  padding: 8px;
}

ただ冒頭でも述べたように、テーマが変わればこのCSSも少し違うのかもしれません。環境が変われば同じような結果にならない事も考えられますので試してみるのは自己責任で！