第25回：記事に挿入した画像をポラロイド写真風に表示してみよう

前回（ 「第24回：記事に挿入した画像に写真風の枠線と影を付けてみよう」） の記事をちょっと応用してポラロイド風に表示出来るようにしてみました。
影の画像やタグは前回と殆ど同じCSSを利用するので、前回のものを既に適用している場合は【事前準備】は不要です。
今回用に書き換えたCSSのみ追加入力して保存して下さい。

今回のカスタマイズは下記ブログの記事を参考にさせて頂いています。

■「小粋空間」様 内 『CSSで画像に影を付ける（ドロップシャドウ）』
■「Dear Days別冊」様 内 『ポラロイド背景に画像を（茶系）』

ありがとうございました。

事前準備1：影用の画像を準備する

「POCHIKING」様 内 『画像に自動的に影をつけてテキストを回り込ませる』の記事からリンクしてある影用の画像をダウンロードします。
該当ページの真ん中辺りで「画像はこちら。」と書いてある部分の「こちら」に貼ってあるリンクをクリックし、表示されたページの画像を自分のPC内に保存して下さい。

事前準備2：影用の画像をココログにアップロードする

上記で入手した画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
■ 『基本1：ファイルのアップロード』
を参照して下さい。

CSSを編集する

1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックしリンクを開く。
2. ブラウザのアドレスバーにそのファイルの保存先のurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
   ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
3. 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
   ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・ テンプレート」を作成してください。
   ※カスタムテンプレートの作り方は
   ■ 『第3回：カスタムテンプレートを作ってみよう』
   を参照して下さい。
4. 「編集」画面のCSS記述欄に
   
   .pola {
       background: url(●●●) right bottom;
       float: left; /* 回り込み制御 */
   }
   
   .pola img {
       position: relative;
       left: -5px; /* 画像を左へ移動 */
       top: -5px; /* 画像を上へ移動 */
       padding: 10px 10px 50px 10px; /* 画像枠 */
       background: #ffffe0; /* paddingを設定した場合の背景色 */
       border: 1px solid #999999; /* 画像の枠線 */
   }
   
   を全て半角英数で記述する。
   ※●●●には上記で保存した画像のURLを入力して下さい。
   ※前回のCSSとは赤文字の部分だけが異なります。
   ※ 上記のCSSは「小粋空間」様 内 『CSSで画像に影を付ける（ドロップシャドウ）』、「Dear Days別冊」 様 内 『ポラロイド背景に画像を（茶系） 』を参考にさせて頂きました。
5. 「変更を保存」ボタンを押す。
6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。

今までのCSS設定はここで終了でしたがこのカスタマイズの場合、画像を挿入する都度その画像に上記のCSSを呼び出すタグを挿入する必要があります。
※画像の挿入については前回の記事
■ 『第24回： 記事に挿入した画像に写真風の枠線と影を付けてみよう』
またはココログの公式ヘルプ
■「使い方ヘルプ」内 『3：ブログへの画像/ファイルのアップロード』
を参照してください。

画像タグにCSSを呼び出す記述を追加する

1. （「リッチテキストモード」の場合）「HTMLの編集」画面に切り替える。
   ※「プレーンテキストモード」の場合はそのままでOKです。
2. 画面に
   
   <img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left; MARGIN: 0px 5px 5px 0px" />
   
   というようなタグが入力されていると思うので、そこから
   MARGIN: 0px 5px 5px 0px
   を削除する。
   ※「カスタム設定」を設定した場合はもっと複雑なタグが記入されますが、そこからも同様に「MARGIN: 0px 5px 5px 0px」の部分を探して削除して下さい。
   ※この部分が残っていると影の表示がずれてしまいます。
3. 上記のタグを
   
   <span class="pola">～</span>
   
   で囲む。
   ※つまり、上の画像タグの場合だったら、
   
   <span class="pola"><img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left" /></span>
   
   になります。
4. 記事が書き終わったら「保存」ボタンを押す。
5. ブログを表示してイメージ通りに出来ているかどうか確認する。

以上です。
上手くできましたか？

• このCSSを適用する場合、使用する画像は縦長のものよりも少し横長か正方形に近い方がそれっぽく見えます。
• 画像の下部分の大きな余白にサイン（文字）を入れたい場合は、 好きな文字を入れた画像を別に作成しそれをココログにアップロードした上で
  
  background-image:url(●●●); /*文字入り画像の指定*/
  background-repeat:no-repeat; /*画像繰り返し：なし*/
  background-position:▲ ■; /*画像の位置*/
  
  の記述を「.pora img」タグ内に追加してください。

■「小粋空間」様
■「Dear Days別冊」 様
■素材サイト 「PRISM」様＜記事内のボタン素材＞

---

*この記事にコメントを書く*

---