• 締切済み

忍者ブログでフィルター

忍者ブログのカスタマイズ掲示板にうまくアクセスできないので、 こちらで質問しています。 スタイルシートの編集で タイトル文字の周りを太陽の光のように白くにじませたいので、 タイトル文字のプロパティ(.TopTitleFont)で filter:glow(color=#ffffff,strength=100) としたのですが フィルターが反映されません。 フィルターを用いるのはブログでも他のウェブページでも初めてなのですが、 フィルターを用いる場合の注意点などはありますか? ちなみにタイトル部分のHTMLは <div id="TopTitle"><span class="TopTitleFont"><a href="">タイトル</a></span></div> となっており、#TopTitleはタイトル文字の位置指定です。 また、忍者ブログの特質として何かあればよろしくお願いします。

みんなの回答

  • 345itati
  • ベストアンサー率48% (795/1639)
回答No.2

#1さんの補足ですが、filterプロパティはIEの独自拡張であるため、IEの5より前のバージョン、及び非IE系レンダリングエンジンのブラウザ(Firefox,Opera,Netscapeなど)では反映されまん。 後、<span>に使いたい場合は、display: block;でブロックレベル要素にしてwidthとheightを指定するか、position: absolute;を指定しなきゃダメなようですね。。。 例 .TopTitleFont { filter: glow(color=#ffffff,strength=100); display: block; width: 200px; height: 40px; } position: absolute;を使うと、表示位置が絶対配置になる場合があるので、CSSの全体構成を見直さなければならなかもしれないので、ちょっとお勧め出来ません。。 //当方Mac Firefoxでログインしているので検証出来ません //個人的に、こういう独自拡張のプロパティは、本来は余り使うのは好ましくないと思います^^;自分でフォントを加工して、画像にしちゃうのが一番安全だと思いますが・・・・

Musicful-hearts
質問者

お礼

テンプレートなので自動的にできると便利だなーと思ったのです。 了解です。画像作成の説明を入れておきます。

  • akuhijrwq
  • ベストアンサー率35% (381/1064)
回答No.1

もっと具体的に どのようにcssを書いたのですか? .TopTitleFont filter:glow(color=#ffffff,strength=100) ? .TopTitleFont filter:glow(color=#ffffff,strength=100); ? フィルターはすべてのブラウザに対応していませんが あなたの環境ではきちんとみえるのですね?

Musicful-hearts
質問者

補足

>フィルターが反映されません。

関連するQ&A

  • 文字をぼかす方法 テキストシャドウやフィルター文字

    ど素人です。CSSをホームページビルダーを使って弄りながら微かに覚えていってます。 http://x69.jp/croix/17/ ←こちらのトップのようなものを作りたいです。 <div align=""> <table cellspacing="0" cellpadding="0" width="100%" height="100%"><tr><td align="center" valign="middle"> <a href="http://*****" onfocus="this.blur()" title=" dive into "><img src="img/index.gif" onmouseover="this.src='img/index2.gif'" onmouseout="this.src='img/index.gif'" border="0"></a> <img src="img/index2.gif" height="0" width="0"> HTMLファイルはこんな感じでした。さっぱりわからないのですが、オンマススとあるので、マウスを上にのせた状態の時に文字が滲んだように見えているんだろうなと推測してます。 ***わかる方は説明してくださると嬉しいです。 今の私には理解できないので、http://copicopi.com/filter.html こちらのサイトを参考にしたいと考えています。 ***ただコピーするだけのことなのですが、影をつけたまま文字を滲ませたりすることを一度に設定したいときはどうすればいいのでしょうか? いくつかの設定をしたいときは、「;」で区切るような文章を見た気がします。 <span style="width:100%;font-size:20pt;filter:Alpha(opacity=10.)このあと→ ;filter:Blur(add=0, direction=315,strength=4)">ここに文章を書いてください</span> というように、続けていいのでしょうか。 チェックすればわかることなのですが、ビルダーの使い方も届いたばかりで把握してなくて、教えていただけると助かります。 文字をぼかすのはIEでは見れないと書いてあったようなのですが、CSS3でこういうことができるような記述も読みました。 でも私のPCでは見えています。 ***フィルター文字は使用しないほうがいいのでしょうか。 あちらこちらの記事に惑わされています。わからないので、教えてください。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • 忍者アクセスアナライザーがうまく貼れません。

    ライブドアブログで 忍者アクセスアナライザーを貼ったのですが 表示されません。 「できるブログ」という本を見ながら 下記のように <body class....index"> のあとに貼り付けました。 本では <body> の後に貼り付けるとありましたが <body>がなかったので <body class......index"> の後にいれました。 なにか間違っているでしょうか。 スペースを空けてはいけないでしょうか。 10日前から アクセスアナライザーをなんとか貼り付けよう悪戦苦闘してますが。。 どなたか教えていただけませんか。 IfFoafUrl><link rel="meta" type="application/rdf+xml" title="FOAF" href="<$FoafUrl$>" /></IfFoafUrl> <title><$BlogTitle ESCAPE$> - livedoor Blog(ブログ)</title> </head> <body class="standard_blue standard_blue_3c index"> <!--shinobi1--> <script type="text/javascript" src="http://x5.omiki.com/ufo/079614900"></script> <noscript><a href="http://x5.omiki.com/bin/gg?079614900" target="_blank"> <img src="http://x5.omiki.com/bin/ll?079614900" border="0"></a><br> <span style="font-size:9px"><img style="margin:0;vertical-align:text-bottom;" src="http://img.shinobi.jp/tadaima/fj.gif" width="19" height="11"> <a href="http://monthly_apartment.rentalurl.net" target="_blank">マンスリーマンション</a> <a href="http://shinchiku.rental-rental.net" target="_blank">新築</a></span></noscript> <!--shinobi2--> <a name="top"></a> <$BlogHeader$> <div id="container"> <div id="cgmmenu"><ul> <li><a href="http://clip.livedoor.com/clips/<$BlogOwner$>/" target="blank">クリップ</a></li> <li><a href="http://pics.livedoor.com/u/<$BlogOwner$>/" target="blank">ピクス</a></li> <li><a href="http://lislog.livedoor.com/u/<$BlogOwner$>/" target="blank">

  • ツイスターのブログパーツ貼れない!

    ツイスターのブログパーツ貼れない! gooブログで、 <div align="center"><a href="http://twitter.com/lovemusic" target="_blank"><img src="http://twimg.info/src/?id=lovemusic" width="160" height="240" border="0"></a><br><a href="http://twimg.info/" style="text-decoration:none"><span style="font-size:9pt">Powered by ついめ~じ</span></a></div> と、 ここのサイト http://twimg.info/ つかって生成したけど貼れないのは試用?

  • ブログの写真が消えた。

    ちょっと前に不正アクセスがありましたので、暗証番号を変えてください。とのメールが届きました。 今日、ふと自分のブログの過去記事を見てみると、ある記事の写真が全部消えています。 そして意味不明のhtmlがいっぱい書き込んでありました。 これは、一体どういうことなのでしょうか。 パソコン内部の写真もそこだけ一部消えていました。 </div><div>&nbsp;</div><div><div align="center"><span><a href="http://blogs.yahoo.co.jp/izuminotoki_0503/GALLERY/show_image.html?id=65193808&amp;no=6"><img src="http://blogs.c.yimg.jp/res/blog-85-20/izuminotoki_0503/folder/1561129/08/65193808/img_6?1409447801" border="0" alt="イメージ 6" width="560" height="315" /></a><a style="visibility: visible" href="http://blogs.c.yimg.jp/res/blog-85-20/izuminotoki_0503/folder/1561129/08/65193808/img_6?1409447801" title="拡大"></a></span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div></div></div></div></div></div></div></div></div></div></div>

  • タグの組合せ方について

     ホームページ作成ソフトを使ってはいませんが、メモ帳に直接HTMLを入力してページを作ろうとしています。初心者です。  今回は発光させた文字をセンタリングする方法について教えてください。文字を発光させるには<div style="font-size:24pt; color:orange; position:absolute; filter:Glow(color=aqua, strength=8)"> ここに発光色を付けたい文字 </div>みたいな感じで入力します。また、文字をセンタリングするには<div align="center">センタリングする文字</div>と入力します。  この2つを組合せ、発光した文字をセンタリングするにはどう記述すればよいですか?

  • firefoxで位置を正しく表示させるには?

    IEだと正常に画面の右側に表示されるんですが、FireFoxと Mozilaでは左側に表示されてしまいます。 以下が上手くいかないところです。 <div style="position:absolute; top:4px; right:2px; filter: glow(color=white);"> <a href="http://???.jp/" target="_blank"> <img src="???.gif"> </a> </div> 余談ですがfilterはIEだけなんでしょうか? (こっちも良く分かりません。) 上手くいく方法を教えてください。

    • ベストアンサー
    • HTML
  • 訪問済みリンク色を設定したいが難易度高いです

    以下のHTMLのハイパーリンクになってる文字列に対し、「訪問済みリンク色(a:visited)」だけ新たに設定したいです。 現在はすべて文字色は赤で、訪問済みリンクであっても色は赤のままです。それを訪問済みリンクなら青になるようにしたいです。 ブラウザの設定で変更する方法ではなく、CSSで変更したいです。 <body>タグの中は「一切いじれない状態」なので、<body>の外部に新たにcssを書き、そこから色を変更したいですが、ハイパーリンクの文字列は、タグの挟まれ方の種類が以下のとおり(5)種類あります・・・ <a>タグは、<a href="http://*" class="title">と<a href="http://*"> の(2)種類、 他にも<span>や<strong>の位置が違ってたりしますが、<body>の中はいじらずに訪問済みリンク色だけ変更することは可能でしょうか? <body> <div class="blogbody"> <div class="text"> ■文字列(1) <li><span style="color: red"><a href="http://*"><strong><span style="color: red">文字列(1)</span></strong></a><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(2) <li><a href="http://*" class="title"><strong><span style="color: red">文字列(2)</span></strong></a>DATE</li> ■文字列(3) <li><a href="http://*" class="title"><span style="color: red"><strong>文字列(3)</strong></span></a><span style="color: red"><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(4) <li><a href="http://*"><span style="color: red"><strong>文字列(4)</strong></span></a><span style="color: red"><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(5) <li><a href="http://*"><strong><span style="color: red">文字列(5)</span></strong></a>DATE</li> </div> </div> </body>

    • ベストアンサー
    • HTML
  • ネスケとIEを同じ表示にしたい

    文字をborderで囲ったものを二列に6つずつ並べて、サイトのメニューとして 使っています。 HTMLを以下のように記し、↓ <div> <span class="menu"><a href="#">AAA</a></span> <span class="menu"><a href="#">BBB</a></span> …… </div> <div> <span class="menu"><a href="#">CCC</a></span> <span class="menu"><a href="#">DDD</a></span> …… </div> これをcssで以下のようにしているのですが、ネスケで上手く表示されません 。 .menu { font-size: 13px; text-align: center; margin: 2px; border:1px solid gray; width: 97px; height: 15px; color: #808080; } どうも、marginとwidth、heightが反映されていないようなのですが、これを ネスケでも反映させるにはどうしたらいいでしょうか。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • ブログテンプレートHTMLの編集、文字を右に寄せたい

    ブログテンプレートHTMLの編集、文字を右に寄せたい <div class="entrystate"> <span class="entrydate"><%topentry_year>/<%topentry_month>/<%topentry_day>&nbsp;<%topentry_youbi>.&nbsp;<%topentry_hour>:<%topentry_minute>&nbsp;[<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>">edit</a>]</span></div><br> このような記述なのですが、これを右詰めにするにはどうしたらよいのでしょう? 他の場所は<div align="right"> </div>という記述を挿入すれば大丈夫なのですが、ここだけがどうしてもできません。 どなたかわかる方いらっしゃいましたらよろしくお願いします。

  • 記事タイトルの横にコメント数を表示する方法

    現在、ライブドアブログでブログを制作中です。 ↓をトップページなど各ページに挿入したいのですが、 <div class="article-title-outer"> <h2 class="article-title entry-title"><a href="<$ArticlePermalink$>" title="個別記事ページへ" rel="bookmark"><$ArticleTitle ESCAPE$></a><IfArticleRating><span class="rating"><$ArticleRatingIcon$></span></IfArticleRating></h2> <IfArticleAllowComment><span class="article-comment-count"><a href="<$ArticlePermalink$>#comments" title="コメント一覧へ">Comment(<$ArticleCommentCount$>)</a></span> </div> どこに挿入したら良いか分かりませんでした。 記事タイトルのところに挿入して、保存しようとしたら文法上の誤りがありますと出ました。 テンプレートは現在↓を使っています。 http://blog.livedoor.jp/staff/archives/51796778.html ↓は自分のブログのCSSです。 http://www.dotup.org/uploda/www.dotup.org3942917.txt ↓はブログのトップページです。 http://www.dotup.org/uploda/www.dotup.org3942922.txt 解決策が分かる方いましたら、力を貸してください。 よろしくお願いします。

    • 締切済み
    • CSS