個別に画像に枠を付ける方法 | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
$やさしいアメブロカスタマイズ!と女性タレント画像-読書する女子


画像に枠を付ける方法って、何種類もあるみたいです。

CSSで、全記事に一斉に付けたり、CSSと個別の記事を連動?させたり・・

今回は記事のHTMLだけで表示させる方法をご紹介してみたいと思います。

アメブロの場合、「ブログを書く」で「HTML表示」にして、「画像」ボタンから画像を選んでクリックすると、以下のようなタグが表示されると思います。

<a href="http://stat.ameba.jp/user_images/20131031/22/wantan-52/5c/d6/j/o0600090012734494894.jpg"><img src="http://stat.ameba.jp/user_images/20131031/22/wantan-52/5c/d6/j/t02200330_0600090012734494894.jpg" alt="$やさしいアメブロカスタマイズ!と女性タレント画像-読書する女子" width="220" height="330" border="0" /></a>


この<img の後に半角スペースを入れて、以下のタグを記入して下さい。

style="border-style:solid;border-color: #009900 ;border-width:2px"




<a href="http://stat.ameba.jp/user_images/20131031/22/wantan-52/5c/d6/j/o0600090012734494894.jpg"><img style="border-style:solid;border-color: #009900 ;border-width:2px"src="http://stat.ameba.jp/user_images/20131031/22/wantan-52/5c/d6/j/t02200330_0600090012734494894.jpg" alt="$やさしいアメブロカスタマイズ!と女性タレント画像-読書する女子" width="220" height="330" border="0" /></a>


このような枠が付きます。

$やさしいアメブロカスタマイズ!と女性タレント画像-読書する女子


__

style="border-style:solid;border-color: #009900 ;border-width:2px"


o赤字の箇所が線の種類になります。

・実線⇒solid

・二重線⇒double

・点線⇒dotted

・粗い点線⇒dashed

なんと呼んでいいのか分かりませんが^^;

・互い違い?①⇒groove

・互い違い②⇒ridge

・互い違い③⇒inset

・互い違い④⇒outset

※どう表示されるかは、⇒こちらで試してみました。


o緑字の箇所が枠線の色を指定するカラーコードになります。

※参考までに⇒HTML,CSS カラーコード一覧表 | 背景色や文字色の設定


o青字の箇所の数字が枠線の太さになります(さすると、大きくなると、太くなります^^)


線の種類をgrooveにして、色をピンク、太さを10で試して見ました。



$やさしいアメブロカスタマイズ!と女性タレント画像-読書する女子



__

fc2ブログだと、この他に余白を入れて、ポラロイド写真みたいにしたり出来るんですが、アメブロさんの場合は無視されました(汗)←自分のやり方が間違ってるのかも?

パソコンのOSやブラウザのバージョンの違い、またブログサービスの仕様によっては反映されない事もあるみたいです。

あ、あとチョット横道にそれますが、アメブロさんのメンテナンスの後って、結構いろいろ仕様変更がされてるみたいです(他のブログサービスでもそうでしょうけど・・)。
以前、出来た事が出来なくなってたり、その逆も・・



参考になれば、うれしいのですが・・


☆ブヒ_v(^з^)

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ