琵琶湖を中心にしたバス釣りブログです。バスボートで琵琶湖のバスを釣っています。

　

アメブロのヘッダー画像を自分だけのオリジナル画像に変えたいという方はこちら

 

今日はアメブロの写真に自動で枠をつけるカスタマイズです。

アメブロで普通に写真をアップロードして記事に貼り付けると、こんな表示になります。

 

これをちょっとCSSをカスタマイズすることで、このような簡単な枠を自動でつけることができます。

 

方法はとっても簡単で、

まずはアメブロにログインして、「ブログを書く」⇒「デザインの変更」⇒「CSSの編集」とクリック。

 

あとはcss編集欄の一番下に、以下のタグをコピペで加えて保存するだけ。

 

img{
border:1px solid #cccccc;
padding:2px;
background:#ffffff;
}

 

これだけです。

これだけで今までの過去記事など、ブログ内全ての写真に枠がつきます。

更に今後アップする写真にも自動で枠がつくようになります。

写真のアップロード、貼り付け方法は今までのやり方と何も変わりません。

 

ちなみに、枠のデザインもちょっとしたことで変更することができます。

img{
border:1px solid #cccccc;
padding:2px;
background:#ffffff;
}

色分けしましたが、　色の部分は枠の一番外側の線の太さ、種類、色を指定しているので、

仮に border:5px dotted #ff0000; とすると、「線の太さは5px 種類はドット 色は赤」なのでこうなります。

 

太さや色はなんとなく分かるとして、線の種類はこちらのページを参考にしてください。

 

次に　色の部分は枠と写真の隙間を指定しているので、

仮に padding:20px; とすると、「枠と写真との隙間は20px」という指定になるので、こうなります。

 

次に　色の部分は枠の背景色を指定しているので、

仮に background:#000000; とすると、「枠の背景色は黒色」という指定になるので、こうなります。

（分かりやすいようにさっきの padding:20px; も同時に指定しています。）

 

この方法で写真に枠をつけると、

今まで書いてきた過去の記事の写真はもちろん、その他ブログ内の全ての画像に枠がつきます。

どういうことかと言うと・・・

 

ね？便利なカスタマイズだけど、ちょっと難点もあります。

• 写真ごとに枠をつけるかつけないか決めたい
• 写真ごとに違う色の枠を使い分けたい
• 記事の写真だけに枠をつけたい

というときには別の方法で枠をつけることで、その願いを叶えることができます。

その方法については アメブロのスキンをカスタマイズ～任意の写真に枠をつける～ をご覧下さい。

 

◆2010年12月03日 追記◆

写真によって枠のデザインを変えることはできませんが、ブログ内の画像全てではなく、

記事本文内の画像のみに毎回自動で枠をつけたい方は すべての写真に枠をつける2 をご覧下さい。

 

人気ブログランキングで今何位？

• tweet
• 

【PR】話題のラインスタンプを自分で作って販売する方法

ブログランキング応援していただけると嬉しいです↓