Bloggerにて画像の周りの影と枠線を消す方法

どうも、黒井みなみ(@961373)です。
ぼくはWordPressをつかいはじめた今でもGoogleが運営している無料ブログサービス「Blogger」を利用しています。

Bloggerの標準テンプレートでは最初から「貼り付けた画像の周りに影と枠線がつく」ようになっています。これがずっと嫌だったんですよ! アフィリエイトリンクのバナーやAmazonアソシエイトで紹介した商品のちいさなサムネイルにも「影と枠線」が表示されるので、ひどく不格好なの!

その問題をやっと解決することができたので、シェアします。

そもそも「画像の周りの影と枠線」って何?

Bloggerのシンプルテンプレート(他の純正テンプレートもそうかも)では最初からブログ記事に載せた画像の周りに以下の画像のような「影と枠線」が表示されます。

Blogger-画像の周りに影と枠線が表示される

上の画像のように、画像の周りに「影と枠線」が表示されます。記事のトップに貼るトップ画像の周りにこのような影と枠線が表示されるのはいいんですが、アプリのアイコン画像などのちいさな画像にも・・・

Blogger-アプリのアイコンなどの小さな画像にも影と枠線が

このとおりでございます。

どんなに小さな画像にもバカ丁寧に自動的に「影と枠線」をつけてくれます。すばらしい機能ですね。

しかしぼくのように「画像の周りに影や枠線なんていらねえ!」というひともいるはず。ということで今回はBloggerにおける「画像の周りの影と枠線の消し方」について解説します。初心者(ぼくも初心者だけど)でも分かりやすいよう3つのステップにわけて紹介します。

1.テンプレートのHTMLを開く

Blogger-管理画面-ブログのHTMLを確認する方法

まずBlogger管理画面の左側にあるメニューから「テンプレート」をクリックします。ページが切り替わったらつぎに「HTMLの編集」をクリックしてください。

2.HTMLのなかから「post-body img」を探す

Blogger-HMTLエディタ-1

HTMLがびっしり書いてあるエディタを、どこでもいいのでクリックしてから、Windowsの方は「ctrl+F」を、Macの方は「command+F」を押します。するとエディタの右上に「検索窓」が出てきます。そこに【post-body img】と入力して検索をしてください。これで上の画像と同じ(またはほぼ同じ)HTMLのコードが表示されます。

3.該当する箇所を削除して保存する

Blogger-HTMLエディタ-2

上の画像で示している箇所を削除します。そのご念のため「テンプレートをプレビュー」をクリックしてプレビューを見ましょう。画像の周りに影と枠線が表示されなくなっていれば成功です。そうしたら最後に「テンプレートを保存」をクリックして、すべての作業は終了です。

関連:Bloggerを利用するならやっておきたい3つのSEO対策
関連:ブログを運営するなら「最低限」読むべき5冊の書籍

シェアのご協力をお願いします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です