Wordpress

ブログで使用しているスタイルシートを少し修正。

最近iPhone系の画像がフラットデザインになったこともあり結構シンプルになってしまってスクリーンショットのメリハリが付かない感があったので枠を入れることにしました。

画像にドロップシャドウをつける


#content img {
border: 1px solid #000000;
box-shadow: #000000 0 0 10px -2px;
height: auto;
margin-bottom: 12px;
max-width: 100%;
}


box-shadowに該当します。これだけでも結構見栄えが良くなりますがキャプチャ系のソフトで影がつくものがあるのでその辺りは随時調整を、、

こんな感じになります。boderタグで枠線もつけているので強調された形になりますね、。

今風な丸い感じのアイコン

元々は、下のような感じでリンクを右側に出していまいた。


.wp-post-image {
border: 1px solid #CCCCCC;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
float: left;
margin-bottom: 10px;
margin-left: -80px;
padding: 1px;
height: 64px;
width: 64px;
}


このradiusというスタイルで簡単に丸くなります。