vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

WordPress記事内の画像に影をつける方法

      2015/10/11

LINEで送る
Pocket

wp-i-shadow
こんにちは、okutani(@okutani_t)です。WordPressサイトの記事内にある画像に影をつけるには、2通りのやり方があります。1つはShadows等のプラグインを使う方法と、もう1つはCSSを使った方法です。

正直、画像に影をつけるぐらいであれば、わざわざプラグインを導入して行うこともないのでCSSで記述するほうがオススメです。CSSでスタイリングすれば他のプラグインとの干渉も気にしないで良いですし。

なので今回は、CSSを使って記事内の画像に影をつけていきます。CSSがよく分からない方は上記のプラグインを使うのもOKだと思います。どちらかお好みで行ってみましょう。

ただ、今回のCSSの記述方法はかなりかんたんなので、CSSがよくわからない方でもチャレンジしてみる価値はあるかと思います。

いろいろと前置きが長くなりましたが、実際に作業を進めていきましょう。

スポンサーリンク

画像に付加されるclassについて

記事内に画像を挿入する際には、下記のように配置位置に対応したclassが自動で付加されます。CSSファイルに、対応したclassに合わせて影をつけるスタイルを記述していけばよさそうですね。

  • 配置位置 左  :alignleft
  • 配置位置 中央 :aligncenter
  • 配置位置 右  :alignright
  • 配置位置 なし :alignnone

現在利用しているclass名は、記事投稿画面から「テキストモード表示」で画像を挿入すると確認できます。

wp-i-shadow

私は配置位置なしの「alignnone」でいつも画像を挿入しているので、次のとおりスタイルを記述しました。

CSSファイルにbox-shadowを記述

では、下記のコードをCSSファイルに記述してみましょう。私の場合はstyle.cssがCSSファイルに該当しますので、そちらに記述しました。

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

box-shadowを使うことで、指定した要素に影を付けることができます。box-shadowの値は次のように設定できます。

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

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

  • 3つ目の値
  • 影の広がりを指定します。大きくすることで影の範囲が広くなります。

  • 4つ目の値
  • 色を指定します。#000の代わりにrgba(0,0,0,1)のような記述でもOK。

値はご自身の好きなように変えてみましょう。値を設定した後、実際に影がついたか確認してみます。

wp-image-shadow-2

上記のとおり、記事内の画像に影をつけることができました。

上下左右に影をつけてみる

下記のように「,」でつなげてあげることで、上下左右に影をつけることもできます。

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

こうすることで、上下左右に影をつけることができますね。

また、次のような書き方でもOKです。

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

たて方向とよこ方向を0にして広がりを持たせてあげることで、上下左右に影が付きました。

広がりを大きくしたり、色を変更したり等々、ご自身のサイトにあったスタイルにしてみてください。

まとめ

画像に影をつけてあげるときはbox-shadowを使えばOKです。box-shadowでは、影の濃さや広がり方も設定できて良いですね。

「#000」の値を変えることで、色の指定もかんたんにできます。#を使って色を表すことを「カラーコード」といいますので、気になる方はカラーコードで調べてみてください。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
box-shadowは画像以外にもdivなどでよく使いますね。この機会に使い方を覚えておきましょう。これでどんどんサイトがオシャレになっていってGoodです。

 - CSS, WordPress

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

ロリポップにWordPress導入&ムームードメインの独自ドメインを設定する

こんにちは、okutani(@okutani_t)です。本記事では、「ロリポップ …

[レスポンシブ対応] CSSでチャット風デザインを実装する

「好きなプログラム言語何?」と聞かれれば、ためらいなく「CSS」と答えるokut …

WordPressサイトをGitで管理。Macローカル開発環境編

みなさんはちゃんと「WordPressのバージョン管理」してますか? 変な修正を …

hタグ下に斜めのストライプボーダーを設置&ボーダー画像の作り方解説

デザインセンスが皆無、見よう見まねでWebデザインやってる僕okutani(@o …

本番環境のWordPressサイトを『VCCW+WordMove』でローカルと同期!

こんにちは、okutani(@okutani_t)です。VCCWを使うとWord …

[CSS] リンクの頭に参考バッヂ付けたらレイアウト崩れた。white-spaceで解決

CSSで可愛いレイアウトが出来るとうれしくなりますよね。Webデザインのお勉強中 …

「Animate.css + wow.js」でWebサイトにアニメーションをつけてみよう

こんにちは、okutani(@okutani_t)です。みなさんはWebサイトに …

ポチレバをCSSで装飾してみた

こんにちは、okutaniです。前回「カエレバをCSSで装飾してみた | vde …

[WordPress] 記事下の一言コメントをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。以前、WordPress …

『Vagrant+VCCW』でWordPressローカル環境を構築してみよう

こんにちは、okutani(@okutani_t)です。お店のサイトやブログなん …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。