リンク
カテゴリ
カテゴリ:★コメント欄の変更( 2 )
画像の追加
★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 | ★コメント欄の変更
エキサイトのコメント欄の変更
★コメント欄の行数を増やす
今日はエキサイトの狭すぎるコメント欄を増やしてみました。
ブログ初心者ですから当然、ネット検索でプチッとねw
色々見てるうちにmitsu-kenさんのブログで紹介記事が載ってたので早速自分でもやってみる事にしました~。
凄く簡単なので挑戦してみてくださいね。
下のコードをCSS編集の画面にコピーして張り付けるだけで変更可能です
1行が1cmみたいなので下の数字のとこを 10 にしてみました。

TEXTAREA.TXTFLD {height:10em;}


                  

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
★コメント欄の装飾
これも結構簡単そうだったのでやってみる事に( ´艸`)
CSS編集でコメント欄のTEXTAREA.TXTFLD {height:10em;} に 追加するだけです       
background-image:url("イメージをアップロードしたURL");
background-position:0% 100%;background-repeat:no-repeat;
  繰り返し無し
追加後

TEXTAREA.TXTFLD{
        height:10em;background-image:url("http://pds.exblog.jp/pds/1/200706/14/83/b0063421_215547.jpg");
        background-position:100% 100%;background-repeat:no-repeat;
        }



シニアネットとともにさんのブログをお手本にしております~
[PR]
by sakura_lljp | 2007-06-12 14:31 | ★コメント欄の変更
  |  トップ  |  


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 花梨サーバー イベント&活動日記 リンクフリーです