ビジネスクラフト BUSINESS CRAFT
0
MENU CLOSE

ビジネスクラフト BUSINESS CRAFT

ビジネスクラフト BUSINESS CRAFTビジネスクラフト BUSINESS CRAFT
  • ホーム
  • HP制作プラン
  • 制作料金 各種
  • 制作実績
    • 制作実績一覧
    • ウェブホームページ
    • アニメーション
    • 動画映像制作・編集
    • 講習コンサルティング
  • カテゴリー
    • ウェブデザイン
    • WordPress
    • マーケティング
    • ネットビジネス
    • インターネットの使い方
  • 会社概要
  • 免責事項ポリシー
  • お問い合わせ
  • 高速表示

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

ON 2018年5月19日 BY: ビジネスクラフト 1 COMMENT
スポンサーリンク

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

 

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

 

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

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

 

 

目次

  • 画像に影をつける
    • ・1つ目の値
    • ・2つ目の値
    • ・3つ目の値
    • ・4つ目の値
  • 上下左右の影をつける

画像に影をつける

対応する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;
}

 

 

スポンサーリンク
前へ
次へ

1 Response

コメントを書く Cancel Reply

  • 高速表示

    高速表示に切り替え

  • 検索

  • 最近の投稿

    • Mac版Excelで改行する方法
    • 【5分】WordPressサイトをプラグインでAMP対応する方法・導入手順
    • 誰でも書ける論文・レポートの書き方簡単10ステップ
    • AMPが表示されない時のワードプレス対処方法【AMP or WP Accelerated Mobile Pages】
    • WordPressスマホで表テーブルを横スクロールする方法【簡単HTMLコピペ】
    • LINEタイムラインに流れてきた投稿を非表示にする方法
    • LINEのタイムライン「いいね」「シェア」の使い方と設定方法
    • LINE「ホーム」「タイムライン」とは
  • カテゴリー

    • WordPress (61)
    • インターネットの使い方 (57)
    • ウェブデザイン (52)
    • コピーライティング (1)
    • ネットビジネス (6)
    • マーケティング (5)
  • 制作について

    • ホーム
    • HP制作プラン
    • 制作料金 各種
    • 制作実績
    • 会社概要
    • 免責事項ポリシー
    • お問い合わせ
    • 高速表示
  • アーカイブ

    • 2018年6月
    • 2018年5月
  • タグ

    .htaccess (2) AMP (2) Android (1) Animate (1) CSS (8) Excel (1) Facebook (2) Gmail (3) Google (8) Google Adsenseグーグルアドセンス (1) Google Drive グーグルドライブ (2) Googleカスタム検索 (7) HTML・XHTML (10) Instagram (4) iPhone (2) JavaScript(jQuery) (2) Line (3) MAC (6) Photoshop (1) PHP (2) SEO・SEM (2) Twitter (5) Windows (1) WordPressセキュリティ (5) WordPressテーマ (7) WordPressプラグイン (23) WordPress使い方 (13) WordPress子テーマ (4) YouTube (6) アプリ・ソフトウェア (15) カスタマイズ (27) サーバー (5) ドメイン (6) パソコンの使い方 (2) ブラウザ (4) ブラウザ・アドオン (3) ブログ運営収益化 (8) ホームページ制作 (82) 仕事効率化 (9) 便利なサービス (11) 収益化 (3) 情報科学 (3) 文章の書き方 (1)
  • スポンサーリンク



制作実績

  • 制作実績
  • オリジナルアニメーション
  • 動画映像制作・編集
  • ウェブサイト制作実績
  • 講習・コンサルティング

制作依頼について

  • 制作料金 各種
  • ホームページ制作お任せ安心プラン

ご利用について

  • 会社概要
  • 免責事項ポリシー
  • お問い合わせ
©️ Business Craft 2019