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

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

1. 「HTMLの編集」をクリック
Bloggerの管理画面を開き、テンプレート→「HTMLの編集」をクリックします。




2. 「.post-body img」を検索
「HTMLの編集」ページが表示されます。コードが窓枠内に表示されるので、".post-body img"のコードを検索します。Windowsの場合は「CTRL+Fキー」、Macは「command+Fキー」でコード検索できます。




3. プログラムを変更
下記のようなプログラムが見つかります。

【変更前のコード】

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



4. 「テンプレートを保存」をクリックで終了
プログラム・コードの変更処理が終わったらオレンジ色のアイコン「テンプレートを保存｣をクリックします。



以上で終了。以下のように画像の表示が変わりました。
【変更前の画像表示】



【変更後画像表示】

• 画像のボーダー（枠線）をなくす方法：クリボウのBlogger Tips
• How to remove Blogger Picture/Image Shadow and Border：HELP LOGGER