Bloggerの画像から白枠を消す方法

業務外

今回は井戸掘りブログに貼り付けた、画像の枠を消す方法です。ちょっと前に調べた内容ですが、備忘録として残しておきます。

私の利用しているブログサービス（Blogger）は画像を貼り付けると、画像の周りに白枠が自動で表示されます。
印画紙に焼いた写真のようで、私はお気に入りです。しかし、白枠を付けたくない画像もあります。
例えばこれ、ブログから他サイトにジャンプすることをお知らせするマークです。サイズは16×16ピクセルで指定していますが、白枠のために小さく表示されています。

これ、どうしたら良いん？

---

ネットで検索してみましょう。「Blogger 画像 枠 消す」のキーワードで検索すると、白枠の消し方の記事が幾つも出てきます。
しかし、何れもBloggerのテンプレートを編集するか、カスタムCSSにスタイルを追加する方法です。
これをやると、全ての画像の白枠が消えてしまいました。

儂は、白枠がお気に入りなの！！

特定の画像の白枠だけ消す方法は無いのかのぅ？

で、試してみたら上手くいきました。テンプレートでスタイルを一括して変更するのではなく、個々の画像にスタイルを設定すれば良いことが判りました。ちょっと面倒だけど、狙った画像のみ、白枠を消すことができました。

これにはBloggerのHTML編集画面で操作する必要がありますが、慣れれば大丈夫。一度設定した画像はそのまま編集画面でコピペもできます。では、ご紹介しまぁす。

---

先ほどのジャンプマークのソースコードです。スタイルは何も指定されていません。URLが長いので読み辛いですが、縦横サイズとボーダーの指定しかありません。ソースコードは読みやすいように改行を入れています。

<img border="0" height="16px"
src="https://1.bp.blogspot.com/-oNN3eauWbsQ/Vnu5UeK3F2I/AAAAAAAAW5c/6tmvnO5aYdk/s1600/image013-64.png"
width="16px" />
 
 

これに、Bloggerの標準テンプレートが被されると、白枠が表示されるのですね。

なので、白枠を打ち消すようにスタイルを予め指定しておきます。こんな感じ。

<img border="0" height="16px"
src="https://1.bp.blogspot.com/-oNN3eauWbsQ/Vnu5UeK3F2I/AAAAAAAAW5c/6tmvnO5aYdk/s1600/image013-64.png"
style="background: rgb(255, 255, 255); border: 0px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; padding: 0px; text-align: -webkit-center;"
width="16px" />
 

ハイライト部分が追記したスタイルです。これはおまじないなので、何も考えずにコピペすればOKです。画像から白枠が消えました。

良か良か。

感想と構想

判ってしまえば単純な操作でした。しかし、ネットを探しても、直接これについて言及している記事は見つかりませんでした。

自分がブログ初心者のため、判らなかっただけで、世の中的には当り前だったのかな？（笑）

---

今回、ソースコードを表示するのに、SyntaxHighlighterというツールを導入しました。エディタ（Eclipse）風にソースコードを表示するツールです。

導入にあたり、以下の記事を参考にさせていただきました。
Blogger:SyntaxHighlighter(1)ブログにソースコードを綺麗に表示させる