ブランド 買取
日常で気になった事発信してみます。 まぁ 気になったのも気のせいでしょう。

ブログの写真に枠を付ける

ただ、写真の周りに線を入れるだけの話ですが
書いておかないと 即効 で忘れて、
写真の周りに線いれられないのかな?と同じ事を考える羽目になりますので書いておきます。

なんのこっちゃ?というところからですが。

通常何にも考えずに画像を入れてあげると下みたいな感じですよね。


べつの不都合がある訳ではないのですが。
白の背景の場合、写真をこういう風に貼り付けてると
ちょっと貧相な感じがふとしたのです。
背景が黒だとそのまま写真を貼り付けても引き締まっていい感じなんですが。

そこで下のように表示することを考えました。


ちょっとだけいい感じがするでしょ?

でやり方をイロイロ探していたのですが。
最初やっていたのが

画像を埋め込むときに
<img src="https://******/smp.jpg" height="78" width="152" 
  style="border:1px solid rgb(204, 204, 204); margin: 5px; padding: 10px;" />

と(黒字の部分を)埋め込む方法を採用して画像を貼り付ける度に style部分を挿入していました
しばらく ヨシヨシ なんてやっていましたが いまいち メンドクサ~

誰か自動でやってくんない?と思い 調べてみました。

でたどり着いたのが スタイルシート で img のスタイルを制御するという方法。
スタイルシートで
____________________________________

img
{
                 border:1px solid rgb(204, 204, 204); margin: 5px; padding: 10px;
}
____________________________________

と定義してあげれば
スタイルを読み込んでいるhtmlの <img > タグ内全てに上のスタイルが適用されていい感じ。
でも やってみると 本文以外の画像にも適用されちゃって グズグズに。 orz

スタイルシートについてもうちょっと良く調べてみると
<div> で指定された範囲に絞って効果を発揮できるみたい。 

自分のブログの出力画面のソースファイルをジーット見つめていると
本文部分は <div class="asset-body"> なんてタグで括られていました。

このタグで括られている部分だけにスタイルを効かせるには  
____________________________________

.asset-body img
{
                 border:1px solid rgb(204, 204, 204); margin: 5px; padding: 10px;
}
____________________________________

なんて定義してあればイイっぽい。
で再度確認すると おぉ~ すばらしい。 勝手に枠が付いてる。


ばっちり 試してみて。

と思って 他の記事も確認してたら。
本文に埋め込んでる ブログ村へのリンクボタン 

ブログランキング・にほんブログ村へ

にも枠が付いちゃってるよ。 うぅーん。



お願い

    私への連絡は Twitterでお願いします。
    適当にリプライいただければ、ほぼリプ返しいたします。
    yohsuke_Goをフォローしましょう

今までの内容を下にまとめサイトをつくりました。

    いろいろ実験
    iPhone、ブログの小技、花粉症対策、電子書籍化
    何でもござれ。