第24回：記事に挿入した画像に写真風の枠線と影を付けてみよう

記事部分に挿入した画像に写真風の枠線と影を付けてみましょう。
携帯のカメラで撮った写真でも立体感のある、ちょっとスタイリッシュ（？）な雰囲気で表示させることが出来ます。


このカスタマイズは、下記ブログの記事を全面的に参考にさせて頂いています。

■「小粋空間」様 内 『CSSで画像に影をつける（ドロップシャドウ）』（CSSタグ）
■ 「POCHIKING」様 内 『画像に自動的に影をつけてテキストを回り込ませる』（影用画像入手）

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

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

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

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

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

CSSを編集する

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

今までのCSS設定はここで終了でしたがこのカスタマイズの場合、画像を挿入する都度その画像に上記のCSSを呼び出すタグを挿入する必要があります。
今回は画像の挿入方法も合わせて説明します。

画像の挿入

1. 記事作成画面の任意の位置で「IMG（画像の挿入）」ボタンを押す。
2. 「画像の挿入」ウィンドウが開くので、「1.画像の選択」の「参照」ボタンを押し挿入したい画像を選択、「開く」ボタンを押す。
3. 元の画面に戻るので「画像の挿入」ボタンを押す。
   ※「カスタム設定」は必要に応じて設定して下さい。
   ※詳細については下記の記事を参考にして下さい。
   ■基本3： 記事欄への画像の挿入
4. 記事作成画面に画像が表示されれば完了。
   ※「プレーンテキストモード」の場合は、画像は表示されず画像表示用のタグが自動入力されます。

画像タグに影を付けるための記述を追加する

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="shadow">～</span>
   
   で囲む。
   ※つまり、上の画像タグの場合だったら、
   
   <span class="shadow"><img title="画像の名前" alt="画像の名前" src="画像のアドレス" border="0" style="FLOAT: left" /></span>
   
   になります。
4. 記事が書き終わったら「保存」ボタンを押す。
5. ブログを表示してイメージ通りに出来ているかどうか確認する。

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

• 今回のカスタマイズは、画像タグに「shadow」というセレクタを指定することによって、 影を付ける場合と付けない場合を選択できるようになっています。
  影を付ける場合は、必ず画像タグに<span class="shadow">～</span>を追加入力して下さい。
• 画像を挿入するときに生成されるタグの「margin」指定が残っていると影がずれて表示されてしまいます。
  必ず「margin」指定を削除して下さい。
• 既に入力されている画像にもCSSを設定した上で<span class="shadow">～</span>を追加すれば影を付けることが可能です。
• 上記以外の詳細な設定についても「小粋空間」様の該当記事で解説されていますので、ご参照下さい。

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

---

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

---