リンク
カテゴリ
画像の追加
★tageの表示にポイント画像をつけてみたので紹介します。もとは本文下中央にあったのですがどうも中央のままポイントイメージを追加しようと試みたけど上手く行かなかったの左の端に表示を移動してポイントの画像つけてみました。
b0071783_8375516.jpg


div.TAGS{margin:10px;text-align:center;}

となってましたので、center を left! important に変更して左端に移動

・tagsとスクローズの間には半角分の隙間を追加するための
 TAGS a{padding-left:0.5em;} を追加

・画像の追加のコードは↓です
.TAGS{
background-image:url("http://pds.exblog.jp/pds/1/200706/20/83/hana-ani02.gif");
background-repeat:no-repeat;
background-position:left center;
padding-left:20px;
margin-top:1em; /*上との記事の間に1行分の隙間を入れる*/
}
・赤字の部分はマイイメージアカウントにイメージ登録してイメージURLをコピーして使います

・変更後はこうなります

div.TAGS {
margin:10px;
text-align:left! important;
}
.TAGS a{
padding-left:0.5em;
}
.TAGS{
background-image:url("マイイメージアカウントにイメージ登録したイメージURL");
background-repeat:no-repeat;
background-position:left center;
padding-left:20px;
margin-top:1em; /*上との記事の間に1行分の隙間を入れる*/
}



★次にメニューにも初めについてる画像から気に入った小さなイメージに変更してみました。
b0071783_8381051.jpg


div.menu_title h3 {
background: transparent url("http://pds.exblog.jp/pds/1/200706/18/83/futaba.gif") no-repeat

赤字の部分を マイイメージアカウントにイメージ登録したイメージURLに変更するだけです
★avaScritpを使用しないで、画像をズーム


アンカータグの中にimgタグで2つの画像を埋め込んであります。2つの画像にはsmallとzoomの2つの違ったクラスを指定してあり、通常はzoomの画像をdisplay:none;で非表示にし、マウスが乗った時に display:block;で表示するようにしてあります。
HTML部分説明用に改行とコメントを入れてあります。
HTML編集


<div class="popup">;
<a href="自分のブログのアドレス">

<!- 始めに表示しておく小さな画像 ->
<img src="イメージURLアドレス" height=高さ width=幅 class="small">

<!- マウスを乗せて大きく表示する画像 ->
<img src="イメージURLアドレス" height=高さ width=幅 class="zoom">

</a>
</div>


CSS編集

/*画像の拡大表示*/
.popup a:link img.zoom,
.popup a:visited img.zoom,
.popup a:active img.zoom,
.popup a:focus img.zoom{
display:none;
border-style:none;
}

.popup a:hover{background-color:transparent;}

.popup a:hover img.zoom{
border-style:none;
display:block;
}

.popup a:link img.small,
.popup a:visited img.small,
.popup a:active img.small,
.popup a:focus img.zoom{
border-style:none;
display:block;
}
.popup a:hover img.small{
border-style:none;
display:none;
}


[PR]
by sakura_lljp | 2007-07-04 00:40 | ★コメント欄の変更
<< 画像にフィルターをかけて表示   |  トップ  |   今日の日付にポイント画像を追加 >>


S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
リンク
スキン編集のテキスト
その他のジャンル
以前の記事
ファン
記事ランキング
ブログジャンル
画像一覧

 Maplestory 花梨サーバー イベント&活動日記 リンクフリーです