ブログランキング・にほんブログ村へ
ポチッと応援願います
初めての方はこちらへ 

投稿日 2016年6月10日金曜日

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

業務外


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

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

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



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

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

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

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

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



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

<img border="0" height="16px"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2bmZp9KtazH3adJS4b5S_fsI3Lc24-8u_kTN_oNYesMe3qRj9A0365WG5Xu5TqFZUQLlhm2YhQjGl116Rq5esvC7O2chb-1x_prvVFopsYNmtjupWkC7gXanRe2q6GWLM97wU-095M4NG/s1600/image013-64.png"
width="16px" />
 
 

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

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

<img border="0" height="16px"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2bmZp9KtazH3adJS4b5S_fsI3Lc24-8u_kTN_oNYesMe3qRj9A0365WG5Xu5TqFZUQLlhm2YhQjGl116Rq5esvC7O2chb-1x_prvVFopsYNmtjupWkC7gXanRe2q6GWLM97wU-095M4NG/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)ブログにソースコードを綺麗に表示させる


2 件のコメント:

  1. 鼻血が出そうなほど助かりました。どうもありがとうございました。

    返信削除
  2. ケツ毛が生えるかと思うほど助かりました。ありがとうございました

    返信削除

注目の投稿

2020年、明けましておめでとうございます

井戸報告 2020年となりました。明けましておめでとうございます。 今年は雲が多くて初日の出は無理。辛うじて層間の隙間からお顔を見せてくれました。陽光の煌きは僅か3分ほどでした。 2020年、日の出が始まりました 雲の層間に一瞬煌めく初日の出です。 ...

人気の投稿

︿
blogisMobileRequest=false, blog.local=ja がんばれ日本!!