Bloggerで画像への外部リンクと、画像自体へのリンクで、画像表示がズレるときの対処方法

おすすめ記事ピックアップ

なぜかBloggerで投稿画像がズレて困っている人いませんか。Bloggerで画像を投稿して、その画像に外部リンクを貼った場合と、画像自体へ画像がリンクしている時では、微妙に自動で書かれるコードが変化します。画像に画像のURLが設定されている時には、「margin-left: 1em」と「margin-right: 1em」が自動で挿入されます。

画像へサイトなどのリンクを貼った場合は、「1em」の設定が無くなるので、投稿画像が微妙にズレるのです。下記コードの黄色い部分参考です。

例：画像に外部リンクした時
<a href=\"http://www.house.gs/\">http://www.house.gs/</a><br />
<div class=\"separator\" style=\"clear: both; text-align: center;\">
<a href=\"http://www.house.gs/\"><img border=\"0\" src=\"http://1.bp.blogspot.com/-KCtTO0KYUrE/U4Bz2aP6H0I/AAAAAAAASHA/Lp9wsqUicpg/s1600/12.png\" height=\"346\" width=\"640\" /></a></div>
<br />

例：画像に画像をリンクした時
<div class=\"separator\" style=\"clear: both; text-align: center;\">
<a href=\"http://4.bp.blogspot.com/-BU77UkNt4ZY/U4BkqoF26dI/AAAAAAAASFo/XjU-Bo3WzOM/s1600/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"><img border=\"0\" src=\"http://4.bp.blogspot.com/-BU77UkNt4ZY/U4BkqoF26dI/AAAAAAAASFo/XjU-Bo3WzOM/s1600/01.png\" height=\"364\" width=\"640\" /></a></div>

投稿画像のリンク設定による、画像の位置ズレを無くすには、CSSで強制的に「1em」を無くしてしまえば良い訳です。

.separator a {

margin-left: 0px !important;
margin-right: 0px !important;

}

CSSコードに追加してみてください。多くの場合、テンプレートに予め設定されているようですが、たまに設定されていないテンプレートがあります。投稿画像がズレるとき、お試しあれ。