Q&A
こんばんは、はじめまして。
HTMLは、そのまま貼ると見づらいのでコードタグというもので、囲ってください。
編集画面の上に＜／＞というボタンがあると思います。 または ` ３つで改行して囲みます。
完全な自作サイトではないのですが
会社の集客サイトで広告媒体のサイトなのですが
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
<head> <!-- ビューポートの設定 --> <meta name="viewport" content="width=device-width,initial-scale=1"><style type="text/css">
.btn01 {
font-size:30px; text-decoration: none; background-color:#fd0077;
background-image:url("http://margaret7292.com/material/013.gif?VER=20160716192359");
background-repeat: no-repeat;
background-position:center center;
display: block; width: 150px; height: 170px; line-height: 170px; /* 白抜きピンク色設定*/
text-align: center;
color: #fff;
text-shadow: 0px 0px 15px rgba(0,0,0,.5)#FF6694;
font-family: 'Hiragino Maru Gothic Pro','ヒラギノ丸ゴ Pro W4', sans-serif;
/* ここで動く速度とか設定 */ transition: all 1s ease; -webkit-transition: all 1s ease;
}
.btn01:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
/* ウィンドウ幅が0?479pxの場合に適用するCSS */
@media screen and ( max-width:479px )
{
.photobbs
{clear:both;
margin:0 auto;
display: inline-block;
}
}
</style> </head> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ と記述して テキストを白抜きで輪郭をピンクをぼやかしたようにしたかったのですが 反映されません。 該当のＨＴＭＬコードは ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・<div id="mainmenu"> <div class="btn01" style="float:left;text-align:center;"><a href="http://www.marguerite7292.com/top/girls/" target="_blank">女の子</a></div> <div class="btn01" style="float:left;text-align:center;margin-left:5px;"><a href="http://www.marguerite7292.com/top/schedule/" target="_blank">出勤表</a></div> <div class="btn01" style="float:left;text-align:center;margin-left:5px;"><a href="#systembox"target="_blank" >システム</a></div> <div div class="btn01" style="float:left;text-align:center;margin-left:5px;"><a href="http://www.cityheaven.net/kagawa/A3701/A370101/margaret/A6Map/" target="_blank" >アクセス</a></div> <div div class="btn01" style="float:left;text-align:center;margin-left:5px;"><a href="http://www.girlsheaven-job.net/9/margaret/" target="_blank" >求人情報</a></div> </div>` ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ となります。 よろしくお願いいたします。
バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
回答2件
0
ベストアンサー
リンク文字色はブラウザにデフォルトの設定があります。
CSSで.btn01{...} .btn01:hover{...}としているところを.btn01 a{...} .btn01 a:hover{...}とすれば反映されると思います
投稿2016/07/16 17:58
編集2016/07/16 18:03
総合スコア110
ありがとうございます。
上記の通り記述しましたらテキストは白色となりました。
ただ、白抜きの境界線ぼかしのtext-shadowが反映されません。
よく見たら rgba(0,0,0,.5) が不要なのでは？
ありがとうございます。
やってみます。
お世話になります。
いろいろと試しましたができず、結局背景画像にフォトショップで白抜き加工したテキストを用いて代用しました。ありがとうございました。
そうでしたか。
コードをこちらのローカル環境にコピペし、先述の修正に加え「text-shadow: 0px 0px 15px #FF6694;」とやってみたら問題なくピンクのぼかしは入りましたが…
お役に立てなかったようで申しわけありません。
とんでもありません。
知識不足で解決にいたりませんでした。
ありがとうございます。
また、何かありましたらよろしくお願いいたします。
0
aタグの上のdiv要素にtext-shadowがかかっているのに対し、hoverの時はaタグにかかっているからだと思います。
hoverしていない時のtext-shadowを
.btn01 a{...}にいれてみてはどうでしょう？
投稿2016/07/16 23:23
総合スコア13
ありがとうございます。
text-shadow: 0px 0px 15px rgba(0,0,0,.5)#FF6694;
の一文を.btn1 a{...}に入れましたが
変化ありません。
また、別の回答者様のご回答を参考に
.btn01{...} .btn01:hover{...} としているところを
.btn01 a{...} .btn01 a:hover{...}と変更しテキスト文字自体は白色に変更
されております。
私の記述の仕方が間違ってますでしょうか？
お世話になります。
いろいろと試しましたができず、結局背景画像にフォトショップで白抜き加工したテキストを用いて代用しました。ありがとうございました。
あなたの回答
tips
プレビュー
