【Google Blogger】ブログ投稿画像のボーダーとシャドウを消すスタイルシート変更方法

2013-07-05

【Google Blogger】ブログ投稿画像のボーダーとシャドウを消すスタイルシート変更方法

Bloggerブログの投稿ページに画像を入れると、自動的にボーダー枠とシャドウ（影）が付いてしまいます。元からブログの画像に枠と影が表示される設定になっているので、これまでは気にせずにそのままにしていました。枠や影を表示したくない画像の場合や見えない画像があった場合などにわずらわしいので、そのやり方を検索で探したところ、あったのでメモしておきます。

「HTMLの編集」をクリック

「.post-body img」を検索

プログラムを変更

【変更前のコード】

.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);
}

【変更後のコード】

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