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

更新日：2016年07月12日(火)

Bloggerで気になっていたのが、画像を投稿するとなぜか自動的に表示される影と枠線。

ずっと放っておいたのだけど、やっぱり要らないなぁ。

というわけで今回は、この影と枠線を消してしまう方法をメモ！

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

1．Blogger管理画面より「テンプレート」→「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．テンプレートを「保存」。

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


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

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

---

それでは本日はこの辺で。
最後までお付き合いいただき、ありがとうございます。

スポンサーリンク

関連コンテンツ