画像に枠を付けて立体的に

HTMLタグを使って個別に画像に枠を付けて尚且つ立体的に見せる方法

こんなのが・・（↓）

こんな風になります・・（↓）

こんにちワ、松坂桃李です。ワンタンです^^;

ブログの全記事の画像を立体的に見せたい場合は、アメブロの「CSS編集用デザイン」であれば、CSS編集に以下のコードを記述すると、出来ちゃうのであります。

/*記事欄の画像に影を付ける*/
.articleText img{
box-shadow:3px 3px 5px rgba(1, 1, 1, 1);
padding:5px;
border:1px solid #dcdcdc;
border-radius:5px;
}

が、この方法だとサイト内の全記事の全画像に影がついてしまいます。いやでも全部に付いちゃうという!W

今回は、HTMLタグコードを使って個別に画像に枠を付けて、尚且つ、それを立体的に表示させる方法を御案内してみたいと思います。
この方法は、HTMLタグの使えるすべてのウェブサイトで共通して使えると思います。

HTMLタグを使って個別に画像に枠を付けて尚且つ立体的に見せる方法

こんなコードを使います（↓）。

style="border-style:solid;border-color:#ffffff;border-width:5px;box-shadow:3px 3px 5px rgba(1, 1, 1, 1);"

【コードの説明】

1.赤字の箇所が枠線（縁）の種類です。

style="border-style:solid;border-color:#ffffff;border-width:5px;box-shadow:3px 3px 5px rgba(1, 1, 1, 1);"

※参照
実線⇒ solid
点線 ⇒ dotted
破線 ⇒ dashed
互い違い①⇒groove
互い違い②⇒ridge
互い違い③⇒inset
互い違い④⇒outset
二重線 ⇒ double
※二重線の場合は、太さを3px以下に
すると一重になる事があります。

2.紫色のコードが枠線（縁）の色です。

※この場合は、白。

style="border-style:solid;border-color:#ffffff;border-width:5px;box-shadow:3px 3px 5px rgba(1, 1, 1, 1);"

3.ピンクの数字が枠線（縁）の幅です。

※数字を大きくすると太く（広く）なります。

style="border-style:solid;border-color:#ffffff;border-width:5px;box-shadow:3px 3px 5px rgba(1, 1, 1, 1);"

4.水色のコードが画像に影を付けて立体的に見せる為のコードです。

style="border-style:solid;border-color:#ffffff;border-width:5px;box-shadow:3px 3px 5px rgba(1, 1, 1, 1);"

【使用方法】
自分の知る範囲では、アメブロ、FC2ブログ、はてなブログ、ワードプレス、フリッカーの画像タグは画像リンクになってます。こんな感じです（↓）。

<a href="～移動先URL～"><img src="～画像URL～"></a>

このタグの後ろの方の、画像を表示する方のタグのimgの後ろに半角スペースを入れて、先程のタグを追記します。
こんな感じです（↓）。

<a href="～移動先URL～"><img style="border-style:solid;border-color:#ffffff;border-width:5px;box-shadow:3px 3px 5px rgba(1, 1, 1, 1);" src="～画像URL～"></a>

【例】
この記事の冒頭の画像のコードに、枠を互い違い（groove）にして、太さを8、色を緑色（#339900）にしたものを追記してみました。

↓

○要約：肝です^^;
画像表示タグのimgの後ろに半角スペースを入れて、

style="border-style:solid;border-color:#ffffff;border-width:5px;box-shadow:3px 3px 5px rgba(1, 1, 1, 1);"

を追記する。

○思うこと
何処かに出かけた時の写真を何枚も表示する時などに、「この写真は特に強調したい！！」なんて時に、この方法はいいんじゃないでしょうか♪

☆ブィブィ ('-^*)/

表示 - 継承 2.1

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

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

画像に枠を付けて立体的に