[当ブログは、アフィリエイトプログラムに参加しています。ページに広告が含まれる場合があります]

2015/07/21

Bloggerの画像につく影と枠線を消す方法

更新日:2016年07月12日(火)
””
Bloggerで気になっていたのが、画像を投稿するとなぜか自動的に表示される影と枠線。
ずっと放っておいたのだけど、やっぱり要らないなぁ。
というわけで今回は、この影と枠線を消してしまう方法をメモ!

画像につく影と枠線の消し方

1.Blogger管理画面より「テンプレート」→「HTML の編集」でテンプレートに改変を加えます。

HTMLの編集

2.テンプレートのソースが表示されたら、以下の記述を探します。
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

※テンプレート内でCtrl+Fキーを同時に押し、.post-body imgを検索ボックスに入れて検索すると探しやすいです。

3.ソースの最初と最後を「/*」と「*/」で囲みます。
/*.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
 ・・・・・・・・・・・・・・・・・・
   (省略)
 ・・・・・・・・・・・・・・・・・・
  padding: $(image.border.large.size);
}*/

4.テンプレートを「保存」。
テンプレートを保存

最後に「テンプレートを保存」をクリックして完了です。


たったこれだけで、影と枠線、きれいに消えてくれました!
スッキリ~~~♪
こんなに簡単にできるなら、もっと早くやれば良かったなぁ。

同じように気になる方はぜひお試し下さい!



それでは本日はこの辺で。
最後までお付き合いいただき、ありがとうございます。
スポンサーリンク
関連コンテンツ