需要ある？ブログの写真にまるで本物の写真のような白い枠と影を付ける方法

2014年10月05日

ブログに載せた写真に白い枠と影、意外と需要ある？
|ω・｀)

ども、ピアノ教室管理人です。

ブログに載せた写真のフチに、本物の写真のような白い枠を付ける方法をご紹介します。

とはいっても、写真そのものを画像編集ソフトやスマホアプリで加工する方法ではなく、CSS、つまりスタイルシートで白い枠を付ける方法です。

写真自体を加工してしまうと後から白枠を取り除くことができなくなりますから、先々のことを考えると調整＆解除可能なこちらの方法がオススメです。

1.今回のサンプル写真とそのHTML

今回はこちらの写真をサンプルとして使います。

一般的にブログの写真はその写真本体へのリンクためのサムネイル※になるので、今回のサンプルもクリックできる状態でやってみます。

※サムネイルとは？
画像や印刷物ページなどを表示する際に視認性を高めるために縮小させた見本のこと。親指（thumb）の爪（nail）のように小さく簡潔であるという意味から来ている。

サムネイル | Wikipediaより

この写真のHTMLはこうなっています。

<a href="写真本体のURL" target="_blank">
<img src="サムネイルのURL" width="480" height="320" alt="サンプル写真">
</a>

※画像のURLは省略しました。
※本来は改行しませんが、分かりやすくするために改行しています。

2.写真のサムネイルにclass属性を付ける

まずはサムネイルにclass属性で名前をつけてあげましょう。

<a href="写真本体のURL" target="_blank">
<img class="picture" src="サムネイルのURL" width="480" height="320" alt="サンプル写真">
</a>

2行目のimgの後ろに半角スペースを空けて「class="picture"」と書き加えています。

これはブログの記事を書くエディタ上で行いますので、HTMLが編集できるエディタを使ってくださいね。

（アメブロだとタグ編集エディタか、新エディタのHTML表示。）

これでこの写真のサムネイルは「picture」というクラスに属していることになりました。

class属性の名前は「picture」でなくても、「photo」や「photograph」、「snapshot」など何でもいいです。

3.class属性pictureにスタイルを指定する

先ほどimgタグに書き加えたclass属性pictureに対して、本物の写真のような白枠が付くようにスタイルを指定していきます。

.picture{
  padding:15px; /*白枠の幅*/
  background-color:#FFFFFF; /*白枠の色（白）*/
  box-shadow:3px 3px 10px 2px #CCCCCC; /*影*/
}

これを各ブログのCSS編集画面で書き加えてください。

これで「picture」というclass属性を持つすべての写真に対して、白い枠と影が付くようにスタイルが設定されました。

4.本物の写真のような白い枠が付いたサンプル写真

はい、バッチリ写真のまわりに白い枠と影ができました。

なお、リンク先で表示される写真本体には白枠や影は付きませんのであしからず。
(m´・ω・｀)m ｽﾏｿ

影が見切れてしまうとき

もし左側の影が見切れてしまう場合、親要素の「overflow」の指定が「hidden（はみ出さない）」になっている可能性がありますので、CSSで「visible（はみ出して表示）」を指定してあげてください。

親要素が何になっているかは、そのブログによって違います。

ちな、このSeesaaブログのPC版ではこんな感じ。

#container,
#content,
.blog,
.blogbody,
.text{
  overflow:visible;
}

5.CSSとかよく分からないというあなたには...

使っているブログのCSSとかよく分からないという方には、直接写真のHTMLに書き加える方法があります。

<a href="写真本体のURL" target="_blank">
<img style="padding:15px;background-color:#FFFFFF;box-shadow:3px 3px 10px 2px #CCCCCC;" src="サムネイルのURL" width="480" height="320" alt="サンプル写真">
</a>

2行目のimgの後ろに半角スペースを空けて「style="padding:15px;background-color:#FFFFFF;box-shadow:3px 3px 10px 2px #CCCCCC;"」と書き加えれば、同じように白枠と影の付いた写真が表示されます。

ただこの方法の場合、後から修正や解除をするためには一枚ずつ作業を行わなければならないのでとっても大変。

あまりオススメしません。
(；´Д｀)

それではまた。
(´∀｀*)ﾉｼ　ﾊﾞｲﾊﾞｲ

【オヌヌメ】