stroll [名] [C] ぶらぶら歩き,散歩.

  スポンサーサイト

一定期間更新がないため広告を表示しています

- | permalink | - | - | ↑top
Clip!! | Ranking |

  フィルターをかける例2


前回紹介した「フィルターをかける例」のように、全体にフィルターをかけると、Operaなどのブラウザでトップ画像がまったく見えなくなってしまいます。
上の画像のようにタイトル&説明部分だけにフィルターを使用する例を紹介します。
・テンプレート:pictの場合

まず、</head>の直前に以下のJavaScriptを追加します。
<script type="text/javascript" language="javascript" src="http://www.remus.dti.ne.jp/~sugiyama/headpic/getheadbanner.js"></script>
<script type="text/javascript">
<!--
// トップ画像共有プロジェクト
document.write("<style>");
document.write("#hsp {");
document.write("width: 700px;");
document.write("height: 100px;");
document.write("background-repeat:no-repeat;");
document.write("background-image: url(");
document.write(getHeaderPicFileName());
document.write(");");
document.write("}");
document.write("</style>");
// -->
</script>

次に、太字部分を探して・・・
<body>
<a name="top"></a>


<!--HEAD-->
<table width="720" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="10" background="../template/pict/img/left.gif"><img src="../template/pict/img/blank.gif" width="1" height="150" /></td>
<td width="700" background="../template/pict/img/main.jpg">

<!-- BEGIN title -->

<h1 class="site_title">{blog_name}</h1>
<div class="description">{blog_description}</div>

<!-- END title -->

</td>
<td width="10" background="../template/pict/img/right.gif"><img src="../template/pict/img/blank.gif" width="1" height="150" /></td>
</tr>
</table>

上の太字部分を以下のHTMLと入れ替えます。
<!-- BEGIN title -->
<table width="720" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="10" background="../template/pict/img/left.gif"><img src="../template/pict/img/blank.gif" width="1" height="100" /></td>

<td>
<table width="700" height="100" border="0" cellpadding="0" cellspacing="0" id="hsp">
<tbody>
<tr>
<td width="250" height="100" style="background-color:#FFFFFF;filter:Alpha(opacity=80);-moz-opacity:0.8;border-right: 1px solid #666;">
<h1 class="site_title">{blog_name}</h1>
<div class="description">{blog_description}</div>
</td >
<td width="450">
<div></div>
</td>
</tr>
</tbody>
</table>
<!-- END title -->

</td>
<td width="10" background="../template/pict/img/right.gif"><img src="../template/pict/img/blank.gif" width="1" height="100" /></td>
</tr>
</table>

赤字部分を変更することで、色や濃さを変更できます。
・filter:Alpha(opacity=50);-moz-opacity:0.5;
 -moz-opacityの値は、opacityの値を100で割った値を設定してください。
 値を大きくすることで、色が濃くなります。

最後に、CSSの修正です。
赤字部分を変更してください。
.description {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 12px;
font-weight: bolder;
color: #000000;
margin: 10px 0px 0px 20px;
}
others(Headpic Sharing Project) | permalink | comments(15) | trackbacks(1) | ↑top
Clip!! | Ranking |

  スポンサーサイト

- | permalink | - | - | ↑top
Clip!! | Ranking |

  Comment List
strollさん、ありがとうございました。
バッチリ表示できるようになりました。
ほんと、お忙しいところありがとうございました。感謝感激です。
これからも、strollさんのサイトを参考にいろいろカスタマイズしていきたいと思いますので、よろしくお願いします。
ayumiさん | 2004/06/18 07:28
>>ayumiさん
バッチリ表示されてますね♪
こちらこそ、これからもよろしくですm(__)m
strollさん | 2004/06/18 09:44
初めまして、こんにちは。大判小判と申します。strollさんの記事を参照にフィルターをかけてみましたが、なかなかできません。
・白い部分が半分こになってしまう
・一瞬できたように見えて最終的には左半分に違う画像がUPされて重なってしまう。
テンプレートはglass、タイトルは左に寄せて、幅770高さ100です。自分なりに考えてHTMLをやってみたのですが…。長々とすみません。もしお分かりでしたら、教えていただけないでしょうか。

<a name="top"></a>

<!-- BEGIN title -->
<table width="770" height="100" border="0" cellspacing="0" cellpadding="0" id="hsp">
<tbody>
<tr>
<td class="title_bg" width="250" height="100" style="background-color:#FFFFFF;filter:Alpha(opacity=80);-moz-opacity:0.8;border-right: 1px solid #666;">
<h1 class="site_title">{blog_name}</h1>
<div class="description">{blog_description}</div>
</td>
<td width="520">
<div></div>
</td></tr></tbody></table>
<!-- END title -->
大判小判さん | 2004/06/19 16:35
>>大判小判さん
class="title_bg"
↑を削除するとうまくいくと思います。
どうでしょうか?
strollさん | 2004/06/19 17:11
うわー!すごいです。きちんと表示されるようになりました。
strollさん、本当にありがとうございました!
とても嬉しいです。これからも勉強していきたいと思います。
大判小判さん | 2004/06/19 17:31
>>大判小判さん
どういたしまして。
キレイに表示されるようになったみたいですね。
あと、スタイルシートtitle_bg用のJavaScriptも削除しておいた方がいいですね。
strollさん | 2004/06/19 18:47
重ね重ねありがとうございました。
できたときは、本当に感動!しました。
これからも精進してまいります。
大判小判さん | 2004/06/20 07:33
あれ?
もしかして、タイトル部分(Top画像左)って
Operaでも見えるようになってます?
読み込み中の時しか見えないんですけど。
(読み込み終わると、「_」となってます)
Operaだから駄目なんだと思ってたんですけど
もしかして見えないのは私だけ…?
yuzさん | 2004/06/20 10:14
>>yuzさん
あっ!ホントだ_| ̄|○
Operaだと2箇所に設置するとダメみたいですね。。(泣
報告ありがとうございます。
strollさん | 2004/06/20 13:01
i like this site
language phentermine ruさん | 2006/03/15 05:11
i like this site
read this
myblog.de online xanaxさん | 2006/03/20 02:59
<a href=http://7rape.com/mp3/kazoo-mp3-player > kazoo-mp3-player </a>,[url=http://7rape.com/mp3/kazoo-mp3-player ] kazoo-mp3-player [/url], http://7rape.com/mp3/kazoo-mp3-player <a href=http://freelink.org/antidepressants > antidepressants </a>,[url=http://freelink.org/antidepressants ] antidepressants [/url], http://freelink.org/antidepressants <a href=http://freelink.org/allergies > allergies </a>,[url=http://freelink.org/allergies ] allergies [/url], http://freelink.org/allergies <a href=http://7rape.com/mp3/napa-mp3-player > napa-mp3-player </a>,[url=http://7rape.com/mp3/napa-mp3-player ] napa-mp3-player [/url], http://7rape.com/mp3/napa-mp3-player <a href=http://7rape.com/mp3/personal-mp3-player > personal-mp3-player </a>,[url=http://7rape.com/mp3/personal-mp3-player ] personal-mp3-player [/url], http://7rape.com/mp3/personal-mp3-player <a href=http://7rape.com/mp3/samsung-mp3-player > samsung-mp3-player </a>,[url=http://7rape.com/mp3/samsung-mp3-player ] samsung-mp3-player [/url], http://7rape.com/mp3/samsung-mp3-player <a href=http://7rape.com/mp3/sports-mp3-player > sports-mp3-player </a>,[url=http://7rape.com/mp3/sports-mp3-player ] sports-mp3-player [/url], http://7rape.com/mp3/sports-mp3-player <a href=http://7rape.com/mp3/mini-mp3-player > mini-mp3-player </a>,[url=http://7rape.com/mp3/mini-mp3-player ] mini-mp3-player [/url], http://7rape.com/mp3/mini-mp3-player <a href=http://7rape.com/mp3/mb-mp3-player > mb-mp3-player </a>,[url=http://7rape.com/mp3/mb-mp3-player ] mb-mp3-player [/url], http://7rape.com/mp3/mb-mp3-player
Kathy Phillipsさん | 2006/03/21 07:03
Kirk Macniderさん | 2006/03/22 08:46
Debbie Millerさん | 2006/03/25 09:50

  Comment









  Trackback URL
 

  Trackback
いろいろとカスタマイズについてのサイトをめぐっていたところ、 strollさんのstroll:blogで 「トップ画像共有プロジェクト」というものを知りました。 なんでも、タイトルのところの画像がランダムに変わるらしい。 ム、難しいかも?? でも、私は新しい物好き
今日の大判小判 | 2004/06/19 17:55
Home  |  Selected Entries  |  Recent Comments  |  Recent Trackback  |  Categories  |  Archives  |  bbs