<< 当サイトのスキン編集お勧め記事 サイドのコメントやトラックバッ... >>
 

投稿欄ヘッダのグラデーション


ブログの玉手箱さんで記事タイトルのグラデーション を説明されています。
私はこのアイディアを参考にIE以外でも表示可能なグラデーションを
説明したいと思います。

a0031863_20395962.jpg

図1 設置例







CSS編集部分


あらかじめグラデーションのイメージを作成しておきます。
このグラデーションイメージをy軸に沿ってリピート表示をします。
みなさんも知っている方法で単純ですが、結構使えます。

グラデーションイメージファイルを見づらいですが図1に示します。
このグラデーションイメージはExcelで作成しました。

a0031863_20403817.jpg

図2 グラデーションイメージファイル






DIV.POST_HEAD {
/*------------------ ここから追加 --------------------*/
background-image:url(イメージURLアドレス);
background-position:left;
background-repeat:repeat-y;
/*------------------ ここまで --------------------*/


}



今日のポイント
  • background-repeat:repeat-y;でY軸方向(上下方向)にイメージを連続して表示しています。




難易度:★★
ちょっと、グラデーションイメージを作るのが難しいかも^^;

ぽっと

CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-09-17 20:39 | │├投稿欄 | Trackback(1) | Comments(10)
トラックバックURL : http://potto.exblog.jp/tb/1044360
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from 「ス」的な日常生活 at 2004-10-23 23:52
タイトル : 投稿欄ヘッダも秋気分。
ぽっとの陽だまり研究室さまの投稿欄ヘッダのグラデーションを参考にしながら、投稿ヘッダででも秋の気分をかもし出してみました! あ、そういえば、昨日画像がどーのこーの言ってましたが・・・ 本日、初めて気づきましたよ・・・、スキン編集画面に画像アップロードするところが あることに!(←おそっ) ... more
Commented by imichiyoi at 2004-09-18 17:17
ぽっと さん、初めましてMichiyoです、
pirloyan_tyavgさんに紹介頂き、来した!
ぽっとさんの検索Googleで文字化けについて検索させて頂きました。
実は、今SafariとMac OSXを使用していますBlogからリンクをはって
みたろころ、ページが、IEやネスケでは文字化けしています、
文字コードを日本語(EUC)JPにするとちゃんと表示されますが
私の設定が間違っているのか?!色々解るかぎりの事はしたつもりですが
解決出来ず困っています、何か参考にさせて頂ける事があったら
是非お願いしたいと思って、コメントしました

リンクもさせて頂きました、宜しくお願い致します。
Commented by potto37 at 2004-09-18 22:05
imichiyoiさん、はじめまして。

文字化けについては、こちらのサイトをご覧下さい。
きっと、お役に立つと思います。
http://tohoho.wakusei.ne.jp/how2/tec1.htm#mojibake
Commented by sweet-love-punch at 2004-09-19 14:33
ぽっとさん初めまして!
紹介されていること(コメント欄とか)参考にさせていただきました。
ありがとうございます。リンクさせていただきますね。
ここ、ネコちゃんがいっぱいでかわいいです☆
Commented by potto37 at 2004-09-19 15:09
sweet-love-punch さん、はじめまして。
お役に立てて嬉しいです。
リンクありがとうございます。
これからも、よろしかったら遊びに来てくださいね。
Commented by esterstation at 2004-09-19 22:46
スキンが変わって見やすくていいと思いますよ^^
グラデーションもなかなか綺麗なので、今度参考にさせてもらおうと思います。
Commented by potto37 at 2004-09-20 08:23
esterstation さん、いつも遊びに来ていただいて
ありがとうございます。
なんか、褒められると嬉しいですね。

esterstation さんもスキンを変えられたようで、
なかなかいい感じですね。

最近、スキン編集をいろいろしていたら
楽しくなって来ました。
たまには模様替えもいいですね。
Commented by hikkoro-dayori21 at 2004-09-20 09:38
いつの間にかスキンが変わっていてビックリしました!
このグラデーション、いいですね!
私も投稿欄のヘッターに使ってみたいなと思いました。

私も今日の記事で「ブログの玉手箱」さんの技を紹介させていただきました。
皆さん色々と工夫がなされていて、すごいですね(^^)v
Commented by potto37 at 2004-09-20 09:59
hikkoro-dayori21 さん、おはようございます。
スキンを変更していたら楽しくなって、
こんなことになっています^^

このグラデーションは、イメージを利用しているので
イメージを作るのが難しいかもしれません。
でも、Excelで作ると意外と簡単ですよ。
Commented by sakuraharu66 at 2004-10-14 08:41
ぽっとさん、おはようございます。
お久しぶりです。

こちらを参考にさせていただいたグラデーション機能を使って今回スキンを作りました。
グラデーションは微調整に時間がかかってしまいますね。

また遊びに来ますね~~(^o^)ノ
Commented by potto37 at 2004-10-14 20:32
はるさん、お久しぶりです。

お役にたてたようで嬉しいです。
グラデーションの微調整大変ですよね。

遊びに来て頂いて、コメントをもらえると嬉しいです^^
<< 当サイトのスキン編集お勧め記事 サイドのコメントやトラックバッ... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。