自由でクリエイティブな暮らしを応援!
Search

WordPress記事の画像に影をつけて浮いてるように見せる方法【CSSサンプル】

WordPressの記事に画像を挿入して公開した際に、デフォルトのままだと画像と文章が一体となっていてわかりにくい場合があります。(WordPressテーマによって異なる)

画像に影をつけると、画像がまるで浮いているように見えます。

今回は、CSSを編集することで、画像に影をつける方法をご紹介します。

※CSSにコードを貼り付ければ、自動的にimgタグのついた画像に影がつきます。値を変えることでお好みの影をつけることができます。別にclassを指定することもできます。

画像に影をつける

対応するCSSファイルに下記のコードを記述します。

box-shadowを使って指定した要素に影をつけます。

/*画像に影をつける*/
img.alignnone {
    box-shadow: 1px 1px 5px #000;
}

・1つ目の値

よこ方向の影。正の値は右、負の値は左に影がつきます。

・2つ目の値

たて方向の影。正の値は下、負の値は上に影がつきます。

・3つ目の値

影の広がり指定。大きくすることで影の範囲が広くなります。

・4つ目の値

色指定#000の代わりにrgba(0,0,0,1)のような記述でも表現できます。

上下左右の影をつける

img.alignnone {
    box-shadow: 1px 1px 5px #000, -1px -1px 5px #000;
}

上下左右の影の別の書き方

img.alignnone {
    box-shadow: 0 0 5px #000;
}

いいね、シェア、フォロー歓迎!2020テーマは「自然から学び自然と共に生きる」

EVAHKS

運営:嶋耕作(しまこうさく)『相場の熊さん』の愛称で親しまれているFX裁量トレーダー、ライター。自然が好きで日本国内に山所有。ひいお爺様は外交官。20代前半に教育関連事業にて年商3億円達成。その後、肺炎で臨死体験。世界人口4%の性格タイプを持つ。自由と安定。混乱と静寂。異なる性質のふたつを併せ持っている。趣味は読書、映画、アニメ、PUPG、人狼ジャッジメント、バスケ、音楽。好きな場所は、海、森、温泉、猫の肉球。漫画の島耕作はサラリーマンですが、サラリーマンはこの世で一番やりたくない仕事です。

1 Comment
  1. […] い→ ワードプレス 記事の画像に影をつけて浮かせて見せる方法 […]

Leave a Comment

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください