So-net無料ブログ作成
検索選択

画像をポラロイドみたいに(CSS技)をSo-netブログで・・・ [ブログ作成]

ビートのHP(←のリンクより見て!)ではUPした写真をポラロイド風に仕上げています。
HPではCSSを利用しているので、So-netブログでも挑戦です。
といっても、ブログは今日立ち上げたばっかりです。

CSSの編集はどこでできるのか??
使い方」を参照しながら・・・

●管理画面で「デザイン」タブを選択
●「スキン管理」を選択
●使用しているスキンの名前をクリック

おっ、出ました!CSSがでてきました!!
それでは、CSSの最後に以下を付加しましょう!!!

/*ポラロイド風に設定*/
.abcdefg
{
padding: 10px 10px 25px 10px;
background-color: #FFFFFF;
border-style: solid;
border-width: 2px;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}

※これを参考にされるなら・・・
.abcdefg の abcdefg はお好きな名前にしてください。
ちなみに、padding: 10px 10px 25px 10px; で写真のまわりに白い枠を付加します。
padding: 上 右 下 左; という感じで枠を付けます。
ポラロイド風なので下の枠だけ太めにします。

コードを付加したら保存します。
これで、CSSの編集は完了、準備OKです。

つぎに「新規作成」で文書と写真を追加します。
この時点では、まだポラロイドではありません。

pin0_A.jpg

写真のコードに以下を付加します。
class="abcdefg"
こんな感じです。
<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="abcdefg" />

pin0_A.jpg

できました!!!
ポラロイド風にしたい写真にだけclass="abcdefg"を付加すればいいのです。
nice!(0)  コメント(0)  トラックバック(0) 

nice! 0

コメント 0

コメントを書く

お名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

*script by KT*

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。