業務外
今回は井戸掘りブログに貼り付けた、画像の枠を消す方法です。ちょっと前に調べた内容ですが、備忘録として残しておきます。
私の利用しているブログサービス(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)ブログにソースコードを綺麗に表示させる
鼻血が出そうなほど助かりました。どうもありがとうございました。
返信削除ケツ毛が生えるかと思うほど助かりました。ありがとうございました
返信削除