賢威の記事エリアに影を作って記事を目立たせてみた

※当サイトにはプロモーションが含まれています。

書いた記事をなるべく読んでもらいたい。

書いた記事を少しでも目立つようにしたい。

と思っている方もいらっしゃるのではないでしょうか？

自分も同じです。

その為、このサイトでは、記事エリア部分に薄い影を作って、記事の部分（メイン）が少し浮き上がっているように見せています。

そんな効果を実現するCSSです。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

賢威の記事エリアに影を作成するCSS

賢威の記事エリアに影を作成するCSSです。

.keni-main .keni-main_inner .article_wrap {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 12px 0 rgba(0, 0, 0, 0.05);
}

上記のCSSは、box-shadowに複数（２つ）の影を適用しています。

複数（２つ）の影を適用する事で、より立体感を出しているつもりですが、まぁ、自己満足です。

下記のように、１つの影でも、充分な効果は得られると思います。

.keni-main .keni-main_inner .article_wrap {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
}

なお、box-shadowは、

box-shadow: [水平方向のオフセット] [垂直方向のオフセット] [ぼかしの範囲] [広がりの範囲] [色];

といったルールになっています。

ご参考までに。

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

※全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。