はてなブログの"画像に影"のカスタムcss【ブログカスタムVol.3】

f:id:george-gogo:20151211234508p:plain

よし、今回で早くも3回目のカスタム記事です。やっていきましょう。

はてなブログのカスタム記事のまとめはこちら

さっき気がついたんだが、スマホから見ると無料のアカウントだとCSSカスタムできないのね。まとめてやろうと思っていたのに…

記事が溜まったら「Pro」に切り替えよう!(そこまで続くかな)

”画像に影”をつけよう

なんでかと言いますと、これ見てください。

f:id:george-gogo:20151211211419p:plain

トップページのアイキャッチ画像なんですが、この赤い線の内側に画像の境目があるんだけど、背景と同じ白だと見えなくて分かりづらい。

なら影をうっすらつけてフワフワさせちゃおう!

クラス名は.hatena-fotolife

このクラスのCSSを変更すれば、アイキャッチも記事内の画像も一括だぜ。

プロパティはbox-shadow

プロパティっていうのは、簡単に言うと「技」ってことです。

画像に影をつける時はbox-shadowって技を使うよってこと。

簡単一発コピペしてください

/*****画像の影****/

.hatena-fotolife{

-moz-box-shadow: 1px 3px 7px 2px #C5C5C5;

-webkit-box-shadow: 1px 3px 7px 2px #C5C5C5;

box-shadow: 1px 3px 7px 2px #C5C5C5;

}

説明コーナー

まず一行目はさっき言ったクラス名ですね。

問題は2行目・3行目です。

2行目は「firefox」対策

3行目は「Safari」対策です。

ここで「は?意味わからないし」って人は、とりあえずコピペすればOK。

世の中の人がみんな最新のブラウザを使っているわけではないので、比較的新しい技術のCSSを使うと見れないって人がいるんですよ。

そんな人のためやってあげるのです。これをやることで、少しでも多くの人がこの美しい影を見て楽しめるのさ。あぁ影よ…(なぞ)

 

 つまり、4行目が本物。(いや全部本物だけど)

そして4行目と同じ内容を2行目と3行目にも書けばいいって話です。

 

分かりやすい画像作ったぜ。

f:id:george-gogo:20151211223018p:plain

参考画像なので、数値と影の図形はズレているけど気にしないで。

 

よし各自数字をいじって遊んでみよう!

 

おしまい。