アメブロのスキンをカスタマイズ~すべての写真に枠をつける~

アメブロの写真に枠をつける

 

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

 

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

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

アメブロの写真に枠をつける

 

これをちょっと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 をご覧下さい。

 

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

アメブロのヘッダー画像を無料で作成

  • このエントリーをはてなブックマークに追加

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

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

にほんブログ村 釣りブログ バスフィッシングへ にほんブログ村 釣りブログ 東海釣行記へ にほんブログ村 釣りブログへ

この記事の著者

kazushi釣りと生き物をこよなく愛するWEBデザイナー

釣りと焼酎が好きなWEBデザイナー。夜な夜な真っ暗な部屋で水槽を眺めながら呑んでいます。最近のマイブームはハンドメイドルアー制作。琵琶湖のほとりでひっそりとWEB制作事務所を営んでいます。

この著者の最新の記事

関連記事

カテゴリー

アーカイブ

インスタやってます

ページ上部へ戻る