==教えることは自分育て==

カテゴリ:├ポラロイド風写真( 3 )
|TOPに戻る
ポラロイドの右寄せ、左寄せ
ポラロイド風のスタイルにすると、思うように右寄せ・左寄せが出来ないとお悩みの方へ。

可愛い音楽隊あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。

可愛い音楽隊可愛い音楽隊あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。


右寄せは、<img src="http://pds.exblog.jp/pds/1/200708/04/21/b0063421_224182.jpg" class="waku4" width="160" height="160" alt="可愛い音楽隊" align="right">あああああああ

左寄せは、align="left"です。これはHTMLタグです。

CSSでは、style="float:left"です。
[PR]
by otomi7771 | 2007-08-04 21:54 | ├ポラロイド風写真 |TOPに戻る
<応用3>ポラロイド風写真


【解答1】インラインCSS

<投稿画面>
手順
まず写真を1枚UP。プレビューで見て、画像の上で右クリック→プロパティ→
写真のURLをコピー

テキスト通りにタグを打つ(写真とサインのURLは自分のものを貼り付け)
サインのURLは、テキストP6(2)カスタマイズで使う画像の置き場を参照されてください。

擬似タグを削除

<img src="http://pds.exblog.jp/pds/1/200704/23/21/b0063421_1153778.jpg" style="margin:5px;padding:5px 5px 30px 5px;border-top:1px solid #cccccc;border-right:1px solid #999999;border-bottom:1px solid #999999;border-left:1px solid #cccccc; background-color:#F6F6F6;background-image:url(http://pds.exblog.jp/pds/1/200703/25/41/sign.gif);background-repeat:no-repeat;background-position:95% bottom;">

これを毎回インラインに書き込むのは、大変ですね。
そこで、

【解答2】内部CSS
 このスタイルをimg.waku4と内部CSSに名前を付けて保存。

<CSS編集>
img.waku4{margin:5px;padding:5px 5px 30px 5px;border-top:1px solid #cccccc;border-right:1px solid #999999;border-bottom:1px solid #999999;border-left:1px solid #cccccc;background-color:#F6F6F6;background-image:url(http://pds.exblog.jp/pds/1/200703/25/41/sign.gif);background-repeat:no-repeat;background-position:95% bottom;}

<投稿画面>

投稿画面で、class=waku4と名前を呼び出して、スタイルを適用します。
たったこれだけでいいのですよ。簡単ですね。

<img src="http://pds.exblog.jp/pds/1/200704/23/21/b0063421_1153778.jpg" class=waku4>
[PR]
by otomi7771 | 2007-04-23 22:03 | ├ポラロイド風写真 |TOPに戻る
P14.ポラロイド風写真の応用
擬似タグを使って、その回りに枠を設定します。
そうしますと、ジャバスクリプトは生きますので、クリックすると写真は拡大します。文字も入れられます。

b0063421_13562.jpg
月の輪椿
草野超町椿ウォーキング


このスタイルのタグです。
padding:0px 15px 15px;border:1px solid green;background-color:#ffffdb;margin:0px 115px;
[PR]
by otomi7771 | 2007-03-26 00:58 | ├ポラロイド風写真 |TOPに戻る