【5日目】見やすく修正－思いつきサイト制作

おすすめ記事ピックアップ

前回（http://www.furimuke.com/2014/01/4.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