wordpress上の画像の枠に影をつけてやる

こんにちは、めーゆーです。

wordpressのCSSは管理画面上からとても簡単にいじることができるので、試しに影を付けてやろうと思います。

画像の枠を弄る

まず、管理画面上の「外観」→「テーマの編集」へと進みます。

スクリーンショット 2015-09-09 20.40.31

次に、「style.css」か「design.css」を開きます。

スクリーンショット 2015-09-09 20.45.42

cssの最下層に、次のコードを付け加えます。

.post img {
 box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

ファイルを更新すれば、いいはず。

どういうことか

.post imgは、投稿内の画像について弄れるクラスなので、好き勝手いじれば投稿内の画像が好き勝手に変わるというわけです。

もうちょっと弄りたいという方は、是非cssを学んで下さい。

いろんな例

画像に、「水平方向に5px」、「垂直方向に5px」、「ぼかしの距離が5px」、「透明な黒」な影を付けます。

.post img {
 box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

 

画像に「水平方向に5px」、「垂直方向に5px」、「ぼかしの距離が5px」、「透明な黒」な影を付け、角を丸くします。

.post img {
 box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
 border-radius: 7px;
}

 

画像にマウスが乗った時、「水平方向に5px」、「垂直方向に5px」、「ぼかしの距離が5px」、「透明な黒」な影を付けます。

.post img {
 transition: box-shadow 0.3s;
}
.post img:hover {
 box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}

 

画像に「水平方向に4px」、「垂直方向に4px」、「ぼかしの距離が4px」、「透明な黒」な影を付け、マウスが乗った時、「水平方向に6px」、「垂直方向に6px」、「ぼかしの距離が6px」、「透明な黒」な影を付けます。

.post img {
 box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
 transition: 0.3s;
}
.post img:hover {
 box-shadow: 6px 6px 6px rgba(0,0,0,0.3);
}

おわりに

CSSについて触れるような記事になりました。

CSSはいじっているととても楽しくなるので、是非学んでみてください。

役に立てたら幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です