カスタマイズ・レコード１２ －写真・画像の枠つけ－

【写真・画像の枠付け】

今まで写真や画像を掲載する時は、…画像だけだと淋しいから… と
テーブルタグを用いて上下にラインをつけていたのですが
配置が上手に行かない等、少なからず、不満を持っていました。
…それが！それが～！…、初めてのココログ・カスタマイズさん の
「第25回：記事に挿入した画像をポラロイド写真風に表示してみよう」 を
参考にさせていただき、写真・画像に枠付けをしたところ、
やっと希望に沿った写真飾りが出来て大いに満足♪♪。
写真や画像を飾ってみたい方は、以下のタグ等を参考になさって下さいませ。

「ちょろ栞」でご紹介 こんな感じになります！？。　（「選挙が間近になりました」より 7-25-07）

★枠となる画像のダウンロード・アップロード
①画像のダウンロード
POCHINGさん のサイトより、枠となる画像を
「画像に自動的に影をつけてテキストを回り込ませる」 の
ページの中程にある「画像はこちら」 とある部分の
＜こちら＞ をクリックして表示させ保存します。

②画像のアップロード
ご自分が用意しているフォルダーにアップロードします。

★カスタムCSS　に記述
①枠となる画像の設定
.pola { background: url(http://～/○○○.gif) right bottom;
　　　　※枠となる画像をアップした絶対パスを記入
float: left; /* 回り込み制御 */
}
.pola img {
position: relative; left: -5px; /* 画像を左へ移動 */
　　　　　　　　　　　※ご自分の好みによって数値の変更可
top: -5px; /* 画像を上へ移動 */
padding: 10px 10px 50px 10px; /* 画像枠 */
background: #ffffff; /* paddingを設定した場合の背景色 */
border: 1px solid #999999; /* 画像の枠線 */ }

②画像の下部分の大きな余白に文字やマークを入れる場合
表示させたい自作の文字やマーク等を
ご自分が用意しているフォルダーにアップロードして　
～ .pora img ～ タグ内　に以下を追加します。
background-image:url(http://～/○○○.gif); /*文字入り画像の指定*/
　　　　　　　　※ご自分の画像をアップした絶対パスを記入
background-repeat:no-repeat; /*画像繰り返し：なし*/
background-position:right bottom; /*画像の位置*/
　　　　　　　　※「右・下」 を指定した場合
　　　　　　　　※ご自分の好みによって数値の変更可

③画像タグにCSSを呼び出す記述を追加
※この作業をしないと表示がずれてしまうので
　ブログを書く際に写真・画像を掲載される時は、
　「HTMLの編集」ページで以下の処理を必ず、なさって下さいネ！
　　　↓
1）不要タグの削除
画像を呼び出すタグを見ると
<img title="画像の名前" alt="画像の名前"
src="画像のアドレス" border="0" style="FLOAT: left;
MARGIN: 0px 5px 5px 0px" />
というようなタグが入力されているので、そこから
MARGIN: 0px 5px 5px 0px を削除します。
2）タグの追加
上記のタグを　<span class="pola">～</span>　で囲みます。
上記の画像タグの場合だったら、
<span class="pola"><img title="画像の名前" alt="画像の名前"
src="画像のアドレス" border="0" style="FLOAT: left" /></span>
となります。

ポラロイド風の写真枠がなかなかオシャレですよね（*^_^*）
尚、シンプルな枠をご希望の方は、初めてのココログ・カスタマイズさんの
「第24回：記事に挿入した画像に写真風の枠線と影を付けてみよう」 を
ご覧になってみて下さいましm(__)m

【追記】
③－1）不要タグの削除
リンクタグ（<a>～</a>）も削除する方が設定した写真枠の色が反映されます。
リンクタグを残すと、設定しているリンクカラーが優先的に反映されますので
ご注意下さいませ。