写真やイラストに枠・影・署名を付けてオシャレな表示にする方法

写真やイラストを枠・影・署名を付けてオシャレな表示にする方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、CSS編集用デザインを使っているアメブロで、記事にアメブロのパソコン版記事エディタの画像貼り付け機能を使って貼り付けた画像を、CSSを使って枠付き・影付き・署名付きのオシャレな感じに表示するカスタマイズ方法をご紹介します。

(本当にオシャレかどうかの指摘は無しでお願いします^^;)

この方法を使うと、記事に貼り付けた画像が、次のように表示されるようになります。

やり方は、ユーザーCSSの末尾に以下のようなコードを追加すればOKです。

/************************************************
  写真やイラストをオシャレに表示する
  by わざめーば http://ameblo.jp/wazameba/
************************************************/

/* 枠 */
.articleText a.detailOn {
  display: inline;
  display: inline-block;
  zoom: 1;
  margin: 10px;
  padding: 10px 10px 20px 10px;
  max-width: 370px; /* 画像幅+10程度 */
/* 1.5度右へ傾ける */
  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  -ms-transform: rotate(1.5deg);
  -o-transform: rotate(1.5deg);
  transform: rotate(1.5deg);
/* 背景・境界線・影 */
  background: #fcfcf7 none no-repeat bottom right;
  border: 1px solid;
  border-color: #eee #ccc #ccc #eee;
  border-radius: 3px;
  box-shadow: 4px 4px 8px #aaa, 1px 1px 2px #fff inset, -1px -1px 2px #ddd inset;
/* 文字関連 */
  text-align: right;
  font-size: 14px;
  font-style: italic;
  color: #bbb;
  text-shadow: -1px -1px 0 #fff, 2px 2px 4px #888;
}
/* 画像 */
.articleText a.detailOn img {
  display: block;
  height: auto !important;
  width: auto !important;
  *width: 360px; /* IE6用 */
  max-width: 360px;
}
/* 画像下の文字列 */
.articleText a.detailOn:after {
  content: "photo by Wazameba.";
}

赤文字・太字で書いてある部分は、記事幅に合わせてはみ出さないように設定してください。

ちなみに、上のコードでは、画像の幅が最大360ピクセルで表示されます。

枠や影を付けて少し傾けていますので、記事幅に対してかなり余裕を持たせた値にしなければはみ出してしまいますのでご注意ください。

また、緑文字・太字部分には、画像の下に署名のように表示したい文字列を指定します(HTMLタグは書けません)。

各ブラウザでの見え方

なお、今回のカスタマイズ方法では、各ブラウザのCSSのサポート状況によって見え方がかなり違います。

以下に、いくつかのブラウザでの見え方をご紹介しておきますので参考になさってください。

Mozilla Firefoxでの見え方
↑Mozilla Firefox(Windows版)での見え方

Google Chromeでの見え方
↑Google Chrome(Windows版)での見え方

IE10での見え方
↑Internet Explorer 10(IE10)での見え方

IE9での見え方
↑Internet Explorer 9(IE9)での見え方
(text-shadowが対応していないため文字に影がつきません)

IE8での見え方
↑Internet Explorer 8(IE8)での見え方
(CSS3全般に対応していないため、影・角丸・傾きは無視されます)

IE7での見え方
↑Internet Explorer 7(IE7)での見え方
(「:after」に対応していないため、画像下の文字が表示されません)

また、IE6ではIE7と同様の表示になりますが、さらに「max-width」に対応していないため画像幅が固定となります。

以上、よかったら参考にしてください。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ