賢威7の記事や固定ページ・トップページの画像に影をつける方法

スクリーンショット 2016-03-13 14.01.43

 

 

今回は賢威7のメインコンテンツの画像に影をつける方法を解説していきます。
⇩賢威についての詳しい情報は下記から⇩
賢威公式サイト
 

投稿記事や固定ページ内の画像に影をつける方法

 

投稿記事内に使用した画像に影をつけることで画像が見やすくすることができます。

影の付け方はプラグインやコード追記など様々なやり方がありますが、今回はCSSに記述するだけで全ての記事・固定ページ内の画像に影の効果を反映させる方法です。

 

base.css内に以下のコードを追記しましょう。

 

.single .article-body img,
.page .article-body img {
box-shadow: 0 0 10px rgba(0,0,0,.2);
}

これだけで全ての投稿記事、固定ページ内の画像に影をつけることができます。

影の範囲(ぼんやり感)は◯pxで調整できます

 

スクリーンショット 2016-03-13 14.04.56

 

ちなみに10pxで上記の用な感じになります。若干見にくいですけど確かに影は付いています。

 

 

トップページ画像に影をつける方法

 

次に投稿記事、固定ページ以外の場所の画像に影をつける方法を解説します。

今回はトップページび記事一覧に表示させるサムネイル画像に影をつけていきます。

 

やり方は同じでbase.cssに下記のコードを追記してください。

 

.article-body img {
box-shadow: 0 0 10px rgba(0,0,0,.2);
}

 

トップページを見てみましょう。

 

スクリーンショット 2016-03-13 13.58.43

 

こんな感じでトップページの記事一覧のサムネイルに影を付けることができました。

 

影の効果は画像を見やすくすることもできますし、際立たせることもできますので是非やってみてくださいね。

 
賢威7カスタマイズ大図鑑へ戻る

副業から月収10万円以上を安定的に稼ぐ力を身につける無料メルマガ講座

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-10-16-37-15

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

コメントを残す

自己紹介・挨拶がないコメントに関しては返答を控えさせて頂きます。
サブコンテンツ

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

キラの公式LINE@

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-29-7-40-42

このページの先頭へ