おすすめ記事ピックアップ
前回(http://www.furimuke.com/2014/01/4.html)に続き、今日はオンカーソルすると画像が黒くなる機能を削除しようと思います。カッコ良い機能なんですが、見づらいので無くしたいと思います。
カーソルがのると黒くなり、テキストが表示されます。
クロームブラウザーの右クリックで要素の検証をします。
CSSコードがわかりました。
このCSSコードを説明します。カーソルがのった時にbackground:urlの黒い半透明なPNGが表示されることで、黒くなっています。この設定を消せば黒くなりません。フォントはFFFで白が設定されています。
これに下記のようなコードを加えて、フォントは黒くして、テキストにドロップシャドウを設定しました。文字は可読性が落ちたので太文字にしています。
このようなCSSに変更します。ちなみに、あとで戻せるようにコメントアウトで削除すると便利です。
タンブラーのHTMLを編集します。検索して該当箇所を見つけ、コードを貼り替えます。
すっきりしました。
今日はここまで
http://case3pics.tumblr.com
6日目
http://www.furimuke.com/2014/01/6.html
カーソルがのると黒くなり、テキストが表示されます。
クロームブラウザーの右クリックで要素の検証をします。
CSSコードがわかりました。
このCSSコードを説明します。カーソルがのった時にbackground:urlの黒い半透明なPNGが表示されることで、黒くなっています。この設定を消せば黒くなりません。フォントはFFFで白が設定されています。
.post .hover { position: absolute; top: 10px; left: 10px; color: #fff; background: url('http://static.tumblr.com/vbjnszm/2ZCml1j9p/dim.png'); display: none; }
これに下記のようなコードを加えて、フォントは黒くして、テキストにドロップシャドウを設定しました。文字は可読性が落ちたので太文字にしています。
color: #333; text-shadow: 0 -1px 5px #FFF, -1px 0 5px #FFF, 1px 0 5px #FFF; font-weight: bold;
このようなCSSに変更します。ちなみに、あとで戻せるようにコメントアウトで削除すると便利です。
.post .hover { position: absolute; top: 10px; left: 10px; color:#333; text-shadow: 0 -1px 5px #FFF, -1px 0 5px #FFF, 1px 0 5px #FFF; font-weight: bold; /* background:url('http://static.tumblr.com/vbjnszm/2ZCml1j9p/dim.png'); */ display: none; }
タンブラーのHTMLを編集します。検索して該当箇所を見つけ、コードを貼り替えます。
すっきりしました。
今日はここまで
http://case3pics.tumblr.com
6日目
http://www.furimuke.com/2014/01/6.html