CSSとかでブログの写真に枠と影をつけてみた。

CSSで画像に枠や影をつける – ブログ別!作成・カスタマイズ講座

ohlife(参考:続けさせる仕組みが面白い非公開日記サービス「OhLife」を使ってみた)での写真の表示のされ方がきれいだったので似たようなのをやりたいなーと思い、上述のサイトさんを参考に似た感じにしてみました。最初はOhLifeのやり方を調べてたのですが、なんか四方の画像がバラバラのようでCSSもいまいち理解できなかったので、検索して上述のサイトさんのお世話になったという感じです。

仕上がりは

仕上がりはこんな感じになります。「画像だけ表示」とかにしていただければわかるかと思いますが、周りのふち的な部分はアプロードした写真には含まれません。


作成方法。

要望があれば詳しく書きますが、簡潔にまとめると以下のとおりとなります。

1、Photoshop等でふち的部分の画像を作成してアップロード。(これです
2、CSSを編集する。
  .shadow { background: url(“ふち的部分画像のURL”);
          float: left;
          padding: 23px; }

3、ブログエントリー記述時に <div class=”shadow”><img src=”写真URL”></div><br clear=”all” /> と書いて写真掲載する。

一度ふち的部分の写真を作ってしまえば、同じ大きさで写真を掲載する場合は毎回「3」のコードを記述するだけでふち付き写真が掲載できます☆
縦600×横450の写真を掲載されるのであれば、上述のふち的部分画像(縦写真)ふち的部分画像(横写真)をダウンロードしてコードをコピペするだけで同じことが出来ますのでどうぞ。

※Firefox3.6.10、IE8、Safari5.0.2で表示確認済み。

コメント欄はこちら

カテゴリー

アーカイブ