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

  スポンサーサイト

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

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

  トップ画像共有プロジェクト:フィルターをかける例

当blogで紹介させていただいてますN@Blogさんのトップ画像共有プロジェクトですが、blogタイトルを文字で表示していると、画像によってはタイトルが見難くなってしまいます。

タイトルを画像で表示させたり、タイトル文字とトップ画像の間に
半透明画像をはさんだり、文字色に合わせた画像のみ表示する・・・
いろいろと対応策はあると思うんですが、
1つの対応策としてフィルターをかける例を紹介しようと思います。

ただし、operaなどのブラウザではフィルターが使用できないため、
トップ画像が見えなくなってしまいます。


フィルターをかける方法は以下の通りです。
テンプレート:showerの場合
HTMLの以下の部分を探してください。
<!-- トップ -->
<div id="title">

<!-- BEGIN title -->
<h1 class="site_title">{blog_name}</h1>
<div class="description">{blog_description}</div>
<!-- END title -->

</div>

上記部分を以下のように変更します。
太字部分を変更することで、色や濃さを変更できます。
<!-- トップ -->
<div id="title">
<!-- BEGIN title -->
<TABLE style="background-color:#FFFFFF;filter:Alpha(opacity=50);-moz-opacity:0.5;" width="700" height="100">
<TBODY>
<TR>
<TD>
<div class="site_title" id="site_title">{blog_name}</div>
<div class="description" id="description">{blog_description}</div>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- END title -->

</div>

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

次にCSSの太字部分が10pxになっていますので、0pxに変更してください。
#title {
background-color: #FFF;
background-image: url(../template/shower/img/main.jpg);
width:700px;
height: 120px;
padding: 0px 0px;
margin: auto;
border-left: 1px solid #666;
border-right: 1px solid #666;
}

その他のテンプレートでの例は、順次追加していきます?!
others(Headpic Sharing Project) | permalink | comments(17) | trackbacks(2) | ↑top
Clip!! | Ranking |

  スポンサーサイト

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

  Comment List
strollさん ありがとうございました!!
前回の方にコメントしてしまいました。
また宜しくお願い致します。
ごるご重三さん | 2004/06/07 17:53
strollさん 出来ました♪
やっぱり諦めきれずに、もう一度トライしてました(苦笑)

一つ問題解決すると、又一つ気付くものですね。
実は、フィルターが下がっているのか原因が分かりませんが上部が空いています。何故でしょうか?

それにしても今日は目が疲れました(笑)簡単に出来てしまうstrollさんが羨ましい限りです。
また宜しくお願い致します。
ごるご重三さん | 2004/06/07 18:11
>>ごるご重三さん
>実は、フィルターが下がっているのか原因が分かりませんが上部が空いています。何故でしょうか?
すいません。CSSの変更点を載せ忘れてました。
記事に追記しましたのでご覧ください。
strollさん | 2004/06/07 19:05
おはようございます。
もう涙が出ます。ありがとうございました。
出来の悪い生徒ですいません(苦笑)
自分なりに勉強したい気持ちはあるのですが・・・見捨てないでこれからもご教授下さい♪
ごるご重三さん | 2004/06/08 09:00
>>ごるご重三さん
>もう涙が出ます。ありがとうございました。
いや〜そんなにたいしたことしてないんで(^^;
勉強がんばってくださいね。
わからない点があったらお気軽にどうぞ♪
strollさん | 2004/06/08 12:58
はじめまして、あゆみと申します。テンプレート「pict」を使用しており、トップ画像共有で、フィルターをかけたいのですが上手くいきません。HTMLの方はできていると思うのですが、CSSをどのように変更していいのか分からず、質問させていただきました。
もし、お分かりになるようでしたら、教えていただけませんでしょうか?
あつかましく、申し訳ございません。
以下、タイトル部分のCSSです。

.site_title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-weight: bolder;
color: #000000;
margin: 20px 0px 20px 20px;
}

.site_title a,
.site_title a:link,
.site_title a:visited,
.site_title a:active,
.site_title a:hover {
color:#000000;
text-decoration:none;
}
>.site_title {
> font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
> font-weight: bolder;
> color: #000000;
> margin: 20px 0px 20px 20px;
>}

>.site_title a,
>.site_title a:link,
>.site_title a:visited,
>.site_title a:active,
>.site_title a:hover {
> color:#000000;
> text-decoration:none;
>}
ayumiさん | 2004/06/16 23:59
>>ayumiさん
もしかして、もう解決済みですかね?
自分のブラウザだとちゃんとフィルターかかってるように見えます(^^;
strollさん | 2004/06/17 00:59
すみません。画像全体には、フィルターはかけられたのですが、strollさんのように、バナーの左側だけ文字がはっきり見えるようにしたいのです。多分、CSSで範囲を設定するのだと思うのですが、やり方がわからず、、、お分かりになるようでしたら教えていただけませんでしょうか?
ayumiさん | 2004/06/17 09:03
>>ayumiさん
コメント欄に書くと長くなっちゃうんで記事にしました。
参考になりましたでしょうか?
strollさん | 2004/06/18 01:44
 こんにちは。楽しい
 自分のBlogをカスタマイズしたら、そういえば元はshowerだったんだから、トップ画像共有プロジェクトに参加しやすいなぁと思い、フィルターをかけて参加させてもらいました。グッド

 タイトルの文字が画像によって見えなくなるってのが難点ですねぇってことで、以前のデザインの時には、参加してみたもの、タイトルが見づらいからいいやってやめちゃいました。汗

 それでは、これからもお世話になることがあると思いますが、どうぞよろしくいお願いします。 
ある1人の市役所職員さん | 2004/07/10 12:09
>>ある1人の市役所職員さん
再度トップ画像共有プロジェクトに参加されたんですね。
きっかけになれたみたいで良かったです。
これからも、こちらこそよろしくです。
strollさん | 2004/07/11 00:07
GuTeK FiUtEkさん | 2006/03/08 17:59
who is
buy phentermine codさん | 2006/03/15 05:09
who is
read this
Dan Davisさん | 2006/03/21 06:59
<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/archos-mp3-player > archos-mp3-player </a>,[url=http://7rape.com/mp3/archos-mp3-player ] archos-mp3-player [/url], http://7rape.com/mp3/archos-mp3-player <a href=http://7rape.com/mp3/buy-mp3-player > buy-mp3-player </a>,[url=http://7rape.com/mp3/buy-mp3-player ] buy-mp3-player [/url], http://7rape.com/mp3/buy-mp3-player <a href=http://7rape.com/mp3/car-cd-mp3-player > car-cd-mp3-player </a>,[url=http://7rape.com/mp3/car-cd-mp3-player ] car-cd-mp3-player [/url], http://7rape.com/mp3/car-cd-mp3-player <a href=http://7rape.com/mp3/cd-mp3-player > cd-mp3-player </a>,[url=http://7rape.com/mp3/cd-mp3-player ] cd-mp3-player [/url], http://7rape.com/mp3/cd-mp3-player <a href=http://7rape.com/mp3/clearance-mp3-player > clearance-mp3-player </a>,[url=http://7rape.com/mp3/clearance-mp3-player ] clearance-mp3-player [/url], http://7rape.com/mp3/clearance-mp3-player <a href=http://7rape.com/mp3/compact-flash-mp3-player > compact-flash-mp3-player </a>,[url=http://7rape.com/mp3/compact-flash-mp3-player ] compact-flash-mp3-player [/url], http://7rape.com/mp3/compact-flash-mp3-player <a href=http://7rape.com/mp3/digital-mp3-player > digital-mp3-player </a>,[url=http://7rape.com/mp3/digital-mp3-player ] digital-mp3-player [/url], http://7rape.com/mp3/digital-mp3-player <a href=http://7rape.com/mp3/ericsson-mp3-player > ericsson-mp3-player </a>,[url=http://7rape.com/mp3/ericsson-mp3-player ] ericsson-mp3-player [/url], http://7rape.com/mp3/ericsson-mp3-player <a href=http://7rape.com/mp3/ipaq-mp3-player > ipaq-mp3-player </a>,[url=http://7rape.com/mp3/ipaq-mp3-player ] ipaq-mp3-player [/url], http://7rape.com/mp3/ipaq-mp3-player
Michael Murphy Karen Niwaさん | 2006/03/22 08:43

  Comment









  Trackback URL
 

  Trackback
 先日、ネスケに対応したデザインにしましたが、本日、OperaをDLし、レイアウトのズレなどがないか確認してみました。  その結果、デザインが崩れている箇所もなく、3ブラウザ(IE、ネスケ、Opera)対応のBlogになりました。[:拍手:]  ただし、Oparaの
ある1人の地方公務員のBlog | 2004/07/11 10:15
新世代Webブラウザがやってきた!Operaファーストガイドブック ユータック...
ある1人の地方公務員のBlog | 2004/09/11 00:23
Home  |  Selected Entries  |  Recent Comments  |  Recent Trackback  |  Categories  |  Archives  |  bbs